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 54fb7ab8ded..97154d93e16 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 614758963e9..2a550c6d924 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 034fc4ec05f..98b56e44d6d 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 0f5c53c80d5..915ae2b2d90 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;