Improve phone input UI (#8266)

[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 <tdesfrancs@gmail.com>
Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>

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 {

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<StyledDropdownButtonProps>`
   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 = ({
         <StyledDropdownButtonContainer isUnfolded={isDropdownOpen}>
           <StyledIconContainer>
             {selectedCountry ? <selectedCountry.Flag /> : <IconWorld />}
-            <IconChevronDown size={theme.icon.size.sm} />
+            <StyledCheveronIconContainer>
+              <IconChevronDown size={theme.icon.size.sm} />
+            </StyledCheveronIconContainer>
           </StyledIconContainer>
         </StyledDropdownButtonContainer>
       }

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%);
 `;

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;