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:
khuddite 2024-11-06 08:08:29 -05:00 committed by GitHub
parent 18d04de676
commit 5a293b8d60
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -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};