Advanced toggle alignment (#10844)

This PR address advanced toggle alignment, especially the left yellow
dot placement.
In other advanced settings navigation drawer, the dot appears -20px to
left, while this was not the case for advanced toggle's dot.
Matched the height and paddings to that of NavigationDrawerItem.

@Bonapara FYI

before:
<img width="399" alt="Screenshot 2025-03-13 at 15 49 21"
src="https://github.com/user-attachments/assets/6dd60b3a-1b2e-43a0-ad28-dc44437460ab"
/>

after:
<img width="401" alt="Screenshot 2025-03-13 at 15 47 43"
src="https://github.com/user-attachments/assets/86e51b07-e84a-413a-8a49-1820c165dc68"
/>

---------

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

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

@@ -4,26 +4,27 @@ import styled from '@emotion/styled';
 import { useRecoilValue } from 'recoil';
 import { AnimatedExpandableContainer, IconPoint, MAIN_COLORS } from 'twenty-ui';
 
+type DotPosition = 'top' | 'centered';
+
 const StyledAdvancedWrapper = styled.div`
   position: relative;
   width: 100%;
 `;
 
-const StyledIconContainer = styled.div<{ navigationDrawerItem: boolean }>`
+const StyledDotContainer = styled.div<{ dotPosition: DotPosition }>`
   display: flex;
   position: absolute;
+  height: 100%;
+  left: ${({ theme }) => theme.spacing(-5)};
 
-  ${({ navigationDrawerItem, theme }) => {
-    if (navigationDrawerItem) {
+  ${({ dotPosition }) => {
+    if (dotPosition === 'top') {
       return `
-        height: 100%;
-        left: ${theme.spacing(-5)};
-        align-items: center;
+        top: 0;
       `;
     }
     return `
-      left: ${theme.spacing(-4)};
-      top: ${theme.spacing(1)};
+      align-items: center;
     `;
   }}
 `;
@@ -38,36 +39,35 @@ const StyledIconPoint = styled(IconPoint)`
 
 type AdvancedSettingsWrapperProps = {
   children: React.ReactNode;
-  dimension?: 'width' | 'height';
-  hideIcon?: boolean;
-  navigationDrawerItem?: boolean;
+  animationDimension?: 'width' | 'height';
+  hideDot?: boolean;
+  dotPosition?: DotPosition;
 };
 
 export const AdvancedSettingsWrapper = ({
   children,
-  dimension = 'height',
-  hideIcon = false,
-  navigationDrawerItem = false,
+  hideDot = false,
+  dotPosition = 'centered',
 }: AdvancedSettingsWrapperProps) => {
   const isAdvancedModeEnabled = useRecoilValue(isAdvancedModeEnabledState);
 
   return (
     <AnimatedExpandableContainer
       isExpanded={isAdvancedModeEnabled}
-      dimension={dimension}
+      dimension="height"
       animationDurations={ADVANCED_SETTINGS_ANIMATION_DURATION}
       mode="scroll-height"
       containAnimation={false}
     >
       <StyledAdvancedWrapper>
-        {!hideIcon && (
-          <StyledIconContainer navigationDrawerItem={navigationDrawerItem}>
+        {!hideDot && (
+          <StyledDotContainer dotPosition={dotPosition}>
             <StyledIconPoint
               size={12}
               color={MAIN_COLORS.yellow}
               fill={MAIN_COLORS.yellow}
             />
-          </StyledIconContainer>
+          </StyledDotContainer>
         )}
         <StyledContent>{children}</StyledContent>
       </StyledAdvancedWrapper>

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

@@ -29,7 +29,7 @@ export const SettingsNavigationDrawerItem = ({
 
   if (isDefined(item.isAdvanced) && item.isAdvanced) {
     return (
-      <AdvancedSettingsWrapper navigationDrawerItem>
+      <AdvancedSettingsWrapper>
         <NavigationDrawerItem
           indentationLevel={item.indentationLevel}
           subItemState={subItemState}

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

@@ -44,7 +44,7 @@ export const SettingsNavigationDrawerItems = () => {
         return (
           <NavigationDrawerSection key={section.label}>
             {section.isAdvanced ? (
-              <AdvancedSettingsWrapper hideIcon>
+              <AdvancedSettingsWrapper hideDot>
                 <NavigationDrawerSectionTitle label={section.label} />
               </AdvancedSettingsWrapper>
             ) : (