fixes: animation, reacty code, and styling

Author: abbeyperini

app/components/Settings/Toggle.client.vue

@@ -4,25 +4,17 @@ const props = defineProps<{
   description?: string
   class?: string
 }>()
-
+defineEmits(['update:modelValue'])
 const checked = defineModel<boolean>({
-  default: false,
+  required: true,
 })
 const id = 'toggle-' + props.label
 </script>
 
 <template>
   <label :for="id">
     <span class="toggle--label-text">{{ label }}</span>
-    <input
-      role="switch"
-      type="checkbox"
-      :id
-      class="toggle--checkbox"
-      :aria-checked="checked"
-      :checked="checked"
-      @click="checked = !checked"
-    />
+    <input role="switch" type="checkbox" :id class="toggle--checkbox" v-model="checked" />
     <span class="toggle--background"></span>
   </label>
   <p v-if="description" class="text-sm text-fg-muted mt-2">
@@ -31,34 +23,6 @@ const id = 'toggle-' + props.label
 </template>
 
 <style scoped>
-@keyframes reverse {
-  0% {
-    left: 20px;
-    width: 20px;
-  }
-  60% {
-    left: 3px;
-    width: 40px;
-  }
-  100% {
-    left: 3px;
-  }
-}
-
-@keyframes switch {
-  0% {
-    left: 3px;
-  }
-  60% {
-    left: 3px;
-    width: 40px;
-  }
-  100% {
-    left: 20px;
-    width: 20px;
-  }
-}
-
 .toggle--label-text {
   grid-area: label-text;
 }
@@ -84,51 +48,50 @@ input {
 }
 
 label:has(input:focus) .toggle--background {
-  outline: solid 1px #030712;
+  outline: solid 2px #030712;
   outline-offset: 2px;
-  transition: outline 100ms ease-in;
 }
+
+label:has(input:checked) .toggle--background {
+  background: #030712;
+  border-color: #030712;
+}
+
 label:has(input:hover) .toggle--background {
   background: #6b7280;
 }
 
 /* background */
 .toggle--background {
-  width: 44px;
-  height: 24px;
+  width: 46px;
+  height: 26px;
   background: #9ca3af;
-  border-radius: 100px;
+  border-radius: 9999px;
   border: 1px solid #030712;
   display: flex;
   position: relative;
-  transition: all 350ms ease-in;
-}
-
-label:has(input:checked) .toggle--background {
-  background: #030712;
-  border-color: #030712;
 }
 
 /* Circle that moves */
 .toggle--checkbox:checked + .toggle--background:before {
-  animation-name: reverse;
-  animation-duration: 350ms;
+  animation-name: switch;
   animation-fill-mode: forwards;
-  transition: all 360ms ease-in;
+  transform: translate(21px);
+  transition: transform 200ms ease-in-out;
   background: #f9fafb;
 }
 
 .toggle--background:before {
-  animation-name: switch;
-  animation-duration: 350ms;
+  animation-name: reverse;
   animation-fill-mode: forwards;
+  transition: transform 200ms ease-in-out;
   content: '';
   width: 20px;
   height: 20px;
-  top: 1px;
-  left: 3px;
+  left: 2px;
+  top: 2px;
   position: absolute;
-  border-radius: 20px;
+  border-radius: 9999px;
   background: #f9fafb;
 }
 </style>