Add update chevron (#5988)

Fixes #5986 1. Added right chevron to Fields Menu Item <img width="735" alt="Screenshot 2024-06-21 at 5 59 46 PM" src="https://github.com/twentyhq/twenty/assets/63531478/1515aba0-6732-424d-a0b3-5cc826a35b16"> 2. Changed color of Hidden fields menu item chevron and stroke of left chevron <img width="735" alt="Screenshot 2024-06-21 at 6 21 30 PM" src="https://github.com/twentyhq/twenty/assets/63531478/20952197-2f09-486c-a3bb-5b6c285a6996"> --------- Co-authored-by: Lucas Bordeau <[email protected]>
twentyhq · Jun 24, 2024 · 57bbd7c · 57bbd7c
1 parent 901ef65
commit 57bbd7c
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 3 deletions.
diff --git a/...dules/object-record/record-index/options/components/RecordIndexOptionsDropdownContent.tsx b/...dules/object-record/record-index/options/components/RecordIndexOptionsDropdownContent.tsx
@@ -132,6 +132,7 @@ export const RecordIndexOptionsDropdownContent = ({
             onClick={() => handleSelectMenu('fields')}
             LeftIcon={IconTag}
             text="Fields"
+            hasSubMenu
           />
           <MenuItem
             onClick={() => openRecordSpreadsheetImport()}

diff --git a/packages/twenty-front/src/modules/ui/input/button/components/LightIconButton.tsx b/packages/twenty-front/src/modules/ui/input/button/components/LightIconButton.tsx
@@ -105,7 +105,7 @@ export const LightIconButton = ({
       active={active}
       title={title}
     >
-      {Icon && <Icon size={theme.icon.size.sm} stroke={theme.icon.stroke.sm} />}
+      {Icon && <Icon size={theme.icon.size.sm} />}
     </StyledButton>
   );
 };
diff --git a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItem.tsx b/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItem.tsx
@@ -1,5 +1,6 @@
 import { FunctionComponent, MouseEvent, ReactElement, ReactNode } from 'react';
-import { IconComponent } from 'twenty-ui';
+import { useTheme } from '@emotion/react';
+import { IconChevronRight, IconComponent } from 'twenty-ui';
 
 import { LightIconButtonProps } from '@/ui/input/button/components/LightIconButton';
 import { LightIconButtonGroup } from '@/ui/input/button/components/LightIconButtonGroup';
@@ -30,6 +31,7 @@ export type MenuItemProps = {
   onMouseLeave?: (event: MouseEvent<HTMLDivElement>) => void;
   testId?: string;
   text: ReactNode;
+  hasSubMenu?: boolean;
 };
 
 export const MenuItem = ({
@@ -43,7 +45,9 @@ export const MenuItem = ({
   onMouseLeave,
   testId,
   text,
+  hasSubMenu = false,
 }: MenuItemProps) => {
+  const theme = useTheme();
   const showIconButtons = Array.isArray(iconButtons) && iconButtons.length > 0;
 
   const handleMenuItemClick = (event: MouseEvent<HTMLDivElement>) => {
@@ -72,6 +76,13 @@ export const MenuItem = ({
           <LightIconButtonGroup iconButtons={iconButtons} size="small" />
         )}
       </div>
+
+      {hasSubMenu && (
+        <IconChevronRight
+          size={theme.icon.size.sm}
+          color={theme.font.color.tertiary}
+        />
+      )}
     </StyledHoverableMenuItemBase>
   );
 };
diff --git a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemNavigate.tsx b/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemNavigate.tsx
@@ -27,7 +27,10 @@ export const MenuItemNavigate = ({
       <StyledMenuItemLeftContent>
         <MenuItemLeftContent LeftIcon={LeftIcon} text={text} />
       </StyledMenuItemLeftContent>
-      <IconChevronRight size={theme.icon.size.md} />
+      <IconChevronRight
+        size={theme.icon.size.sm}
+        color={theme.font.color.tertiary}
+      />
     </StyledMenuItemBase>
   );
 };