From d59c989ecd9ffd780ea1c175231a984f23ea7a6f Mon Sep 17 00:00:00 2001
From: Guillim <guillim@users.noreply.github.com>
Date: Wed, 19 Mar 2025 14:16:15 +0100
Subject: [PATCH] Align navigation icons (#10983)

Fixes https://github.com/twentyhq/twenty/issues/10550

FYI : I took the same width calculation than the other navigation items.
---
 .../components/NavigationDrawerCollapseButton.tsx             | 2 +-
 .../navigation-drawer/components/NavigationDrawerHeader.tsx   | 4 ++++
 .../navigation-drawer/components/NavigationDrawerItem.tsx     | 1 +
 3 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerCollapseButton.tsx b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerCollapseButton.tsx
index 5945bc7ba..dfe4c8a0a 100644
--- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerCollapseButton.tsx
+++ b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerCollapseButton.tsx
@@ -46,7 +46,7 @@ export const NavigationDrawerCollapseButton = ({
             : IconLayoutSidebarRightCollapse
         }
         accent="tertiary"
-        size="small"
+        size="medium"
       />
     </StyledCollapseButton>
   );
diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerHeader.tsx b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerHeader.tsx
index aed5fe5e3..21ceab9de 100644
--- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerHeader.tsx
+++ b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerHeader.tsx
@@ -12,14 +12,18 @@ const StyledContainer = styled.div`
   display: flex;
   height: ${({ theme }) => theme.spacing(8)};
   user-select: none;
+  padding-right: ${({ theme }) => theme.spacing(2)};
 `;
 
 const StyledNavigationDrawerCollapseButton = styled(
   NavigationDrawerCollapseButton,
 )<{ show?: boolean }>`
+  height: ${({ theme }) => theme.spacing(4)};
   margin-left: auto;
   opacity: ${({ show }) => (show ? 1 : 0)};
+  padding-right: ${({ theme }) => theme.spacing(1)};
   transition: opacity ${({ theme }) => theme.animation.duration.normal}s;
+  width: ${({ theme }) => theme.spacing(4)};
 `;
 
 type NavigationDrawerHeaderProps = {
diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx
index 4c9104807..aaf9b9d84 100644
--- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx
+++ b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx
@@ -169,6 +169,7 @@ const StyledKeyBoardShortcut = styled.span`
   height: ${({ theme }) => theme.spacing(4)};
   justify-content: center;
   width: ${({ theme }) => theme.spacing(4)};
+  box-sizing: border-box;
 
   border-radius: ${({ theme }) => theme.border.radius.sm};
   border: 1px solid ${({ theme }) => theme.border.color.strong};