chore: more design updates

app/javascript/v3/components/Form/Select.vue

@@ -15,7 +15,7 @@
         'text-ash-900': value,
         'pl-9': icon,
       }"
-      class="block w-full px-3 py-2 pr-6 mb-0 border-0 shadow-sm outline-none appearance-none rounded-xl select-caret ring-1 ring-inset placeholder:text-ash-900 focus:ring-2 focus:ring-inset focus:ring-primary-500 sm:text-sm sm:leading-6"
+      class="block w-full px-3 py-2 pr-6 mb-0 border-0 shadow-sm outline-none appearance-none rounded-xl select-caret ring-ash-200 ring-1 ring-inset placeholder:text-ash-900 focus:ring-2 focus:ring-inset focus:ring-primary-500 sm:text-sm sm:leading-6"
       @input="onInput"
     >
       <option value="" disabled selected class="hidden">

app/javascript/v3/components/Form/Switch.vue

@@ -0,0 +1,81 @@
+<template>
+  <button
+    type="button"
+    class="p-0 toggle-button"
+    :class="{ active: value, small: size === 'small' }"
+    role="switch"
+    :aria-checked="value.toString()"
+    @click="onClick"
+  >
+    <span aria-hidden="true" :class="{ active: value }" />
+  </button>
+</template>
+
+<script>
+export default {
+  props: {
+    value: { type: Boolean, default: false },
+    size: { type: String, default: '' },
+  },
+  methods: {
+    onClick() {
+      this.$emit('input', !this.value);
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.toggle-button {
+  @apply bg-slate-200 dark:bg-slate-600;
+  --toggle-button-box-shadow: rgb(255, 255, 255) 0px 0px 0px 0px,
+    rgba(59, 130, 246, 0.5) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px,
+    rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
+  border-radius: var(--border-radius-large);
+  border: 2px solid transparent;
+  cursor: pointer;
+  display: flex;
+  flex-shrink: 0;
+  height: 19px;
+  position: relative;
+  transition-duration: 200ms;
+  transition-property: background-color;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  width: 34px;
+
+  &.active {
+    background-color: var(--w-500);
+  }
+
+  &.small {
+    width: 22px;
+    height: 14px;
+
+    span {
+      height: var(--space-one);
+      width: var(--space-one);
+
+      &.active {
+        transform: translate(var(--space-small), var(--space-zero));
+      }
+    }
+  }
+
+  span {
+    @apply bg-white dark:bg-slate-900;
+    --space-one-point-five: 0.9375rem;
+    border-radius: 100%;
+    box-shadow: var(--toggle-button-box-shadow);
+    display: inline-block;
+    height: var(--space-one-point-five);
+    transform: translate(0, 0);
+    transition-duration: 200ms;
+    transition-property: transform;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    width: var(--space-one-point-five);
+
+    &.active {
+      transform: translate(var(--space-one-point-five), var(--space-zero));
+    }
+  }
+}
+</style>

app/javascript/v3/components/Form/WithLabel.vue

@@ -3,14 +3,14 @@
     <label
       v-if="label"
       :for="name"
-      class="flex justify-between text-sm font-medium leading-6 text-ash-900"
+      class="flex justify-between mb-0.5 text-sm font-medium leading-6 text-ash-900"
     >
       <slot name="label">
         {{ label }}
       </slot>
       <slot name="rightOfLabel" />
     </label>
-    <div class="w-full">
+    <div class="flex flex-col w-full gap-1">
       <div class="relative flex items-center w-full">
         <fluent-icon
           v-if="icon"
@@ -22,7 +22,7 @@
       </div>
       <span
         v-if="errorMessage && hasError"
-        class="text-xs text-ruby-800 leading-2"
+        class="mt-0.5 text-xs text-ruby-800 leading-2"
       >
         {{ errorMessage }}
       </span>