Navigation Panel UI Sizing Changes (#5964)

## Fixes #5902 :
- [x] Navigation items' height should be risen to 28px.
> For clarity:
- [x] Also increased the height of NavigationDrawerSectionTitle to 28px
to match navigation item.
- [x] The gap between sections should be reduced to 12px
> Was already completed it seems.
- [x] The workspace switcher should be aligned with the navigation items

---------

Co-authored-by: Lucas Bordeau <[email protected]>

packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdownButton.tsx

@@ -33,10 +33,12 @@ const StyledContainer = styled.div`
   border: 1px solid transparent;
   display: flex;
   justify-content: space-between;
-  height: ${({ theme }) => theme.spacing(7)};
-  padding: 0 ${({ theme }) => theme.spacing(2)};
+  height: ${({ theme }) => theme.spacing(5)};
+  padding: calc(${({ theme }) => theme.spacing(1)} - 1px);
   width: 100%;
 
+  gap: ${({ theme }) => theme.spacing(1)};
+
   &:hover {
     background-color: ${({ theme }) => theme.background.transparent.lighter};
     border: 1px solid ${({ theme }) => theme.border.color.medium};
@@ -46,7 +48,6 @@ const StyledContainer = styled.div`
 const StyledLabel = styled.div`
   align-items: center;
   display: flex;
-  gap: ${({ theme }) => theme.spacing(2)};
 `;
 
 const StyledIconChevronDown = styled(IconChevronDown)<{ disabled?: boolean }>`

packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawer.tsx

@@ -53,7 +53,7 @@ const StyledContainer = styled.div<{ isSubMenu?: boolean }>`
 const StyledItemsContainer = styled.div`
   display: flex;
   flex-direction: column;
-  gap: ${({ theme }) => theme.spacing(8)};
+  gap: ${({ theme }) => theme.spacing(3)};
   margin-bottom: auto;
   overflow-y: auto;
 `;

packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerCollapseButton.tsx

@@ -14,7 +14,7 @@ const StyledCollapseButton = styled.div`
   color: ${({ theme }) => theme.font.color.light};
   cursor: pointer;
   display: flex;
-  height: ${({ theme }) => theme.spacing(6)};
+  height: ${({ theme }) => theme.spacing(5)};
   justify-content: center;
   user-select: none;
   width: ${({ theme }) => theme.spacing(6)};

packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerHeader.tsx

@@ -12,9 +12,7 @@ import { NavigationDrawerCollapseButton } from './NavigationDrawerCollapseButton
 const StyledContainer = styled.div`
   align-items: center;
   display: flex;
-  gap: ${({ theme }) => theme.spacing(2)};
-  height: ${({ theme }) => theme.spacing(6)};
-  padding: ${({ theme }) => theme.spacing(1)};
+  height: ${({ theme }) => theme.spacing(7)};
   user-select: none;
 `;
 

packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx

@@ -39,6 +39,7 @@ const StyledItem = styled('div', {
   align-items: center;
   background: ${(props) =>
     props.active ? props.theme.background.transparent.light : 'inherit'};
+  height: ${({ theme }) => theme.spacing(5)};
   border: none;
   border-radius: ${({ theme }) => theme.border.radius.sm};
   text-decoration: none;

packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerSectionTitle.tsx

@@ -16,7 +16,7 @@ const StyledTitle = styled.div<{ onClick?: () => void }>`
   display: flex;
   font-size: ${({ theme }) => theme.font.size.xs};
   font-weight: ${({ theme }) => theme.font.weight.semiBold};
-  height: ${({ theme }) => theme.spacing(4)};
+  height: ${({ theme }) => theme.spacing(5)};
   padding: ${({ theme }) => theme.spacing(1)};
 
   ${({ onClick, theme }) =>