fix: improve settings menu spacing by moving logout into last section (#11202)

Issue: https://github.com/twentyhq/twenty/issues/11194

- Remove separate navigation drawer section for logout button
- Move logout button into the last section of settings menu
- Fix visual spacing between menu items

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

packages/twenty-front/src/modules/settings/components/SettingsNavigationDrawerItems.tsx

@@ -1,4 +1,3 @@
-import { useAuth } from '@/auth/hooks/useAuth';
 import { AdvancedSettingsWrapper } from '@/settings/components/AdvancedSettingsWrapper';
 import { SettingsNavigationDrawerItem } from '@/settings/components/SettingsNavigationDrawerItem';
 import {
@@ -6,7 +5,6 @@ import {
   SettingsNavigationSection,
   useSettingsNavigationItems,
 } from '@/settings/hooks/useSettingsNavigationItems';
-import { NavigationDrawerItem } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerItem';
 import { NavigationDrawerItemGroup } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerItemGroup';
 import { NavigationDrawerSection } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSection';
 import { NavigationDrawerSectionTitle } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSectionTitle';
@@ -15,7 +13,6 @@ import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
 import styled from '@emotion/styled';
 import { useLingui } from '@lingui/react/macro';
 import { matchPath, resolvePath, useLocation } from 'react-router-dom';
-import { IconDoorEnter } from 'twenty-ui';
 import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
 
 const StyledInnerContainer = styled.div`
@@ -23,7 +20,6 @@ const StyledInnerContainer = styled.div`
 `;
 
 export const SettingsNavigationDrawerItems = () => {
-  const { signOut } = useAuth();
   const { t } = useLingui();
 
   const settingsNavigationItems: SettingsNavigationSection[] =
@@ -129,13 +125,6 @@ export const SettingsNavigationDrawerItems = () => {
             </NavigationDrawerSection>
           );
         })}
-        <NavigationDrawerSection>
-          <NavigationDrawerItem
-            label={t`Logout`}
-            onClick={signOut}
-            Icon={IconDoorEnter}
-          />
-        </NavigationDrawerSection>
       </StyledInnerContainer>
     </ScrollWrapper>
   );

packages/twenty-front/src/modules/settings/hooks/useSettingsNavigationItems.tsx

@@ -6,6 +6,7 @@ import {
   IconColorSwatch,
   IconComponent,
   IconCurrencyDollar,
+  IconDoorEnter,
   IconFlask,
   IconFunction,
   IconHierarchy2,
@@ -22,6 +23,7 @@ import {
 
 import { SettingsPath } from '@/types/SettingsPath';
 
+import { useAuth } from '@/auth/hooks/useAuth';
 import { currentUserState } from '@/auth/states/currentUserState';
 import { billingState } from '@/client-config/states/billingState';
 import { labPublicFeatureFlagsState } from '@/client-config/states/labPublicFeatureFlagsState';
@@ -52,6 +54,7 @@ export type SettingsNavigationItem = {
 
 const useSettingsNavigationItems = (): SettingsNavigationSection[] => {
   const billing = useRecoilValue(billingState);
+  const { signOut } = useAuth();
 
   const isFunctionSettingsEnabled = false;
   const isBillingEnabled = billing?.isBillingEnabled ?? false;
@@ -197,6 +200,11 @@ const useSettingsNavigationItems = (): SettingsNavigationSection[] => {
           path: SettingsPath.Releases,
           Icon: IconRocket,
         },
+        {
+          label: t`Logout`,
+          onClick: signOut,
+          Icon: IconDoorEnter,
+        },
       ],
     },
   ];