fix: StyledMenuItemBase remove spacing when no icon (#9573)

twentyhq · Jan 13, 2025 · 61c5acb · 61c5acb
1 parent 002cbd3
commit 61c5acb
Show file tree

Hide file tree

Showing 6 changed files with 6 additions and 12 deletions.
diff --git a/packages/twenty-ui/src/navigation/menu-item/components/MenuItemCommand.tsx b/packages/twenty-ui/src/navigation/menu-item/components/MenuItemCommand.tsx
@@ -98,9 +98,7 @@ export const MenuItemCommand = ({
             <LeftIcon size={theme.icon.size.sm} />
           </StyledBigIconContainer>
         )}
-        <StyledMenuItemLabelText hasLeftIcon={!!LeftIcon}>
-          {text}
-        </StyledMenuItemLabelText>
+        <StyledMenuItemLabelText>{text}</StyledMenuItemLabelText>
       </StyledMenuItemLeftContent>
       {!isMobile && (
         <MenuItemCommandHotKeys

diff --git a/packages/twenty-ui/src/navigation/menu-item/components/MenuItemMultiSelectAvatar.tsx b/packages/twenty-ui/src/navigation/menu-item/components/MenuItemMultiSelectAvatar.tsx
@@ -48,7 +48,7 @@ export const MenuItemMultiSelectAvatar = ({
         <Checkbox checked={selected} />
         <StyledMenuItemLeftContent>
           {avatar}
-          <StyledMenuItemLabel hasLeftIcon={!!avatar}>
+          <StyledMenuItemLabel>
             <OverflowingTextWithTooltip text={text} />
           </StyledMenuItemLabel>
         </StyledMenuItemLeftContent>

diff --git a/packages/twenty-ui/src/navigation/menu-item/components/MenuItemSelectAvatar.tsx b/packages/twenty-ui/src/navigation/menu-item/components/MenuItemSelectAvatar.tsx
@@ -46,7 +46,7 @@ export const MenuItemSelectAvatar = ({
     >
       <StyledMenuItemLeftContent>
         {avatar}
-        <StyledMenuItemLabel hasLeftIcon={!!avatar}>
+        <StyledMenuItemLabel>
           <OverflowingTextWithTooltip text={text} />
         </StyledMenuItemLabel>
       </StyledMenuItemLeftContent>

diff --git a/packages/twenty-ui/src/navigation/menu-item/components/MenuItemSelectColor.tsx b/packages/twenty-ui/src/navigation/menu-item/components/MenuItemSelectColor.tsx
@@ -53,9 +53,7 @@ export const MenuItemSelectColor = ({
     >
       <StyledMenuItemLeftContent>
         <ColorSample colorName={color} variant={variant} />
-        <StyledMenuItemLabel hasLeftIcon={true}>
-          {colorLabels[color]}
-        </StyledMenuItemLabel>
+        <StyledMenuItemLabel>{colorLabels[color]}</StyledMenuItemLabel>
       </StyledMenuItemLeftContent>
       {selected && <IconCheck size={theme.icon.size.md} />}
     </StyledMenuItemSelect>

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
@@ -71,7 +71,7 @@ export const MenuItemLeftContent = ({
       {LeftIcon && (
         <LeftIcon size={theme.icon.size.md} stroke={theme.icon.stroke.sm} />
       )}
-      <StyledMenuItemLabel hasLeftIcon={!!LeftIcon}>
+      <StyledMenuItemLabel>
         {isString(text) ? (
           <StyledMainText>
             <OverflowingTextWithTooltip text={text} />

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
@@ -68,15 +68,13 @@ export const StyledMenuItemBase = styled.div<MenuItemBaseProps>`
   width: calc(100% - 2 * var(--horizontal-padding));
 `;
 
-export const StyledMenuItemLabel = styled.div<{ hasLeftIcon: boolean }>`
+export const StyledMenuItemLabel = styled.div`
   display: flex;
   flex-direction: row;
   font-size: ${({ theme }) => theme.font.size.md};
   font-weight: ${({ theme }) => theme.font.weight.regular};
 
   overflow: hidden;
-  padding-left: ${({ theme, hasLeftIcon }) =>
-    hasLeftIcon ? '' : theme.spacing(1)};
 
   white-space: nowrap;
 `;