From 4db0d0f8c1315ebbf92194a9d1efd763bc48ea14 Mon Sep 17 00:00:00 2001 From: Hitarth Sheth <133380930+Hitarthsheth07@users.noreply.github.com> Date: Fri, 15 Nov 2024 10:03:48 -0500 Subject: [PATCH] Improve phone input UI (#8266) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit [FIX] #8251 Changes made as suggested by @Bonapara. ![image](https://github.com/user-attachments/assets/4ba6db50-f122-4f66-9361-8a0a0da0b6a0) ![image](https://github.com/user-attachments/assets/f0f1e1f4-d354-4461-9929-cd171d95835e) ![image](https://github.com/user-attachments/assets/b6b9fdef-d6fa-4e4b-aa8b-c8c3ef8b8c57) ![image](https://github.com/user-attachments/assets/7e68bf25-aff9-428f-a084-0b0631eeecef) For the `The country code should be Tertiary instead of Primary ` task, the library "react-phone-number-input" doesn't provide any out of the box functionality to style the country code. If the feature **needs** to be implemented here are the possible solution/workarounds: 1. Finding a more customizable library that allows to change the style of the country code OR 2. Implement custom country selection (😰...) OR 3. The lib allows a custom input element and a provides a function (onCountryChange) that triggers whenever the country changes (a country can be changed in two ways- 1. When the user deliberately chooses it from dropdown OR 2. Changes the code in the input) We'll have to get the length of the country code and then style the first X digits in the custom input field... ![image](https://github.com/user-attachments/assets/21b09c4d-fb5b-4efe-8204-aea4c9040587) ![image](https://github.com/user-attachments/assets/007c2791-a640-4bc9-b852-0f9b597679f1) Let me know if someone has a better approach. --------- Co-authored-by: Thomas des Francs Co-authored-by: Lucas Bordeau --- .../input/components/PhonesFieldInput.tsx | 1 + .../PhoneCountryPickerDropdownButton.tsx | 30 ++++++++++++------- .../dropdown/components/DropdownMenuInput.tsx | 3 +- .../button/components/LightIconButton.tsx | 2 +- 4 files changed, 23 insertions(+), 13 deletions(-) diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/PhonesFieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/PhonesFieldInput.tsx index 54fb7ab8d..97154d93e 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/PhonesFieldInput.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/PhonesFieldInput.tsx @@ -22,6 +22,7 @@ const StyledCustomPhoneInput = styled(ReactPhoneNumberInput)` background: none; border: none; color: ${({ theme }) => theme.font.color.primary}; + margin-left: ${({ theme }) => theme.spacing(2)}; &::placeholder, &::-webkit-input-placeholder { 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 614758963..2a550c6d9 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 @@ -1,12 +1,11 @@ -import { useTheme } from '@emotion/react'; -import styled from '@emotion/styled'; -import { useEffect, useState } from 'react'; -import { IconChevronDown, IconWorld } from 'twenty-ui'; - import { useCountries } from '@/ui/input/components/internal/hooks/useCountries'; import { Country } from '@/ui/input/components/internal/types/Country'; import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown'; import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown'; +import { useTheme } from '@emotion/react'; +import styled from '@emotion/styled'; +import { useEffect, useState } from 'react'; +import { IconChevronDown, IconWorld } from 'twenty-ui'; import { isDefined } from '~/utils/isDefined'; import { CountryPickerHotkeyScope } from '../types/CountryPickerHotkeyScope'; @@ -31,9 +30,7 @@ const StyledDropdownButtonContainer = styled.div` height: 32px; padding-left: ${({ theme }) => theme.spacing(2)}; - padding-right: ${({ theme }) => theme.spacing(2)}; - - padding-right: ${({ theme }) => theme.spacing(2)}; + padding-right: ${({ theme }) => theme.spacing(1)}; user-select: none; border-right: 1px solid ${({ theme }) => theme.border.color.light}; @@ -47,13 +44,24 @@ const StyledIconContainer = styled.div` align-items: center; color: ${({ theme }) => theme.font.color.tertiary}; display: flex; - gap: ${({ theme }) => theme.spacing(1)}; + gap: ${({ theme }) => theme.spacing(0.5)}; justify-content: center; svg { align-items: center; display: flex; height: 12px; + width: 16px; + justify-content: center; + } +`; + +const StyledCheveronIconContainer = styled.div` + svg { + align-items: center; + display: flex; + height: 14px; + width: 14px; justify-content: center; } `; @@ -95,7 +103,9 @@ export const PhoneCountryPickerDropdownButton = ({ {selectedCountry ? : } - + + + } diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuInput.tsx b/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuInput.tsx index 034fc4ec0..98b56e44d 100644 --- a/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuInput.tsx +++ b/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuInput.tsx @@ -31,14 +31,13 @@ const StyledInput = styled.input<{ const StyledInputContainer = styled.div` box-sizing: border-box; - padding: ${({ theme }) => theme.spacing(1)}; position: relative; width: 100%; `; const StyledRightContainer = styled.div` position: absolute; - right: ${({ theme }) => theme.spacing(2)}; + right: ${({ theme }) => theme.spacing(1)}; top: 50%; transform: translateY(-50%); `; diff --git a/packages/twenty-ui/src/input/button/components/LightIconButton.tsx b/packages/twenty-ui/src/input/button/components/LightIconButton.tsx index 0f5c53c80..915ae2b2d 100644 --- a/packages/twenty-ui/src/input/button/components/LightIconButton.tsx +++ b/packages/twenty-ui/src/input/button/components/LightIconButton.tsx @@ -56,7 +56,7 @@ const StyledButton = styled.button< gap: ${({ theme }) => theme.spacing(1)}; height: ${({ size }) => (size === 'small' ? '24px' : '32px')}; justify-content: center; - padding: 0; + padding: ${({ theme }) => theme.spacing(1)}; transition: background 0.1s ease; white-space: nowrap;