From 57bbd7c129b3e843e121311b9691247e9d027684 Mon Sep 17 00:00:00 2001
From: Aakarshan Thapa <63531478+akarsanth@users.noreply.github.com>
Date: Mon, 24 Jun 2024 09:01:21 -0400
Subject: [PATCH] Add update chevron (#5988)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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 <bordeau.lucas@gmail.com>
---
 .../RecordIndexOptionsDropdownContent.tsx           |  1 +
 .../ui/input/button/components/LightIconButton.tsx  |  2 +-
 .../ui/navigation/menu-item/components/MenuItem.tsx | 13 ++++++++++++-
 .../menu-item/components/MenuItemNavigate.tsx       |  5 ++++-
 4 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/packages/twenty-front/src/modules/object-record/record-index/options/components/RecordIndexOptionsDropdownContent.tsx b/packages/twenty-front/src/modules/object-record/record-index/options/components/RecordIndexOptionsDropdownContent.tsx
index 73149fb6eb..c93c8bfdad 100644
--- a/packages/twenty-front/src/modules/object-record/record-index/options/components/RecordIndexOptionsDropdownContent.tsx
+++ b/packages/twenty-front/src/modules/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
index 5f03c700e0..868ed0c534 100644
--- 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
index 4e40759f97..a857128072 100644
--- 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
index 07f5ff1e03..dd847b3048 100644
--- 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>
   );
 };