Updates CheckBox Component in Table and Kanban View ( #4850 ) (#6519)

fixes #4850

---------

Co-authored-by: Félix Malfait <felix.malfait@gmail.com>

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}

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>
   );

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}

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 '';