From d9bf6b499b1d83fa34261a9eee17ae0a5a27fd8b Mon Sep 17 00:00:00 2001
From: Muhsin Keloth <muhsinkeramam@gmail.com>
Date: Thu, 25 Apr 2024 16:17:27 +0530
Subject: [PATCH] chore: style fixes

---
 .../dashboard/settings/personal/AccessToken.vue      |  2 +-
 .../settings/personal/AudioAlertCondition.vue        |  2 +-
 .../dashboard/settings/personal/HotKeyCard.vue       |  4 ++--
 .../settings/personal/NotificationCheckBox.vue       |  4 ++--
 .../settings/personal/NotificationPreferences.vue    | 12 ++++++------
 app/javascript/v3/components/Form/Switch.vue         |  2 +-
 6 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/app/javascript/dashboard/routes/dashboard/settings/personal/AccessToken.vue b/app/javascript/dashboard/routes/dashboard/settings/personal/AccessToken.vue
index 08014f5e9..be66e1687 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/personal/AccessToken.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/personal/AccessToken.vue
@@ -14,7 +14,7 @@
       type="submit"
       size="large"
       icon="text-copy"
-      variant="ghost"
+      variant="outline"
       color-scheme="secondary"
       @click="onClick"
     >
diff --git a/app/javascript/dashboard/routes/dashboard/settings/personal/AudioAlertCondition.vue b/app/javascript/dashboard/routes/dashboard/settings/personal/AudioAlertCondition.vue
index dfaa13df7..e7156c24a 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/personal/AudioAlertCondition.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/personal/AudioAlertCondition.vue
@@ -16,7 +16,7 @@
           v-model="item.model"
           type="checkbox"
           :value="item.value"
-          class="mb-0 mt-0.5 border-[1.5px] flex-shrink-0 shadow border-slate-200 dark:border-slate-600 appearance-none rounded-[4px] w-4 h-4 dark:bg-slate-800 focus:ring-1 focus:ring-slate-100 dark:focus:ring-slate-700 checked:bg-primary-600 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center checked:border-t checked:border-woot-700 dark:checked:border-woot-300 checked:border-b-0 checked:border-r-0 checked:border-l-0 after:text-center after:text-xs after:font-bold after:relative after:-top-[1.5px]"
+          class="mt-1 dark:border-slate-600 checked:bg-primary-600 dark:checked:bg-primary-600 shadow appearance-none rounded-[4px] w-4 h-4 focus:ring-1 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center after:text-center after:text-xs after:font-bold after:relative"
           @input="onChange"
         />
         <label class="text-sm font-normal text-ash-900">
diff --git a/app/javascript/dashboard/routes/dashboard/settings/personal/HotKeyCard.vue b/app/javascript/dashboard/routes/dashboard/settings/personal/HotKeyCard.vue
index 9cc74945b..425911df0 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/personal/HotKeyCard.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/personal/HotKeyCard.vue
@@ -4,6 +4,7 @@
     :class="{
       'border border-solid border-primary-300 ': active,
     }"
+    @click="$emit('click')"
   >
     <div class="flex flex-col gap-2 items-center w-full rounded-t-[5px]">
       <div class="flex items-center justify-between w-full gap-1">
@@ -14,8 +15,7 @@
           :checked="active"
           type="radio"
           name="hotkey"
-          class="shadow grid place-items-center border-2 border-ash-200 appearance-none rounded-full w-5 h-5 checked:bg-primary-600 before:content-[''] before:bg-primary-600 before:border-4 before:rounded-full before:border-ash-25 checked:before:w-[18px] checked:before:h-[18px] checked:border checked:border-primary-600"
-          @change="$emit('click')"
+          class="shadow cursor-pointer grid place-items-center border-2 border-ash-200 appearance-none rounded-full w-5 h-5 checked:bg-primary-600 before:content-[''] before:bg-primary-600 before:border-4 before:rounded-full before:border-ash-25 checked:before:w-[18px] checked:before:h-[18px] checked:border checked:border-primary-600"
         />
       </div>
       <span class="text-ash-900 text-sm line-clamp-2 leading-[1.4] text-start">
