refactor(web/menu): update checkbox styling

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

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'
+      display="flex"
-      flexDirection='row'
+      flexDirection="row"
-      alignItems='center'
+      alignItems="center"
       gridColumnGap={2}
-      pr={4}
+      pr={3}
-      cursor='pointer'
+      cursor="pointer"
       {...htmlProps}
     >
       <input {...getInputProps()} hidden />
       <Flex
-        alignItems='center'
+        alignItems="center"
-        justifyContent='center'
+        justifyContent="center"
-        border='2px solid'
+        border="2px solid"
-        borderColor='#909296'
+        borderColor="#909296"
         rounded={'sm'}
-        w={6}
+        w={5}
-        h={6}
+        h={5}
         {...getCheckboxProps()}
       >
         {checked && (
-          <Box w={5} h={5} bg='#25262B'>
+          <Box w={4} h={4} bg="#909296">
-            <CheckboxIcon isChecked color={'#373A40'} />
+            <CheckboxIcon isChecked color="#25262B" />
           </Box>
         )}
       </Flex>
     </chakra.label>
-  )
+  );
 };
 
 export default CustomCheckbox;