From c227282ce0968ad45560288d3b7335aab3c78b2a Mon Sep 17 00:00:00 2001
From: Luke <sabolukas03@gmail.com>
Date: Sat, 29 Oct 2022 12:46:22 +0200
Subject: [PATCH] refactor(web/menu): update checkbox styling

---
 web/src/features/dev/debug/menu.ts            |  1 +
 web/src/features/menu/list/CustomCheckbox.tsx | 28 +++++++++----------
 2 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/web/src/features/dev/debug/menu.ts b/web/src/features/dev/debug/menu.ts
index ad8a91a..29a5b63 100644
--- a/web/src/features/dev/debug/menu.ts
+++ b/web/src/features/dev/debug/menu.ts
@@ -14,6 +14,7 @@ export const debugMenu = () => {
             label: 'Option 2',
             icon: 'basket-shopping',
             description: 'Tooltip description 1',
+            checked: true,
           },
           {
             label: 'Vehicle class',
diff --git a/web/src/features/menu/list/CustomCheckbox.tsx b/web/src/features/menu/list/CustomCheckbox.tsx
index a2af255..1a28e0c 100644
--- a/web/src/features/menu/list/CustomCheckbox.tsx
+++ b/web/src/features/menu/list/CustomCheckbox.tsx
@@ -4,33 +4,33 @@ const CustomCheckbox: React.FC<{ checked: boolean }> = ({ checked }) => {
   const { getCheckboxProps, getInputProps, htmlProps } = useCheckbox();
   return (
     <chakra.label
-      display='flex'
-      flexDirection='row'
-      alignItems='center'
+      display="flex"
+      flexDirection="row"
+      alignItems="center"
       gridColumnGap={2}
-      pr={4}
-      cursor='pointer'
+      pr={3}
+      cursor="pointer"
       {...htmlProps}
     >
       <input {...getInputProps()} hidden />
       <Flex
-        alignItems='center'
-        justifyContent='center'
-        border='2px solid'
-        borderColor='#909296'
+        alignItems="center"
+        justifyContent="center"
+        border="2px solid"
+        borderColor="#909296"
         rounded={'sm'}
-        w={6}
-        h={6}
+        w={5}
+        h={5}
         {...getCheckboxProps()}
       >
         {checked && (
-          <Box w={5} h={5} bg='#25262B'>
-            <CheckboxIcon isChecked color={'#373A40'} />
+          <Box w={4} h={4} bg="#909296">
+            <CheckboxIcon isChecked color="#25262B" />
           </Box>
         )}
       </Flex>
     </chakra.label>
-  )
+  );
 };
 
 export default CustomCheckbox;