diff --git a/packages/twenty-ui/src/navigation/menu-item/components/MenuItem.tsx b/packages/twenty-ui/src/navigation/menu-item/components/MenuItem.tsx index b7ceaa2706d5..0f789680a3df 100644 --- a/packages/twenty-ui/src/navigation/menu-item/components/MenuItem.tsx +++ b/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} />
@@ -89,7 +90,7 @@ export const MenuItem = ({ {RightIcon && ( )} - {hasSubMenu && ( + {hasSubMenu && !disabled && ( {showIconButtons && ( diff --git a/packages/twenty-ui/src/navigation/menu-item/internals/components/MenuItemLeftContent.tsx b/packages/twenty-ui/src/navigation/menu-item/internals/components/MenuItemLeftContent.tsx index a67d60073a5b..6954ce80bce6 100644 --- a/packages/twenty-ui/src/navigation/menu-item/internals/components/MenuItemLeftContent.tsx +++ b/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 } /> diff --git a/packages/twenty-ui/src/navigation/menu-item/internals/components/StyledMenuItemBase.tsx b/packages/twenty-ui/src/navigation/menu-item/internals/components/StyledMenuItemBase.tsx index 3012a0d170a2..d67bb7af0dff 100644 --- a/packages/twenty-ui/src/navigation/menu-item/internals/components/StyledMenuItemBase.tsx +++ b/packages/twenty-ui/src/navigation/menu-item/internals/components/StyledMenuItemBase.tsx @@ -43,7 +43,11 @@ export const StyledMenuItemBase = styled.div` (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` &: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;`} `; } }