From 316537a68a4be9866e0be1815a39de68be2591fc Mon Sep 17 00:00:00 2001
From: parmarKaran01 <82652984+parmarKaran01@users.noreply.github.com>
Date: Mon, 18 Nov 2024 22:20:34 +0530
Subject: [PATCH] FIx minor issue related to gap between checkbox & menu item
 label (#8220)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary
This pull request addresses a minor issue reported in the #8171 , which
was causing misalignment in the content and overall theme spacing.

Fixes #8171

## Fix

> Removed the 5px padding based on the check if its non hoverable, the
current gap between the checkbox and the icon is 8px as expected.

> For the small variant the total size of the non hoverable component is
14x14 as mentioned in the design, for hoverable its 24x24

> For the Large variant the total size of the non hoverable component is
20x20 as mentioned in the design, for hoverable
its 32x32

> checked for the hoverable checkbox component as well working as
expected



## Screenshot for the fixes

<img width="345" alt="Screenshot 2024-10-30 at 10 49 39 PM"
src="https://github.com/user-attachments/assets/2b5cadb7-67d2-4c61-bd40-0d5a12ae48d0">


#### Thank you for considering this contribution! I look forward to your
feedback.

---------

Co-authored-by: Karan Parmar <karan.parmar@PE-HO-MAC-185.local>
Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
---
 .../src/input/components/Checkbox.tsx         | 22 ++++++++++++++-----
 1 file changed, 16 insertions(+), 6 deletions(-)

diff --git a/packages/twenty-ui/src/input/components/Checkbox.tsx b/packages/twenty-ui/src/input/components/Checkbox.tsx
index bdef30acfb..b981ea0274 100644
--- a/packages/twenty-ui/src/input/components/Checkbox.tsx
+++ b/packages/twenty-ui/src/input/components/Checkbox.tsx
@@ -43,8 +43,13 @@ type InputProps = {
 };
 
 const StyledInputContainer = styled.div<InputProps>`
-  --size: ${({ checkboxSize }) =>
-    checkboxSize === CheckboxSize.Large ? '32px' : '24px'};
+  --size: ${({ checkboxSize, hoverable }) => {
+    if (hoverable === true) {
+      return checkboxSize === CheckboxSize.Large ? '32px' : '24px';
+    } else {
+      return checkboxSize === CheckboxSize.Large ? '20px' : '14px';
+    }
+  }};
   align-items: center;
   border-radius: ${({ theme, shape }) =>
     shape === CheckboxShape.Rounded
@@ -53,10 +58,15 @@ const StyledInputContainer = styled.div<InputProps>`
 
   cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
   display: flex;
-  padding: ${({ theme, checkboxSize }) =>
-    checkboxSize === CheckboxSize.Large
-      ? theme.spacing(1.5)
-      : theme.spacing(1.25)};
+  padding: ${({ theme, checkboxSize, hoverable }) => {
+    if (hoverable === true) {
+      return checkboxSize === CheckboxSize.Large
+        ? theme.spacing(1.5)
+        : theme.spacing(1.25);
+    } else {
+      return 0;
+    }
+  }};
   position: relative;
   ${({ hoverable, isChecked, theme, indeterminate, disabled }) => {
     if (!hoverable || disabled === true) return '';