From 8462985c0dceab7005b506f73e13e6e3cde331c3 Mon Sep 17 00:00:00 2001 From: Joshua Zacek Date: Wed, 19 Jun 2024 12:42:25 +0100 Subject: [PATCH] Fixed country selector button background in phone number input Country selector button for Phone input is now transparent like the rest of the phone input. Removed 2nd layer of transparent background being applied on the phone input text. --- .../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 2b8a406c8765..7094123dd18b 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 df439a4862b1..5932bccabcb5 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` 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'};