Replace settings switch toggles with checkboxes (#130)

* Replace switch toggle with checkbox toggle

* Consistent outline/shadow styling

* Tweak shadow to be less aggressive

src/components/ambassadorButton/ambassadorButton.module.scss

@@ -15,7 +15,7 @@
   width: 100%;
 
   flex-shrink: 0;
-  box-shadow: 0 0.25rem 0.25rem $accent-color;
+  box-shadow: $shadow;
   border-radius: 0.5rem;
   transition: $transition;
   transition-property: filter;

src/components/ambassadorCard/ambassadorCard.module.scss

@@ -14,7 +14,7 @@
   background-color: $accent-color;
   border: 0.5rem solid $primary-color;
   border-radius: 1rem;
-  box-shadow: 0 0.2rem 0.2rem $accent-color;
+  box-shadow: $shadow;
   padding: 0.25rem 0 0.5rem;
 
   color: $primary-text;

src/pages/overlay/components/buttons/buttons.module.scss

@@ -16,7 +16,8 @@
     border-radius: 0.5rem;
     background: $primary-color;
     cursor: pointer;
-    box-shadow: 0 0.125rem 0.25rem $accent-color;
+    box-shadow: $shadow;
+    outline-color: $outline-color;
     transition: $transition;
     transition-property: outline, filter;
 

src/pages/overlay/components/card/card.module.scss

@@ -9,8 +9,8 @@
   justify-content: space-between;
   align-items: center;
 
-  border: 0.25rem solid white;
   border-radius: 1.25rem;
+  box-shadow: $shadow;
   background: $primary-color;
   color: $primary-text;
 

src/pages/overlay/components/overlay/ambassadors/ambassadors.module.scss

@@ -88,6 +88,7 @@
   }
 
   .ambassadorButton {
+    outline-color: $outline-color;
     transition: $transition;
     transition-property: outline, filter;
 

src/pages/overlay/components/toggle/Toggle.tsx

@@ -20,11 +20,11 @@ export default function Toggle(props: ToggleProps) {
 
   return (
     <label className={styles.container}>
-      <span className={styles.label}>{label}</span>
-      <span className={styles.switch}>
+      <span className={styles.toggle}>
         <input type="checkbox" onChange={onChangeNative} checked={value} />
-        <span className={styles.slider}></span>
+        <span>&#x2713;</span>
       </span>
+      <span className={styles.label}>{label}</span>
     </label>
   );
 }

src/pages/overlay/components/toggle/toggle.module.scss

@@ -1,78 +1,56 @@
 @import "../../../../variables.scss";
 
-$knob: 1rem;
-$padding: 0.2rem;
-
 .container {
   display: flex;
   align-items: center;
-  gap: 1rem;
+  gap: 0.5rem;
   cursor: pointer;
 
   &:hover {
-    .slider {
-      outline: $outline !important;
+    .toggle {
+      input {
+        outline: $outline;
+      }
     }
   }
 
-  .label {
-    font-size: 0.75rem;
-  }
-
-  .switch {
+  .toggle {
     position: relative;
-    display: inline-block;
-    width: ($knob * 2) + ($padding * 2);
-    height: $knob + ($padding * 2);
-    margin-top: 0.25rem;
 
     input {
-      opacity: 0;
-      width: 0;
-      height: 0;
-
-      &:focus + .slider {
-        outline: $outline !important;
-      }
-
-      &:checked + .slider {
-        background: $primary-color;
-        outline: 0.125rem solid $tertiary-color;
-
-        &::before {
-          transform: translateX($knob);
+      appearance: none;
+      background: $tertiary-color;
+      border: none;
+      border-radius: 0.5rem;
+      cursor: inherit;
+      display: block;
+      width: 1.5rem;
+      height: 1.5rem;
+      outline-color: $outline-color;
+      transition: $transition outline;
+
+      &:checked {
+        background: $secondary-color;
+
+        ~ span {
+          opacity: 1;
         }
       }
     }
 
-    .slider {
+    span {
+      color: $primary-color;
+      opacity: 0;
       position: absolute;
-      cursor: pointer;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      border-radius: $knob;
-      background: $tertiary-color;
-      transition: $transition;
-      transition-property: background, outline;
-
-      &::before {
-        position: absolute;
-        content: "";
-        height: $knob;
-        width: $knob;
-        left: $padding;
-        top: $padding;
-        border-radius: 50%;
-        background-color: white;
-        transition: $transition;
-        transition-property: transform;
-
-        @media (prefers-reduced-motion) {
-          transition: unset;
-        }
-      }
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      pointer-events: none;
+      transition: $transition opacity;
     }
   }
+
+  .label {
+    font-size: 0.75rem;
+  }
 }

src/variables.scss

@@ -13,6 +13,9 @@ $tooltip-background-color: #18181b;
 
 $font-family: "Nunito", sans-serif;
 $outline: 0.25rem solid $outline-color;
+$shadow:
+  0 0.125rem 0.5rem rgba($accent-color, 0.75),
+  0 0.125rem 1rem rgba($accent-color, 0.25);
 $transition: 0.3s ease;
 
 $slide-distance: 2.5rem;