diff --git a/packages/twenty-ui/src/navigation/menu-item/components/MenuItemSelectAvatar.tsx b/packages/twenty-ui/src/navigation/menu-item/components/MenuItemSelectAvatar.tsx index 8f143c044..c44159c08 100644 --- a/packages/twenty-ui/src/navigation/menu-item/components/MenuItemSelectAvatar.tsx +++ b/packages/twenty-ui/src/navigation/menu-item/components/MenuItemSelectAvatar.tsx @@ -2,11 +2,12 @@ import { useTheme } from '@emotion/react'; import { ReactNode } from 'react'; import { + StyledMenuItemIconCheck, StyledMenuItemLabel, StyledMenuItemLeftContent, } from '../internals/components/StyledMenuItemBase'; -import { IconCheck, OverflowingTextWithTooltip } from '@ui/display'; +import { OverflowingTextWithTooltip } from '@ui/display'; import { StyledMenuItemSelect } from './MenuItemSelect'; type MenuItemSelectAvatarProps = { @@ -50,7 +51,7 @@ export const MenuItemSelectAvatar = ({ - {selected && } + {selected && } ); }; diff --git a/packages/twenty-ui/src/navigation/menu-item/components/MenuItemSelectColor.tsx b/packages/twenty-ui/src/navigation/menu-item/components/MenuItemSelectColor.tsx index b3c320d31..7f00f75bc 100644 --- a/packages/twenty-ui/src/navigation/menu-item/components/MenuItemSelectColor.tsx +++ b/packages/twenty-ui/src/navigation/menu-item/components/MenuItemSelectColor.tsx @@ -1,11 +1,12 @@ import { useTheme } from '@emotion/react'; import { + StyledMenuItemIconCheck, StyledMenuItemLabel, StyledMenuItemLeftContent, } from '../internals/components/StyledMenuItemBase'; -import { ColorSample, ColorSampleVariant, IconCheck } from '@ui/display'; +import { ColorSample, ColorSampleVariant } from '@ui/display'; import { ThemeColor } from '@ui/theme'; import { StyledMenuItemSelect } from './MenuItemSelect'; @@ -55,7 +56,7 @@ export const MenuItemSelectColor = ({ {colorLabels[color]} - {selected && } + {selected && } ); }; diff --git a/packages/twenty-ui/src/navigation/menu-item/components/MenuItemSelectTag.tsx b/packages/twenty-ui/src/navigation/menu-item/components/MenuItemSelectTag.tsx index 1217f1199..ee2d1c37e 100644 --- a/packages/twenty-ui/src/navigation/menu-item/components/MenuItemSelectTag.tsx +++ b/packages/twenty-ui/src/navigation/menu-item/components/MenuItemSelectTag.tsx @@ -1,8 +1,11 @@ import { useTheme } from '@emotion/react'; -import { StyledMenuItemLeftContent } from '../internals/components/StyledMenuItemBase'; +import { + StyledMenuItemIconCheck, + StyledMenuItemLeftContent, +} from '../internals/components/StyledMenuItemBase'; -import { IconCheck, IconComponent, Tag } from '@ui/display'; +import { IconComponent, Tag } from '@ui/display'; import { ThemeColor } from '@ui/theme'; import { StyledMenuItemSelect } from './MenuItemSelect'; @@ -43,7 +46,7 @@ export const MenuItemSelectTag = ({ Icon={LeftIcon ?? undefined} /> - {selected && } + {selected && } ); }; 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 97f489f41..3012a0d17 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 @@ -2,6 +2,8 @@ import { css } from '@emotion/react'; import styled from '@emotion/styled'; import { isUndefined } from '@sniptt/guards'; + +import { IconCheck } from '@ui/display'; import { HOVER_BACKGROUND } from '@ui/theme'; import { MenuItemAccent } from '../../types/MenuItemAccent'; @@ -159,3 +161,8 @@ export const StyledHoverableMenuItemBase = styled(StyledMenuItemBase)<{ } }}; `; + +export const StyledMenuItemIconCheck = styled(IconCheck)` + flex-shrink: 0; + margin-right: ${({ theme }) => theme.spacing(1)}; +`;