From 8740bf51f026079d96bf9f2730de60e18014cbd7 Mon Sep 17 00:00:00 2001
From: Arne Pedersen <arne.lamo@gmail.com>
Date: Tue, 3 Jan 2023 11:18:59 +0100
Subject: [PATCH] Fix switch color bug, add consistent styles, add
 focus-visible.

---
 src/components/toggle/index.tsx | 13 ++++---------
 src/pages/settings/index.tsx    |  2 +-
 2 files changed, 5 insertions(+), 10 deletions(-)

diff --git a/src/components/toggle/index.tsx b/src/components/toggle/index.tsx
index 89114b7..1a7bfb3 100644
--- a/src/components/toggle/index.tsx
+++ b/src/components/toggle/index.tsx
@@ -5,20 +5,15 @@ type ToggleProps = {
 
 export const Toggle = ({ checked, onChange }: ToggleProps) => {
   return (
-    <label>
+    <label className="inline-flex relative items-center cursor-pointer">
       <input
         type="checkbox"
-        className="absolute overflow-hidden whitespace-nowrap h-[1px] w-[1px]"
+        className="sr-only peer"
         checked={checked}
         onChange={onChange}
+        readOnly
       />
-      <span className="bg-white border-2 border-custom-black rounded-3xl flex h-8 mr-[10px] relative w-16 cursor-pointer">
-        <span
-          className={`flex absolute left-[2px] bottom-[2px] justify-center h-6 w-6 rounded-full items-center transition ${
-            checked ? "bg-custom-black" : "translate-x-8 bg-custom-black/50"
-          }`}
-        ></span>
-      </span>
+      <div className="w-11 h-6 bg-gray-300 focus:outline-none peer-focus-visible:ring-2 rounded-full dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-primary"></div>
     </label>
   )
 }
diff --git a/src/pages/settings/index.tsx b/src/pages/settings/index.tsx
index 9a8effa..d949536 100644
--- a/src/pages/settings/index.tsx
+++ b/src/pages/settings/index.tsx
@@ -53,7 +53,7 @@ export default function Settings() {
                   checked={isDark}
                   readOnly
                 />
-                <div className="w-11 h-6 bg-gray-300 peer-focus:outline-none peer-focus:ring-4 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-primary"></div>
+                <div className="w-11 h-6 bg-gray-300 rounded-full dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-primary focus:outline-none peer-focus-visible:ring-2"></div>
               </div>
             </div>
           </div>