web/SettingsCheckbox: proper checkbox style

web/src/components/buttons/SettingsCheckbox.svelte

@@ -8,6 +8,8 @@
     import settings, { updateSetting } from "$lib/settings";
     import type { CobaltSettings } from "$lib/types/settings";
 
+    import IconCheck from "@tabler/icons-svelte/IconCheck.svelte";
+
     export let settingContext: Context;
     export let settingId: Id;
 
@@ -18,18 +20,23 @@
     $: isChecked = !!setting;
 </script>
 
-<div class="checkbox-container">
-    <input
-        type="checkbox"
-        id="setting-button-{settingContext}-{String(settingId)}"
-        bind:checked={isChecked}
-        on:change={() =>
-            updateSetting({
-                [settingContext]: {
-                    [settingId]: isChecked,
-                },
-            })}
-    />
+<button
+    id="setting-button-{settingContext}-{String(settingId)}"
+    class="checkbox-container"
+    on:click={() => {
+        updateSetting({
+            [settingContext]: {
+                [settingId]: !isChecked,
+            },
+        });
+        console.log("yass", !isChecked);
+    }}
+>
+    <div class="checkbox" class:checked={isChecked}>
+        <div class="checkbox-icon">
+            <IconCheck />
+        </div>
+    </div>
     <div class="checkbox-text">
         <h4 class="checkbox-title">{title}</h4>
 
@@ -37,14 +44,18 @@
             <div class="subtext checkbox-description">{description}</div>
         {/if}
     </div>
-</div>
+</button>
 
 <style>
     .checkbox-container {
         display: flex;
         flex-direction: row;
         align-items: center;
-        gap: 10px;
+        gap: 12px;
+
+        justify-content: start;
+        text-align: left;
+        transform: none;
     }
 
     .checkbox-text {
@@ -52,7 +63,39 @@
         flex-direction: column;
     }
 
+    .checkbox {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding: 1px;
+        aspect-ratio: 1/1;
+        border-radius: 5px;
+        box-shadow: 0 0 0 2px var(--secondary);
+    }
+
+    .checkbox-icon {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        opacity: 0;
+    }
+
+    .checkbox-icon :global(svg) {
+        height: 18px;
+        width: 18px;
+        stroke: var(--primary);
+        stroke-width: 2px;
+    }
+
+    .checkbox.checked {
+        background: var(--secondary);
+    }
+
+    .checkbox.checked .checkbox-icon {
+        opacity: 1;
+    }
+
     .checkbox-description {
         font-size: 12px;
     }
-</style>
+</style>