From 67755ca80a2d4692d2cec3a55ce93bf8955cffad Mon Sep 17 00:00:00 2001
From: andrewwallacespeckle
 <139135120+andrewwallacespeckle@users.noreply.github.com>
Date: Thu, 5 Sep 2024 09:45:19 +0100
Subject: [PATCH] fix(ui-components): Update switch to match new design system
 (#2878)

* Update switch to match style

* Fix colour variable

* Update colour
---
 .../page/settings/webhooks/Webhooks.vue       |  2 --
 packages/tailwind-theme/src/plugin.ts         |  2 ++
 packages/tailwind-theme/src/preset.ts         |  1 +
 .../src/components/form/Switch.vue            | 34 ++++---------------
 4 files changed, 10 insertions(+), 29 deletions(-)

diff --git a/packages/frontend-2/components/project/page/settings/webhooks/Webhooks.vue b/packages/frontend-2/components/project/page/settings/webhooks/Webhooks.vue
index b6a34aca8..2bab47fb1 100644
--- a/packages/frontend-2/components/project/page/settings/webhooks/Webhooks.vue
+++ b/packages/frontend-2/components/project/page/settings/webhooks/Webhooks.vue
@@ -49,10 +49,8 @@
         <template #enabled="{ item }">
           <FormSwitch
             :model-value="!!item.enabled"
-            icons
             :name="'switch-' + item.id"
             :show-label="false"
-            class="scale-90"
             @update:model-value="(newValue) => onEnabledChange(item, newValue)"
           />
         </template>
diff --git a/packages/tailwind-theme/src/plugin.ts b/packages/tailwind-theme/src/plugin.ts
index 8e9d80679..5fd4b26f2 100644
--- a/packages/tailwind-theme/src/plugin.ts
+++ b/packages/tailwind-theme/src/plugin.ts
@@ -22,6 +22,7 @@ export const lightThemeVariables = {
   '--foreground-3': '#7C7C7D',
   /* foreground color when put on top of a primary colored background */
   '--foreground-on-primary': '#fff',
+  '--foreground-disabled': '#1A1A1A50',
 
   /* primary color */
   '--primary': '#136CFF',
@@ -83,6 +84,7 @@ export const darkThemeVariables = {
   '--foreground-2': '#B0B1B5',
   '--foreground-3': '#7E7F82',
   '--foreground-on-primary': '#FFFFFF',
+  '--foreground-disabled': '#FFFFFF50',
 
   /* primary color */
   '--primary': '#136CFF',
diff --git a/packages/tailwind-theme/src/preset.ts b/packages/tailwind-theme/src/preset.ts
index c05ce3756..e9f0ce9d2 100644
--- a/packages/tailwind-theme/src/preset.ts
+++ b/packages/tailwind-theme/src/preset.ts
@@ -42,6 +42,7 @@ const config: Config = {
         foreground: {
           DEFAULT: 'var(--foreground)',
           2: 'var(--foreground-2)',
+          3: 'var(--foreground-3)',
           disabled: 'var(--foreground-disabled)',
           'on-primary': 'var(--foreground-on-primary)',
           primary: 'var(--foreground-primary)'
diff --git a/packages/ui-components/src/components/form/Switch.vue b/packages/ui-components/src/components/form/Switch.vue
index c3db12c1f..c75e67196 100644
--- a/packages/ui-components/src/components/form/Switch.vue
+++ b/packages/ui-components/src/components/form/Switch.vue
@@ -7,18 +7,6 @@
       :name="name"
       :disabled="disabled"
     >
-      <div
-        class="absolute top-0 left-0 right-0 bottom-0 flex items-center space-x-2 px-1 text-white"
-      >
-        <CheckIcon
-          class="h-5 w-5 drop-shadow-md"
-          :class="icons ? 'opacity-100' : 'opacity-0'"
-        />
-        <XMarkIcon
-          class="h-5 w-5 drop-shadow-md"
-          :class="icons ? 'opacity-100' : 'opacity-0'"
-        />
-      </div>
       <span :class="sliderClasses"></span>
     </HeadlessSwitch>
     <label :for="id || name" :class="labelClasses">
@@ -29,12 +17,10 @@
 
 <script setup lang="ts">
 import { Switch as HeadlessSwitch } from '@headlessui/vue'
-import { CheckIcon, XMarkIcon } from '@heroicons/vue/24/solid'
 import { computed } from 'vue'
 
 const props = withDefaults(
   defineProps<{
-    icons?: boolean
     showLabel?: boolean
     name: string
     label?: string
@@ -62,15 +48,15 @@ const labelClasses = computed(() => {
 
 const switchClasses = computed(() => {
   const classParts = [
-    'relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full',
-    'transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary',
-    'cursor-pointer disabled:cursor-not-allowed disabled:bg-foundation-disabled'
+    'relative inline-flex flex-shrink-0 h-[18px] w-[30px] rounded-full',
+    'transition-colors ease-in-out duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-primary',
+    'cursor-pointer disabled:cursor-not-allowed disabled:opacity-40'
   ]
 
   if (enabled.value) {
     classParts.push('bg-primary')
   } else {
-    classParts.push('bg-primary-muted')
+    classParts.push('bg-foreground-3')
   }
 
   return classParts.join(' ')
@@ -78,18 +64,12 @@ const switchClasses = computed(() => {
 
 const sliderClasses = computed(() => {
   const classParts = [
-    'scale-95 pointer-events-none inline-block h-5 w-5 rounded-full',
-    'shadow transform ring-0 transition ease-in-out duration-200'
+    'pointer-events-none inline-block h-3 w-3 rounded-full mt-[3px] ml-[3px]',
+    'ring-0 transition ease-in-out duration-200 bg-foreground-on-primary'
   ]
 
-  if (props.disabled) {
-    classParts.push('bg-foreground-disabled')
-  } else {
-    classParts.push('bg-white')
-  }
-
   if (enabled.value) {
-    classParts.push('translate-x-5')
+    classParts.push('translate-x-[12px]')
   } else {
     classParts.push('translate-x-0')
   }