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>

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>
   );
 };

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>
   );
 };

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>
   );
 };

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)};
+`;