From 61c5acb982aaffc096db0c9ecd229b35987738c5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=A9my=20M?= <jeremy.magrin@gmail.com>
Date: Mon, 13 Jan 2025 11:42:39 +0100
Subject: [PATCH] fix: StyledMenuItemBase remove spacing when no icon (#9573)

---
 .../src/navigation/menu-item/components/MenuItemCommand.tsx   | 4 +---
 .../menu-item/components/MenuItemMultiSelectAvatar.tsx        | 2 +-
 .../navigation/menu-item/components/MenuItemSelectAvatar.tsx  | 2 +-
 .../navigation/menu-item/components/MenuItemSelectColor.tsx   | 4 +---
 .../menu-item/internals/components/MenuItemLeftContent.tsx    | 2 +-
 .../menu-item/internals/components/StyledMenuItemBase.tsx     | 4 +---
 6 files changed, 6 insertions(+), 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
index 410965ce9..329909517 100644
--- 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
index d96433698..6674fd9c6 100644
--- 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
index cbc748e1f..8f143c044 100644
--- 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
index 60f2f81ff..b3c320d31 100644
--- 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
index 80c45df70..a67d60073 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
@@ -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
index b713e5b72..143fb1132 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
@@ -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;
 `;