From 8754b7107d8fc59383a88ff195af293cb0da9dd9 Mon Sep 17 00:00:00 2001
From: shubham yadav <126192924+yadavshubham01@users.noreply.github.com>
Date: Wed, 29 Jan 2025 00:20:59 +0530
Subject: [PATCH] Fix Icon Padding and Size in Select Item (#9888)

This pull request addresses issue
[#9458](https://github.com/twentyhq/twenty/issues/9458) by making the
following changes:

Increase the icon size from 14x14px to 16x16px
Add 8px padding to the right side of the icon
Ensure the icon is not cropped and displays with rounded angles

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
---
 .../menu-item/components/MenuItemSelectAvatar.tsx        | 5 +++--
 .../menu-item/components/MenuItemSelectColor.tsx         | 5 +++--
 .../menu-item/components/MenuItemSelectTag.tsx           | 9 ++++++---
 .../internals/components/StyledMenuItemBase.tsx          | 7 +++++++
 4 files changed, 19 insertions(+), 7 deletions(-)

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 = ({
           <OverflowingTextWithTooltip text={text} />
         </StyledMenuItemLabel>
       </StyledMenuItemLeftContent>
-      {selected && <IconCheck size={theme.icon.size.md} />}
+      {selected && <StyledMenuItemIconCheck size={theme.icon.size.md} />}
     </StyledMenuItemSelect>
   );
 };
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 = ({
         <ColorSample colorName={color} variant={variant} />
         <StyledMenuItemLabel>{colorLabels[color]}</StyledMenuItemLabel>
       </StyledMenuItemLeftContent>
-      {selected && <IconCheck size={theme.icon.size.md} />}
+      {selected && <StyledMenuItemIconCheck size={theme.icon.size.md} />}
     </StyledMenuItemSelect>
   );
 };
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}
         />
       </StyledMenuItemLeftContent>
-      {selected && <IconCheck size={theme.icon.size.sm} />}
+      {selected && <StyledMenuItemIconCheck size={theme.icon.size.md} />}
     </StyledMenuItemSelect>
   );
 };
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)};
+`;