From fe9144a4a7043ca9f8f5e568e18d13d97dd510fe Mon Sep 17 00:00:00 2001
From: Faisal-imtiyaz123 <142205282+Faisal-imtiyaz123@users.noreply.github.com>
Date: Mon, 5 Aug 2024 18:56:09 +0530
Subject: [PATCH] Updates CheckBox Component in Table and Kanban View ( #4850 )
 (#6519)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

fixes #4850

---------

Co-authored-by: Félix Malfait <felix.malfait@gmail.com>
---
 .../record-board-card/components/RecordBoardCard.tsx         | 1 +
 .../record-table-cell/components/RecordTableCellCheckbox.tsx | 2 +-
 .../components/RecordTableHeaderCheckboxColumn.tsx           | 1 +
 .../src/modules/ui/input/components/Checkbox.tsx             | 5 +++--
 4 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCard.tsx b/packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCard.tsx
index 50142c9da..39d458fce 100644
--- a/packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCard.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCard.tsx
@@ -245,6 +245,7 @@ export const RecordBoardCard = () => {
           )}
           <StyledCheckboxContainer className="checkbox-container">
             <Checkbox
+              hoverable
               checked={isCurrentCardSelected}
               onChange={() => setIsCurrentCardSelected(!isCurrentCardSelected)}
               variant={CheckboxVariant.Secondary}
diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellCheckbox.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellCheckbox.tsx
index a261fa2ae..645e2bc4a 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellCheckbox.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellCheckbox.tsx
@@ -36,7 +36,7 @@ export const RecordTableCellCheckbox = () => {
   return (
     <RecordTableTd isSelected={isSelected} hasRightBorder={false}>
       <StyledContainer onClick={handleClick}>
-        <Checkbox checked={currentRowSelected} />
+        <Checkbox hoverable checked={currentRowSelected} />
       </StyledContainer>
     </RecordTableTd>
   );
diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderCheckboxColumn.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderCheckboxColumn.tsx
index 639e91535..942e8865b 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderCheckboxColumn.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderCheckboxColumn.tsx
@@ -47,6 +47,7 @@ export const RecordTableHeaderCheckboxColumn = () => {
     <StyledColumnHeaderCell>
       <StyledContainer>
         <Checkbox
+          hoverable
           checked={checked}
           onChange={onChange}
           indeterminate={indeterminate}
diff --git a/packages/twenty-front/src/modules/ui/input/components/Checkbox.tsx b/packages/twenty-front/src/modules/ui/input/components/Checkbox.tsx
index bbd49cc30..103036b7c 100644
--- a/packages/twenty-front/src/modules/ui/input/components/Checkbox.tsx
+++ b/packages/twenty-front/src/modules/ui/input/components/Checkbox.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react';
 import styled from '@emotion/styled';
+import * as React from 'react';
 import { IconCheck, IconMinus } from 'twenty-ui';
 import { v4 } from 'uuid';
 
@@ -49,10 +49,11 @@ const StyledInputContainer = styled.div<InputProps>`
   border-radius: ${({ theme, shape }) =>
     shape === CheckboxShape.Rounded
       ? theme.border.radius.rounded
-      : theme.border.radius.sm};
+      : theme.border.radius.md};
 
   cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
   display: flex;
+  padding: ${({ theme }) => theme.spacing(1)};
   position: relative;
   ${({ hoverable, isChecked, theme, indeterminate, disabled }) => {
     if (!hoverable || disabled === true) return '';