feat: MenuItem disabled color (#9923)

Fix #9874

packages/twenty-ui/src/navigation/menu-item/components/MenuItem.tsx

@@ -79,6 +79,7 @@ export const MenuItem = ({
           LeftIcon={LeftIcon ?? undefined}
           text={text}
           contextualText={contextualText}
+          disabled={disabled}
         />
       </StyledMenuItemLeftContent>
       <div className="hoverable-buttons">
@@ -89,7 +90,7 @@ export const MenuItem = ({
       {RightIcon && (
         <RightIcon size={theme.icon.size.md} stroke={theme.icon.stroke.sm} />
       )}
-      {hasSubMenu && (
+      {hasSubMenu && !disabled && (
         <IconChevronRight
           size={theme.icon.size.sm}
           color={theme.font.color.tertiary}

packages/twenty-ui/src/navigation/menu-item/components/MenuItemDraggable.tsx

@@ -51,7 +51,7 @@ export const MenuItemDraggable = ({
       <MenuItemLeftContent
         LeftIcon={LeftIcon}
         text={text}
-        isDisabled={isDragDisabled}
+        disabled={isDragDisabled}
         showGrip={showGrip}
       />
       {showIconButtons && (

packages/twenty-ui/src/navigation/menu-item/internals/components/MenuItemLeftContent.tsx

@@ -19,7 +19,7 @@ const StyledMainText = styled.div`
 `;
 
 const StyledContextualText = styled.div`
-  color: ${({ theme }) => theme.color.gray35};
+  color: ${({ theme }) => theme.font.color.light};
   font-family: inherit;
 
   font-size: inherit;
@@ -40,7 +40,7 @@ type MenuItemLeftContentProps = {
   className?: string;
   LeftIcon: IconComponent | null | undefined;
   showGrip?: boolean;
-  isDisabled?: boolean;
+  disabled?: boolean;
   text: ReactNode;
   contextualText?: ReactNode;
 };
@@ -51,7 +51,7 @@ export const MenuItemLeftContent = ({
   text,
   contextualText,
   showGrip = false,
-  isDisabled = false,
+  disabled = false,
 }: MenuItemLeftContentProps) => {
   const theme = useTheme();
 
@@ -63,7 +63,7 @@ export const MenuItemLeftContent = ({
             size={theme.icon.size.md}
             stroke={theme.icon.stroke.sm}
             color={
-              isDisabled ? theme.font.color.extraLight : theme.font.color.light
+              disabled ? theme.font.color.extraLight : theme.font.color.light
             }
           />
         </StyledDraggableItem>

packages/twenty-ui/src/navigation/menu-item/internals/components/StyledMenuItemBase.tsx

@@ -43,7 +43,11 @@ export const StyledMenuItemBase = styled.div<MenuItemBaseProps>`
     (disabled || isHoverBackgroundDisabled) ?? HOVER_BACKGROUND};
 
   ${({ theme, accent, disabled }) => {
-    const isDisabled = !isUndefined(disabled) && disabled !== false;
+    if (!isUndefined(disabled) && disabled !== false) {
+      return css`
+        color: ${theme.font.color.tertiary};
+      `;
+    }
 
     switch (accent) {
       case 'danger': {
@@ -52,20 +56,17 @@ export const StyledMenuItemBase = styled.div<MenuItemBaseProps>`
           &:hover {
             background: ${theme.background.transparent.danger};
           }
-          ${isDisabled && `opacity: 0.4;`}
         `;
       }
       case 'placeholder': {
         return css`
           color: ${theme.font.color.tertiary};
-          ${isDisabled && `opacity: 0.4;`}
         `;
       }
       case 'default':
       default: {
         return css`
           color: ${theme.font.color.secondary};
-          ${isDisabled && `opacity: 0.4;`}
         `;
       }
     }