diff --git a/app/javascript/dashboard/routes/dashboard/settings/personal/NotificationCheckBox.vue b/app/javascript/dashboard/routes/dashboard/settings/personal/NotificationCheckBox.vue
index 68b6f5a53..00c5cdb81 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/personal/NotificationCheckBox.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/personal/NotificationCheckBox.vue
@@ -1,11 +1,11 @@
 <template>
   <div
-    class="flex items-center gap-2 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
+    class="flex items-start gap-2 px-0 text-sm tracking-[0.5] text-left rtl:text-right"
     :class="`col-span-${span}`"
   >
     <input
       v-model="localFlags"
-      class="m-0 border-[1.5px] checked:bg-primary-600 shadow border-slate-200 dark:border-slate-600 appearance-none rounded-[4px] w-4 h-4 dark:bg-slate-800 focus:ring-1 focus:ring-slate-100 dark:focus:ring-slate-700 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center checked:border-t checked:border-woot-700 dark:checked:border-woot-300 checked:border-b-0 checked:border-r-0 checked:border-l-0 after:text-center after:text-xs after:font-bold after:relative after:-top-[1.5px]"
+      class="mt-1 border-ash-400 checked:bg-primary-600 dark:checked:bg-primary-600 shadow appearance-none rounded-[4px] w-4 h-4 focus:ring-1 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center after:text-center after:text-xs after:font-bold after:relative"
       type="checkbox"
       :value="localValue"
       @input="handleInput"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/personal/NotificationPreferences.vue b/app/javascript/dashboard/routes/dashboard/settings/personal/NotificationPreferences.vue
index e8f1ef5f9..c9e817142 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/personal/NotificationPreferences.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/personal/NotificationPreferences.vue
@@ -30,7 +30,7 @@
           class="grid content-center h-12 grid-cols-12 gap-4 py-0 rounded-t-xl"
         >
           <div
-            class="flex items-center gap-2 col-span-7 px-0 py-2 text-sm tracking-[0.5] rtl:text-right"
+            class="flex flex-row items-start gap-2 col-span-7 px-0 py-2 text-sm tracking-[0.5] rtl:text-right"
           >
             <span class="text-sm text-ash-900">
               {{ $t(notification.label) }}
@@ -55,11 +55,11 @@
       <span class="text-sm font-medium uppercase text-ash-900">
         {{ $t('PROFILE_SETTINGS.FORM.EMAIL_NOTIFICATIONS_SECTION.TITLE') }}
       </span>
-      <div class="flex flex-col gap-2">
+      <div class="flex flex-col gap-4">
         <div
           v-for="(notification, index) in notificationTypes"
           :key="index"
-          class="flex flex-row items-center gap-2"
+          class="flex flex-row items-start gap-2"
         >
           <notification-check-box
             type="email"
@@ -71,18 +71,18 @@
         </div>
       </div>
 
-      <div class="flex items-center justify-between gap-2">
+      <div class="flex items-center justify-start gap-2">
         <span class="text-sm font-medium uppercase text-ash-900">
           {{ $t('PROFILE_SETTINGS.FORM.PUSH_NOTIFICATIONS_SECTION.TITLE') }}
         </span>
         <form-switch :value="true" @input="onRequestPermissions()" />
       </div>
 
-      <div class="flex flex-col gap-2">
+      <div class="flex flex-col gap-4">
         <div
           v-for="(notification, index) in notificationTypes"
           :key="index"
-          class="flex flex-row items-center gap-2"
+          class="flex flex-row items-start gap-2"
         >
           <notification-check-box
             type="push"
diff --git a/app/javascript/v3/components/Form/Switch.vue b/app/javascript/v3/components/Form/Switch.vue
index d044531d7..eb22b5804 100644
--- a/app/javascript/v3/components/Form/Switch.vue
+++ b/app/javascript/v3/components/Form/Switch.vue
@@ -56,7 +56,7 @@ export default {
   }
 
   span {
-    @apply bg-white dark:bg-slate-900;
+    @apply bg-white dark:bg-white;
     --space-one-point-five: 0.9375rem;
     border-radius: 100%;
     box-shadow: var(--toggle-button-box-shadow);