admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Fix dropdown input design (#9439)

Browse Source 
### Context
Update to match Figma design for dropdown input - [standard
input](https://www.figma.com/design/xt8O9mFeLl46C5InWwoMrN/Twenty?node-id=28562-75034&t=4FdGFZfPLtvNq8La-4)
/ [custom phone
input](https://www.figma.com/design/xt8O9mFeLl46C5InWwoMrN/Twenty?node-id=28562-74922&t=YIxM3jgx8kC9qiyQ-4)

### Preview
<img width="200" alt="Screenshot 2025-01-07 at 16 07 31"
src="https://github.com/user-attachments/assets/d61eb446-aa62-43e5-b3a4-95efc8e3997e"
/>

<img width="200" alt="Screenshot 2025-01-07 at 16 06 12"
src="https://github.com/user-attachments/assets/8e80658c-8e33-408c-96b7-733ca72de8cb"
/>

<img width="200" alt="Screenshot 2025-01-07 at 16 06 22"
src="https://github.com/user-attachments/assets/9c2b204d-aa97-4fb1-a884-54d64864c900"
/>

<img width="200" alt="Screenshot 2025-01-07 at 16 06 36"
src="https://github.com/user-attachments/assets/a47b0e49-3c25-4738-b6a6-c3f0af067bc7"
/>


closes #8904

---------

Co-authored-by: etiennejouan <jouan.etienne@gmail.com>
This commit is contained in:
Etienne
2025-01-08 16:16:46 +01:00
committed by GitHub
parent a1664fbc7b
commit 7036a8ccc3
7 changed files with 192 additions and 153 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/twenty-front/src/modules/ui/input/components/internal/currency/components/CurrencyPickerDropdownButton.tsx
View File

@ -21,7 +21,7 @@ const StyledDropdownButtonContainer = styled.div`
padding-right: ${({ theme }) => theme.spacing(2)};
user-select: none;
&:hover {
filter: brightness(0.95);
background-color: ${({ theme }) => theme.background.transparent.light};
}
`;

6
packages/twenty-front/src/modules/ui/input/components/internal/phone/components/PhoneCountryPickerDropdownButton.tsx
View File

@ -27,16 +27,16 @@ const StyledDropdownButtonContainer = styled.div<StyledDropdownButtonProps>`
cursor: pointer;
display: flex;
height: 32px;
height: 30px;
padding-left: ${({ theme }) => theme.spacing(2)};
padding-right: ${({ theme }) => theme.spacing(1)};
user-select: none;
border-right: 1px solid ${({ theme }) => theme.border.color.light};
border-right: 1px solid ${({ theme }) => theme.border.color.medium};
&:hover {
filter: brightness(0.95);
background-color: ${({ theme }) => theme.background.transparent.light};
}
`;