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>
             ) : (

packages/twenty-front/src/modules/settings/data-model/fields/forms/select/components/SettingsDataModelFieldSelectForm.tsx

@@ -30,9 +30,9 @@ import { applySimpleQuotesToString } from '~/utils/string/applySimpleQuotesToStr
 
 import { AdvancedSettingsWrapper } from '@/settings/components/AdvancedSettingsWrapper';
 import { isAdvancedModeEnabledState } from '@/ui/navigation/navigation-drawer/states/isAdvancedModeEnabledState';
+import { t } from '@lingui/core/macro';
 import { useRecoilValue } from 'recoil';
 import { SettingsDataModelFieldSelectFormOptionRow } from './SettingsDataModelFieldSelectFormOptionRow';
-import { t } from '@lingui/core/macro';
 
 export const settingsDataModelFieldSelectFormSchema = z.object({
   defaultValue: selectFieldDefaultValueSchema(),
@@ -251,7 +251,7 @@ export const SettingsDataModelFieldSelectForm = ({
           <>
             <StyledContainer>
               <StyledLabelContainer>
-                <AdvancedSettingsWrapper dimension="width" hideIcon={true}>
+                <AdvancedSettingsWrapper animationDimension="width" hideDot>
                   <StyledApiKeyContainer>
                     <StyledIconContainer>
                       <StyledIconPoint

packages/twenty-front/src/modules/settings/data-model/fields/forms/select/components/SettingsDataModelFieldSelectFormOptionRow.tsx

@@ -8,6 +8,7 @@ import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/Drop
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
+import { t } from '@lingui/core/macro';
 import {
   ColorSample,
   IconCheck,
@@ -21,7 +22,6 @@ import {
   MenuItemSelectColor,
 } from 'twenty-ui';
 import { computeOptionValueFromLabel } from '~/pages/settings/data-model/utils/compute-option-value-from-label.utils';
-import { t } from '@lingui/core/macro';
 
 type SettingsDataModelFieldSelectFormOptionRowProps = {
   className?: string;
@@ -102,7 +102,7 @@ export const SettingsDataModelFieldSelectFormOptionRow = ({
         stroke={theme.icon.stroke.sm}
         color={theme.font.color.extraLight}
       />
-      <AdvancedSettingsWrapper dimension="width" hideIcon={true}>
+      <AdvancedSettingsWrapper animationDimension="width" hideDot>
         <StyledOptionInput
           value={option.value}
           onChange={(input) =>

packages/twenty-front/src/modules/settings/data-model/objects/forms/components/SettingsDataModelObjectAboutForm.tsx

@@ -246,7 +246,10 @@ export const SettingsDataModelObjectAboutForm = ({
                 tooltip,
                 defaultValue,
               }) => (
-                <AdvancedSettingsWrapper key={`object-${fieldName}-text-input`}>
+                <AdvancedSettingsWrapper
+                  key={`object-${fieldName}-text-input`}
+                  dotPosition="top"
+                >
                   <StyledInputContainer>
                     <Controller
                       name={fieldName}

packages/twenty-ui/src/navigation/link/components/AdvancedSettingsToggle.tsx

@@ -4,25 +4,27 @@ import { IconPoint } from '@ui/display';
 import { Toggle } from '@ui/input';
 import { MAIN_COLORS } from '@ui/theme';
 import { useId } from 'react';
+
 const StyledContainer = styled.div`
   align-items: center;
   display: flex;
-  width: 100%;
   gap: ${({ theme }) => theme.spacing(2)};
   position: relative;
+  height: ${({ theme }) => theme.spacing(5)};
+  padding: ${({ theme }) => theme.spacing(1)};
 `;
 
 const StyledText = styled.div`
   color: ${({ theme }) => theme.font.color.secondary};
   font-size: ${({ theme }) => theme.font.size.sm};
   font-weight: ${({ theme }) => theme.font.weight.medium};
-  padding: ${({ theme }) => theme.spacing(1)};
 `;
 
 const StyledIconContainer = styled.div`
-  height: 16px;
+  align-items: center;
+  display: flex;
+  left: ${({ theme }) => theme.spacing(-5)};
   position: absolute;
-  left: ${({ theme }) => theme.spacing(-3)};
 `;
 
 const StyledToggleContainer = styled.label`
@@ -33,10 +35,6 @@ const StyledToggleContainer = styled.label`
   width: 100%;
 `;
 
-const StyledIconPoint = styled(IconPoint)`
-  margin-right: 0;
-`;
-
 type AdvancedSettingsToggleProps = {
   isAdvancedModeEnabled: boolean;
   setIsAdvancedModeEnabled: (enabled: boolean) => void;
@@ -55,7 +53,7 @@ export const AdvancedSettingsToggle = ({
   return (
     <StyledContainer>
       <StyledIconContainer>
-        <StyledIconPoint
+        <IconPoint
           size={12}
           color={MAIN_COLORS.yellow}
           fill={MAIN_COLORS.yellow}