From 4208bd2b836132e90b8f29ad491b402ddb8a765a Mon Sep 17 00:00:00 2001
From: Guillim <guillim@users.noreply.github.com>
Date: Fri, 6 Dec 2024 17:47:28 +0100
Subject: [PATCH] Settings Icon CSS update (#8934)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Current :

![image](https://github.com/user-attachments/assets/985e4f1b-6379-43ee-9311-25b455d8f5c0)

Expected :
<img width="594" alt="Screenshot 2024-12-06 at 17 01 45"
src="https://github.com/user-attachments/assets/a26a5415-ecd2-4111-a093-ae049b734925">


Design Request from @Bonapara 😸
---
 .../SettingsOptions/SettingsOptionCardContentBase.tsx       | 6 +++---
 .../SettingsOptions/SettingsOptionCardContentToggle.tsx     | 1 +
 .../SettingsOptions/SettingsOptionIconCustomizer.tsx        | 2 +-
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/twenty-front/src/modules/settings/components/SettingsOptions/SettingsOptionCardContentBase.tsx b/packages/twenty-front/src/modules/settings/components/SettingsOptions/SettingsOptionCardContentBase.tsx
index c89ac354a..31c79e956 100644
--- a/packages/twenty-front/src/modules/settings/components/SettingsOptions/SettingsOptionCardContentBase.tsx
+++ b/packages/twenty-front/src/modules/settings/components/SettingsOptions/SettingsOptionCardContentBase.tsx
@@ -11,7 +11,7 @@ export const StyledSettingsOptionCardContent = styled(
 )<StyledCardContentProps>`
   align-items: center;
   display: flex;
-  gap: ${({ theme }) => theme.spacing(4)};
+  gap: ${({ theme }) => theme.spacing(3)};
 `;
 export const StyledSettingsOptionCardIcon = styled.div`
   align-items: center;
@@ -19,9 +19,9 @@ export const StyledSettingsOptionCardIcon = styled.div`
   border-radius: ${({ theme }) => theme.border.radius.sm};
   background-color: ${({ theme }) => theme.background.primary};
   display: flex;
-  height: ${({ theme }) => theme.spacing(8)};
+  height: ${({ theme }) => theme.spacing(7)};
   justify-content: center;
-  width: ${({ theme }) => theme.spacing(8)};
+  width: ${({ theme }) => theme.spacing(7)};
   min-width: ${({ theme }) => theme.icon.size.md};
 `;
 
diff --git a/packages/twenty-front/src/modules/settings/components/SettingsOptions/SettingsOptionCardContentToggle.tsx b/packages/twenty-front/src/modules/settings/components/SettingsOptions/SettingsOptionCardContentToggle.tsx
index 53f3df5f4..868418500 100644
--- a/packages/twenty-front/src/modules/settings/components/SettingsOptions/SettingsOptionCardContentToggle.tsx
+++ b/packages/twenty-front/src/modules/settings/components/SettingsOptions/SettingsOptionCardContentToggle.tsx
@@ -82,6 +82,7 @@ export const SettingsOptionCardContentToggle = ({
         value={checked}
         onChange={onChange}
         disabled={disabled}
+        toggleSize="small"
         color={advancedMode ? theme.color.yellow : theme.color.blue}
       />
     </StyledSettingsOptionCardToggleContent>
diff --git a/packages/twenty-front/src/modules/settings/components/SettingsOptions/SettingsOptionIconCustomizer.tsx b/packages/twenty-front/src/modules/settings/components/SettingsOptions/SettingsOptionIconCustomizer.tsx
index 1f576bb88..0d10eb013 100644
--- a/packages/twenty-front/src/modules/settings/components/SettingsOptions/SettingsOptionIconCustomizer.tsx
+++ b/packages/twenty-front/src/modules/settings/components/SettingsOptions/SettingsOptionIconCustomizer.tsx
@@ -24,7 +24,7 @@ export const SettingsOptionIconCustomizer = ({
   return (
     <StyledIconCustomizer zoom={zoom} rotate={rotate}>
       <Icon
-        size={theme.icon.size.xl}
+        size={theme.icon.size.lg}
         color={theme.IllustrationIcon.color.grey}
         stroke={theme.icon.stroke.md}
       />