From 5a293b8d6066212a394aef211cf7b48146dd8579 Mon Sep 17 00:00:00 2001
From: khuddite <khuddite@gmail.com>
Date: Wed, 6 Nov 2024 08:08:29 -0500
Subject: [PATCH] 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)
---
 .../ui/layout/dropdown/components/DropdownMenuHeader.tsx       | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuHeader.tsx b/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuHeader.tsx
index 6356bbdd4..78b192c79 100644
--- a/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuHeader.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuHeader.tsx
@@ -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};