Replace custom Checkbox component with native checkbox styled in SCSS and adjust indent guide margin

Author: robertpiosik

packages/ui/src/components/editor/panel/Presets/Presets.module.scss

@@ -77,7 +77,7 @@
         background-color: var(--vscode-tree-indentGuidesStroke);
         height: 100%;
         width: 1px;
-        margin-right: 11px;
+        margin-right: 1px;
         margin-left: 4px;
       }
 
@@ -128,3 +128,38 @@
     flex: 1;
   }
 }
+
+.checkbox {
+  appearance: none;
+  height: 15px;
+  width: 15px;
+  color: var(--vscode-checkbox-foreground);
+  position: relative;
+  cursor: pointer;
+  flex-shrink: 0;
+  margin: 0;
+
+  &:focus {
+    outline: none;
+  }
+
+  &:disabled {
+    opacity: var(--disabled-opacity);
+    cursor: default;
+  }
+
+  &::before {
+    font-family: 'codicon';
+    content: '\eab2';
+    font-size: 12px;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    opacity: var(--disabled-opacity);
+  }
+
+  &:checked::before {
+    opacity: 1;
+  }
+}

packages/ui/src/components/editor/panel/Presets/Presets.tsx

@@ -1,6 +1,5 @@
 import styles from './Presets.module.scss'
 import { IconButton } from '../IconButton/IconButton'
-import { Checkbox } from '../../common/Checkbox'
 import cn from 'classnames'
 import { ReactSortable } from 'react-sortablejs'
 import { Icon } from '../../common/Icon'
@@ -449,12 +448,14 @@ export const Presets: React.FC<Presets.Props> = (props) => {
                         )}
                       {preset.chatbot &&
                         preset_indices_in_group.has(preset.original_index) && (
-                          <Checkbox
+                          <input
+                            type="checkbox"
+                            className={styles.checkbox}
                             checked={!!preset.is_selected}
-                            on_change={() =>
+                            onChange={() =>
                               props.on_toggle_selected_preset(preset.name!)
                             }
-                            on_click={(e) => e.stopPropagation()}
+                            onClick={(e) => e.stopPropagation()}
                           />
                         )}
                       {preset.chatbot && (