From 10fa6e1a6f91c115ecabc93d0de98ef0f969342d Mon Sep 17 00:00:00 2001
From: Thomas Trompette <thomas.trompette@sfr.fr>
Date: Wed, 9 Oct 2024 16:20:24 +0200
Subject: [PATCH] Add margin bottom to all navigation drawer items (#7544)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<img width="259" alt="Capture d’écran 2024-10-09 à 15 43 39"
src="https://github.com/user-attachments/assets/4ddf2ca6-73a6-4d18-9ec6-83b30d66514f">
<img width="259" alt="Capture d’écran 2024-10-09 à 15 43 49"
src="https://github.com/user-attachments/assets/a2c82fba-954a-4104-9a83-427d11644567">
---
 .../SettingsNavigationDrawerItems.tsx         | 20 ++++++++-----------
 .../components/NavigationDrawerSection.tsx    |  1 +
 2 files changed, 9 insertions(+), 12 deletions(-)

diff --git a/packages/twenty-front/src/modules/settings/components/SettingsNavigationDrawerItems.tsx b/packages/twenty-front/src/modules/settings/components/SettingsNavigationDrawerItems.tsx
index b41eb757e..e84a7d273 100644
--- a/packages/twenty-front/src/modules/settings/components/SettingsNavigationDrawerItems.tsx
+++ b/packages/twenty-front/src/modules/settings/components/SettingsNavigationDrawerItems.tsx
@@ -47,10 +47,6 @@ type SettingsNavigationItem = {
   indentationLevel?: NavigationDrawerItemIndentationLevel;
 };
 
-const StyledNavigationDrawerSection = styled(NavigationDrawerSection)`
-  margin-bottom: ${({ theme }) => theme.spacing(3)};
-`;
-
 const StyledIconContainer = styled.div`
   border-right: 1px solid ${MAIN_COLORS.yellow};
   position: absolute;
@@ -121,7 +117,7 @@ export const SettingsNavigationDrawerItems = () => {
 
   return (
     <>
-      <StyledNavigationDrawerSection>
+      <NavigationDrawerSection>
         <NavigationDrawerSectionTitle label="User" />
         <SettingsNavigationDrawerItem
           label="Profile"
@@ -154,8 +150,8 @@ export const SettingsNavigationDrawerItems = () => {
             />
           ))}
         </NavigationDrawerItemGroup>
-      </StyledNavigationDrawerSection>
-      <StyledNavigationDrawerSection>
+      </NavigationDrawerSection>
+      <NavigationDrawerSection>
         <NavigationDrawerSectionTitle label="Workspace" />
         <SettingsNavigationDrawerItem
           label="General"
@@ -192,7 +188,7 @@ export const SettingsNavigationDrawerItems = () => {
             Icon={IconCode}
           />
         )}
-      </StyledNavigationDrawerSection>
+      </NavigationDrawerSection>
       <AnimatePresence>
         {isAdvancedModeEnabled && (
           <motion.div
@@ -206,7 +202,7 @@ export const SettingsNavigationDrawerItems = () => {
               <StyledIconContainer>
                 <StyledIconTool size={12} color={MAIN_COLORS.yellow} />
               </StyledIconContainer>
-              <StyledNavigationDrawerSection>
+              <NavigationDrawerSection>
                 <NavigationDrawerSectionTitle label="Developers" />
                 <SettingsNavigationDrawerItem
                   label="API & Webhooks"
@@ -220,12 +216,12 @@ export const SettingsNavigationDrawerItems = () => {
                     Icon={IconFunction}
                   />
                 )}
-              </StyledNavigationDrawerSection>
+              </NavigationDrawerSection>
             </StyledDeveloperSection>
           </motion.div>
         )}
       </AnimatePresence>
-      <StyledNavigationDrawerSection>
+      <NavigationDrawerSection>
         <NavigationDrawerSectionTitle label="Other" />
         <SettingsNavigationDrawerItem
           label="Releases"
@@ -237,7 +233,7 @@ export const SettingsNavigationDrawerItems = () => {
           onClick={signOut}
           Icon={IconDoorEnter}
         />
-      </StyledNavigationDrawerSection>
+      </NavigationDrawerSection>
     </>
   );
 };
diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerSection.tsx b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerSection.tsx
index c1fd93847..2ba985033 100644
--- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerSection.tsx
+++ b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerSection.tsx
@@ -5,6 +5,7 @@ const StyledSection = styled.div`
   flex-direction: column;
   gap: ${({ theme }) => theme.betweenSiblingsGap};
   width: 100%;
+  margin-bottom: ${({ theme }) => theme.spacing(3)};
 `;
 
 export { StyledSection as NavigationDrawerSection };