Decrease checkbox padding to have the same appearance as small icon b…

…uttons (#5242) Don't show in changelog
4ian · Apr 18, 2023 · bfc6a69 · bfc6a69
1 parent 3abf81f
commit bfc6a69
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 0 deletions.
diff --git a/newIDE/app/src/LayersList/LayerRow.js b/newIDE/app/src/LayersList/LayerRow.js
@@ -185,6 +185,7 @@ const LayerRow = ({
                       <React.Fragment>
                         <InlineCheckbox
                           id="layer-visibility"
+                          paddingSize="small"
                           checked={isVisible}
                           checkedIcon={<VisibilityIcon />}
                           uncheckedIcon={<VisibilityOffIcon />}
@@ -199,6 +200,7 @@ const LayerRow = ({
                         />
                         <InlineCheckbox
                           id="layer-lock"
+                          paddingSize="small"
                           disabled={!isVisible}
                           checked={isLocked || !isVisible}
                           checkedIcon={<LockIcon />}

diff --git a/newIDE/app/src/UI/InlineCheckbox.js b/newIDE/app/src/UI/InlineCheckbox.js
@@ -19,6 +19,12 @@ const useFormGroupStyles = makeStyles({
   },
 });
 
+const useSmallPaddingCheckboxStyles = makeStyles({
+  root: {
+    padding: 3,
+  },
+});
+
 type Props = {|
   id?: string,
   label?: ?React.Node,
@@ -27,6 +33,7 @@ type Props = {|
   checkedIcon?: React.Node,
   uncheckedIcon?: React.Node,
   disabled?: boolean,
+  paddingSize?: 'small',
   tooltipOrHelperText?: React.Node,
 |};
 
@@ -43,9 +50,11 @@ const InlineCheckbox = ({
   uncheckedIcon,
   checkedIcon,
   tooltipOrHelperText,
+  paddingSize,
 }: Props) => {
   const labelClasses = useLabelStyles();
   const formGroupClasses = useFormGroupStyles();
+  const smallPaddingClasses = useSmallPaddingCheckboxStyles();
   const checkbox = (
     <Checkbox
       id={id}
@@ -54,6 +63,7 @@ const InlineCheckbox = ({
       onChange={
         onCheck ? event => onCheck(event, event.target.checked) : undefined
       }
+      classes={paddingSize === 'small' ? smallPaddingClasses : null}
       icon={uncheckedIcon}
       checkedIcon={checkedIcon}
       color="secondary"