Settings options (#8996)

- [x] text change

![image](https://github.com/user-attachments/assets/c7304052-18ad-4870-a5ad-5ea73aedcad1)

- [x] CSS for settings cards
Current :

![image](https://github.com/user-attachments/assets/8fd9b3cc-c3df-47a0-9ccb-1a0417f076f2)
Expected :  

![image](https://github.com/user-attachments/assets/8a4e7f17-8ee8-4664-b8b0-5b2857568570)

packages/twenty-front/src/modules/settings/components/SettingsOptions/SettingsOptionCardContentBase.tsx

@@ -1,17 +1,15 @@
 import styled from '@emotion/styled';
-import { CardContent } from 'twenty-ui';
 
 type StyledCardContentProps = {
   disabled?: boolean;
-  divider?: boolean;
 };
 
-export const StyledSettingsOptionCardContent = styled(
-  CardContent,
-)<StyledCardContentProps>`
+export const StyledSettingsOptionCardContent = styled.div<StyledCardContentProps>`
   align-items: center;
   display: flex;
   gap: ${({ theme }) => theme.spacing(3)};
+  background-color: ${({ theme }) => theme.background.secondary};
+  padding: ${({ theme }) => theme.spacing(4)};
 `;
 export const StyledSettingsOptionCardIcon = styled.div`
   align-items: center;

packages/twenty-front/src/modules/settings/components/SettingsOptions/SettingsOptionCardContentCounter.tsx

@@ -12,7 +12,6 @@ type SettingsOptionCardContentCounterProps = {
   Icon?: IconComponent;
   title: React.ReactNode;
   description?: string;
-  divider?: boolean;
   disabled?: boolean;
   value: number;
   onChange: (value: number) => void;
@@ -24,7 +23,6 @@ export const SettingsOptionCardContentCounter = ({
   Icon,
   title,
   description,
-  divider,
   disabled = false,
   value,
   onChange,
@@ -32,7 +30,7 @@ export const SettingsOptionCardContentCounter = ({
   maxValue,
 }: SettingsOptionCardContentCounterProps) => {
   return (
-    <StyledSettingsOptionCardContent divider={divider} disabled={disabled}>
+    <StyledSettingsOptionCardContent disabled={disabled}>
       {Icon && (
         <StyledSettingsOptionCardIcon>
           <SettingsOptionIconCustomizer Icon={Icon} />

packages/twenty-front/src/modules/settings/components/SettingsOptions/SettingsOptionCardContentSelect.tsx

@@ -12,9 +12,7 @@ type SettingsOptionCardContentSelectProps = {
   Icon?: IconComponent;
   title: React.ReactNode;
   description?: string;
-  divider?: boolean;
   disabled?: boolean;
-  selectClassName?: string;
   children?: React.ReactNode;
 };
 
@@ -26,12 +24,11 @@ export const SettingsOptionCardContentSelect = ({
   Icon,
   title,
   description,
-  divider,
   disabled = false,
   children,
 }: SettingsOptionCardContentSelectProps) => {
   return (
-    <StyledSettingsOptionCardContent divider={divider} disabled={disabled}>
+    <StyledSettingsOptionCardContent disabled={disabled}>
       {Icon && (
         <StyledSettingsOptionCardIcon>
           <SettingsOptionIconCustomizer Icon={Icon} />

packages/twenty-front/src/modules/settings/components/SettingsOptions/SettingsOptionCardContentToggle.tsx

@@ -1,3 +1,4 @@
+import { Separator } from '@/settings/components/Separator';
 import {
   StyledSettingsOptionCardContent,
   StyledSettingsOptionCardDescription,
@@ -57,34 +58,34 @@ export const SettingsOptionCardContentToggle = ({
   const toggleId = useId();
 
   return (
-    <StyledSettingsOptionCardToggleContent
-      divider={divider}
-      disabled={disabled}
-    >
-      {Icon && (
-        <StyledSettingsOptionCardIcon>
-          <SettingsOptionIconCustomizer Icon={Icon} />
-        </StyledSettingsOptionCardIcon>
-      )}
-      <div>
-        <StyledSettingsOptionCardTitle>
-          <label htmlFor={toggleId}>
-            {title}
-            <StyledSettingsOptionCardToggleCover />
-          </label>
-        </StyledSettingsOptionCardTitle>
-        <StyledSettingsOptionCardDescription>
-          {description}
-        </StyledSettingsOptionCardDescription>
-      </div>
-      <StyledSettingsOptionCardToggleButton
-        id={toggleId}
-        value={checked}
-        onChange={onChange}
-        disabled={disabled}
-        toggleSize="small"
-        color={advancedMode ? theme.color.yellow : theme.color.blue}
-      />
-    </StyledSettingsOptionCardToggleContent>
+    <>
+      <StyledSettingsOptionCardToggleContent disabled={disabled}>
+        {Icon && (
+          <StyledSettingsOptionCardIcon>
+            <SettingsOptionIconCustomizer Icon={Icon} />
+          </StyledSettingsOptionCardIcon>
+        )}
+        <div>
+          <StyledSettingsOptionCardTitle>
+            <label htmlFor={toggleId}>
+              {title}
+              <StyledSettingsOptionCardToggleCover />
+            </label>
+          </StyledSettingsOptionCardTitle>
+          <StyledSettingsOptionCardDescription>
+            {description}
+          </StyledSettingsOptionCardDescription>
+        </div>
+        <StyledSettingsOptionCardToggleButton
+          id={toggleId}
+          value={checked}
+          onChange={onChange}
+          disabled={disabled}
+          toggleSize="small"
+          color={advancedMode ? theme.color.yellow : theme.color.blue}
+        />
+      </StyledSettingsOptionCardToggleContent>
+      {divider && <Separator />}
+    </>
   );
 };

packages/twenty-front/src/modules/settings/components/SettingsOptions/__stories__/SettingsOptionCardContentCounter.stories.tsx

@@ -21,7 +21,6 @@ const SettingsOptionCardContentCounterWrapper = (
         Icon={args.Icon}
         title={args.title}
         description={args.description}
-        divider={args.divider}
         disabled={args.disabled}
         minValue={args.minValue}
         maxValue={args.maxValue}