mirror of
https://github.com/twentyhq/twenty.git
synced 2024-12-23 12:02:10 +03:00
Update menu title font size based on whether or not it's clickable (#8354)
Fixes #8350 1. Summary https://www.figma.com/design/xt8O9mFeLl46C5InWwoMrN/Twenty?node-id=36424-125120&node-type=instance&t=psxuagFLo1Cu26Vz-0 Based on Figma, the menu header should have `base/medium` instead of `small/medium` when it's not clickable or dropdown. However, for dropdowns, we should keep it as `small/medium`. Menu items should stay as `base/regular`. 2. Solution Utilized `onClick` prop to decide the font size of the menu header. That way, Dropdowns stay as `base/small` while non-clickable headers are updated to `base/medium` 3. Screenshots ***please check out font size and weight for each case*** header: ![CleanShot 2024-11-05 at 17 45 23](https://github.com/user-attachments/assets/29bd6737-7470-452b-8483-a3adc9cd4db7) menu item: ![CleanShot 2024-11-05 at 17 46 46](https://github.com/user-attachments/assets/4664156a-ad81-4437-ba71-51f88813dd88) dropdown: ![CleanShot 2024-11-05 at 17 47 38](https://github.com/user-attachments/assets/c109f4cc-3a16-4c8a-9f4b-861138cc825a)
This commit is contained in:
parent
18d04de676
commit
5a293b8d60
@ -8,7 +8,8 @@ const StyledHeader = styled.li`
|
||||
color: ${({ theme }) => theme.font.color.primary};
|
||||
cursor: ${({ onClick }) => (onClick ? 'pointer' : 'default')};
|
||||
display: flex;
|
||||
font-size: ${({ theme }) => theme.font.size.sm};
|
||||
font-size: ${({ theme, onClick }) =>
|
||||
onClick ? theme.font.size.sm : theme.font.size.md};
|
||||
font-weight: ${({ theme }) => theme.font.weight.medium};
|
||||
border-top-left-radius: ${({ theme }) => theme.border.radius.sm};
|
||||
border-top-right-radius: ${({ theme }) => theme.border.radius.sm};
|
||||
|
Loading…
Reference in New Issue
Block a user