fix: fix toggle style

src/styles/missing-tailwind.css

@@ -50,6 +50,14 @@
     height: 1rem;
 }
 
+.inline-flex {
+    display: inline-flex;
+}
+
+.items-center {
+    align-items: center;
+}
+
 .ml-3 {
     margin-left: 0.75rem;
 }
@@ -70,6 +78,10 @@
     padding-right: 2rem;
 }
 
+.right-4 {
+    right: 1rem;
+}
+
 .rounded-full {
     border-radius: 9999px;
 }
@@ -107,3 +119,61 @@
         top: 2rem;
     }
 }
+
+
+.toggle-switch {
+    position: relative;
+    outline: none;
+    background-color: rgb(229 231 235);
+    border: 1px solid rgb(107 114 128);
+    border-radius: 9999px;
+    cursor: pointer;
+    height: 20px;
+    width: 32px;
+}
+
+.dark .toggle-switch {
+    background-color: rgb(255 255 255 / 5%);
+    border-color: rgb(255 255 255 / 1);
+}
+
+.toggle-switch[data-state="checked"] {
+    background-color: rgb(0 0 0);
+    border-color: rgb(0 0 0);
+}
+
+.dark .toggle-switch[data-state="checked"] {
+    background-color: rgb(22 163 74);
+    border-color: rgb(22 163 74);
+}
+
+.toggle-switch-handle {
+    display: block;
+    background-color: rgb(255 255 255);
+    border-radius: 9999px;
+    height: 16px;
+    width: 16px;
+    transition: transform 0.1s;
+    will-change: transform;
+    transform: translateX(1px);
+}
+
+.toggle-switch-handle[data-state="checked"] {
+    transform: translateX(14px);
+}
+
+.toggle-switch-handle:hover {
+    background-color: rgb(243 244 246);
+}
+
+.toggle-switch-label {
+    color: rgb(107 114 128);
+    margin-left: 0.75rem;
+    font-size: 0.875rem;
+    font-weight: 500;
+}
+
+.toggle-switch-label:hover {
+    color: rgb(71 85 105);
+}
+

src/ui/Toggle.tsx

@@ -16,15 +16,15 @@ export function Toggle({ label, checked = true, onCheckedUpdate }: ToggleProps)
                 checked={checked}
                 onChange={onCheckedUpdate}
                 data-state={checked ? 'checked' : 'unchecked'}
-                className="focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-token-text-secondary focus-visible:ring-offset-2 focus-visible:radix-state-checked:ring-black focus-visible:dark:ring-token-main-surface-primary focus-visible:dark:radix-state-checked:ring-green-600 cursor-pointer bg-gray-200 radix-state-checked:bg-black dark:border dark:border-token-border-medium dark:bg-transparent relative shrink-0 rounded-full dark:radix-state-checked:border-green-600 dark:radix-state-checked:bg-green-600 h-[20px] w-[32px]"
+                className="toggle-switch"
             >
                 <span
                     data-state={checked ? 'checked' : 'unchecked'}
-                    className="flex items-center justify-center rounded-full transition-transform duration-100 will-change-transform ltr:translate-x-0.5 rtl:-translate-x-0.5 bg-white h-[16px] w-[16px] ltr:radix-state-checked:translate-x-[14px] rtl:radix-state-checked:translate-x-[-14px]"
+                    className="toggle-switch-handle"
                 >
                 </span>
             </Switch>
-            {label && <span className="ml-3 text-sm font-medium text-gray-900 dark:text-gray-300">{label}</span>}
+            {label && <span className="toggle-switch-label">{label}</span>}
         </div>
     )
 }