From 60b60bd4b34a54eadfacbcf05b1fc7218431ead1 Mon Sep 17 00:00:00 2001
From: Joshua Zacek <personal.joshuazacek@gmail.com>
Date: Wed, 19 Jun 2024 13:46:47 +0100
Subject: [PATCH] (5943) Match country selector button's background to phone
 number input's background (#5956)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fixes #5943

### Before
Light
<img width="218" alt="Screenshot 2024-06-19 at 12 37 22 PM"
src="https://github.com/twentyhq/twenty/assets/57673080/981d1877-be4e-4071-9a8d-9d0ed7e933ab">
Dark
<img width="223" alt="Screenshot 2024-06-19 at 12 39 42 PM"
src="https://github.com/twentyhq/twenty/assets/57673080/a3730ef5-21ba-4d90-998d-d330aec350ad">


### After
Light
<img width="216" alt="Screenshot 2024-06-19 at 12 39 00 PM"
src="https://github.com/twentyhq/twenty/assets/57673080/eef3b743-1b28-43a5-8c1c-bd944a4915c7">
Dark
<img width="228" alt="Screenshot 2024-06-19 at 12 39 29 PM"
src="https://github.com/twentyhq/twenty/assets/57673080/5bf10e51-5a07-4d55-99f1-734517b22781">
---
 .../src/modules/ui/field/input/components/PhoneInput.tsx        | 2 +-
 .../phone/components/PhoneCountryPickerDropdownButton.tsx       | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/twenty-front/src/modules/ui/field/input/components/PhoneInput.tsx b/packages/twenty-front/src/modules/ui/field/input/components/PhoneInput.tsx
index 2b8a406c8..7094123dd 100644
--- a/packages/twenty-front/src/modules/ui/field/input/components/PhoneInput.tsx
+++ b/packages/twenty-front/src/modules/ui/field/input/components/PhoneInput.tsx
@@ -28,7 +28,7 @@ const StyledCustomPhoneInput = styled(ReactPhoneNumberInput)`
   padding: 0;
 
   .PhoneInputInput {
-    background: ${({ theme }) => theme.background.transparent.secondary};
+    background: none;
     border: none;
     color: ${({ theme }) => theme.font.color.primary};
 
diff --git a/packages/twenty-front/src/modules/ui/input/components/internal/phone/components/PhoneCountryPickerDropdownButton.tsx b/packages/twenty-front/src/modules/ui/input/components/internal/phone/components/PhoneCountryPickerDropdownButton.tsx
index df439a486..5932bccab 100644
--- a/packages/twenty-front/src/modules/ui/input/components/internal/phone/components/PhoneCountryPickerDropdownButton.tsx
+++ b/packages/twenty-front/src/modules/ui/input/components/internal/phone/components/PhoneCountryPickerDropdownButton.tsx
@@ -21,7 +21,7 @@ type StyledDropdownButtonProps = {
 
 export const StyledDropdownButtonContainer = styled.div<StyledDropdownButtonProps>`
   align-items: center;
-  background: ${({ theme }) => theme.background.primary};
+  background: none;
   border-radius: ${({ theme }) => theme.border.radius.xs} 0 0
     ${({ theme }) => theme.border.radius.xs};
   color: ${({ color }) => color ?? 'none'};