From 9e571801931f4f9555fc77451f70ebed56dd05b7 Mon Sep 17 00:00:00 2001
From: Muhsin Keloth <muhsinkeramam@gmail.com>
Date: Mon, 22 Apr 2024 21:09:36 +0530
Subject: [PATCH] feat: more style changes

---
 .../personal/NotificationPreferences.vue      | 47 +++++++++----------
 app/javascript/v3/components/Form/Button.vue  | 15 +++++-
 app/javascript/v3/components/Form/Switch.vue  |  7 +--
 3 files changed, 37 insertions(+), 32 deletions(-)

diff --git a/app/javascript/dashboard/routes/dashboard/settings/personal/NotificationPreferences.vue b/app/javascript/dashboard/routes/dashboard/settings/personal/NotificationPreferences.vue
index 57af6e0c9..b13c45eaf 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/personal/NotificationPreferences.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/personal/NotificationPreferences.vue
@@ -9,20 +9,17 @@
             Notification type
           </span>
         </table-header-cell>
-        <table-header-cell :span="3" label="Email">
+        <table-header-cell :span="2" label="Email">
           <span class="text-sm font-medium uppercase text-ash-900">
             Email
           </span>
         </table-header-cell>
-        <table-header-cell :span="3" label="Push notification">
-          <div class="flex flex-row items-center justify-center gap-1">
+        <table-header-cell :span="4" label="Push notification">
+          <div class="flex items-center justify-between gap-2">
             <span class="text-sm font-medium uppercase text-ash-900">
               Push notification
             </span>
-            <!-- <v3-switch
-              :value="!hasEnabledPushPermissions"
-              @input="onRequestPermissions()"
-            /> -->
+            <v3-switch :value="true" @input="onRequestPermissions()" />
           </div>
         </table-header-cell>
       </div>
@@ -37,7 +34,7 @@
           </span>
         </div>
         <div
-          class="flex items-center gap-2 col-span-3 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
+          class="flex items-center gap-2 col-span-2 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
         >
           <input
             v-model="selectedEmailFlags"
@@ -48,7 +45,7 @@
           />
         </div>
         <div
-          class="flex items-center gap-2 col-span-3 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
+          class="flex items-center gap-2 col-span-4 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
         >
           <input
             type="checkbox"
@@ -69,7 +66,7 @@
           </span>
         </div>
         <div
-          class="flex items-center gap-2 col-span-3 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
+          class="flex items-center gap-2 col-span-2 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
         >
           <input
             v-model="selectedEmailFlags"
@@ -80,7 +77,7 @@
           />
         </div>
         <div
-          class="flex items-center gap-2 col-span-3 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
+          class="flex items-center gap-2 col-span-4 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
         >
           <input
             v-model="selectedPushFlags"
@@ -102,7 +99,7 @@
           </span>
         </div>
         <div
-          class="flex items-center gap-2 col-span-3 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
+          class="flex items-center gap-2 col-span-2 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
         >
           <input
             v-model="selectedEmailFlags"
@@ -113,7 +110,7 @@
           />
         </div>
         <div
-          class="flex items-center gap-2 col-span-3 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
+          class="flex items-center gap-2 col-span-4 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
         >
           <input
             v-model="selectedPushFlags"
@@ -135,7 +132,7 @@
           </span>
         </div>
         <div
-          class="flex items-center gap-2 col-span-3 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
+          class="flex items-center gap-2 col-span-2 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
         >
           <input
             v-model="selectedEmailFlags"
@@ -146,7 +143,7 @@
           />
         </div>
         <div
-          class="flex items-center gap-2 col-span-3 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
+          class="flex items-center gap-2 col-span-4 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
         >
           <input
             v-model="selectedPushFlags"
@@ -168,7 +165,7 @@
           </span>
         </div>
         <div
-          class="flex items-center gap-2 col-span-3 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
+          class="flex items-center gap-2 col-span-2 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
         >
           <input
             v-model="selectedEmailFlags"
@@ -179,7 +176,7 @@
           />
         </div>
         <div
-          class="flex items-center gap-2 col-span-3 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
+          class="flex items-center gap-2 col-span-4 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
         >
           <input
             v-model="selectedPushFlags"
@@ -202,7 +199,7 @@
           </span>
         </div>
         <div
-          class="flex items-center gap-2 col-span-3 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
+          class="flex items-center gap-2 col-span-2 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
         >
           <input
             v-model="selectedEmailFlags"
@@ -212,7 +209,7 @@
           />
         </div>
         <div
-          class="flex items-center gap-2 col-span-3 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
+          class="flex items-center gap-2 col-span-4 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
         >
           <input
             v-model="selectedPushFlags"
@@ -235,7 +232,7 @@
           </span>
         </div>
         <div
-          class="flex items-center gap-2 col-span-3 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
+          class="flex items-center gap-2 col-span-2 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
         >
           <input
             v-model="selectedEmailFlags"
@@ -245,7 +242,7 @@
           />
         </div>
         <div
-          class="flex items-center gap-2 col-span-3 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
+          class="flex items-center gap-2 col-span-4 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
         >
           <input
             v-model="selectedPushFlags"
@@ -268,7 +265,7 @@
           </span>
         </div>
         <div
-          class="flex items-center gap-2 col-span-3 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
+          class="flex items-center gap-2 col-span-2 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
         >
           <input
             v-model="selectedEmailFlags"
@@ -278,7 +275,7 @@
           />
         </div>
         <div
-          class="flex items-center gap-2 col-span-3 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
+          class="flex items-center gap-2 col-span-4 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
         >
           <input
             v-model="selectedPushFlags"
@@ -305,12 +302,12 @@ import {
   verifyServiceWorkerExistence,
 } from '../../../../helper/pushHelper';
 import { FEATURE_FLAGS } from 'dashboard/featureFlags';
-// import V3Switch from 'v3/components/Form/Switch.vue';
+import V3Switch from 'v3/components/Form/Switch.vue';
 
 export default {
   components: {
     TableHeaderCell,
-    // V3Switch,
+    V3Switch,
   },
   mixins: [alertMixin, configMixin, uiSettingsMixin],
   data() {
diff --git a/app/javascript/v3/components/Form/Button.vue b/app/javascript/v3/components/Form/Button.vue
index 221a35b32..a64108595 100644
--- a/app/javascript/v3/components/Form/Button.vue
+++ b/app/javascript/v3/components/Form/Button.vue
@@ -81,12 +81,25 @@ const colorClass = computed(() => {
     if (props.variant === 'ghost') {
       return 'text-primary-800 hover:text-primary-600 active:text-primary-600 focus:ring focus:ring-offset-1 focus:ring-primary-400';
     }
-    return 'bg-primary-600 border-primary-600 text-white hover:bg-primary-700 active:bg-primary-700 focus:ring focus:ring-offset-1 focus:ring-primary-400';
+    return 'bg-primary-600 border border-primary-600 text-white hover:bg-primary-700 active:bg-primary-700 focus:ring focus:ring-offset-1 focus:ring-primary-400';
   }
   if (props.colorScheme === 'secondary') {
+    if (props.variant === 'outline') {
+      return 'text-ash-800 border border-ash-400 hover:text-ash-600 active:text-ash-600 focus:ring focus:ring-offset-1 focus:ring-ash-400';
+    }
+    if (props.variant === 'ghost') {
+      return 'text-ash-800 hover:text-ash-600 active:text-ash-600 focus:ring focus:ring-offset-1 focus:ring-ash-400';
+    }
     return 'bg-ash-100 text-ash-900 hover:bg-ash-200 active:bg-ash-200 focus:ring focus:ring-offset-1 focus:ring-ash-400';
   }
   if (props.colorScheme === 'danger') {
+    if (props.variant === 'outline') {
+      return 'text-ruby-800 border border-ruby-400 hover:text-ruby-600 active:text-ruby-600 focus:ring focus:ring-offset-1 focus:ring-ruby-400';
+    }
+    if (props.variant === 'ghost') {
+      return 'text-ruby-800 hover:text-ruby-600 active:text-ruby-600 focus:ring focus:ring-offset-1 focus:ring-ruby-400';
+    }
+
     return 'bg-ruby-600 text-white hover:bg-ruby-700 active:bg-ruby-700 focus:ring focus:ring-offset-1 focus:ring-ruby-400';
   }
   return 'bg-primary-500 text-white';
diff --git a/app/javascript/v3/components/Form/Switch.vue b/app/javascript/v3/components/Form/Switch.vue
index b461ca34a..d044531d7 100644
--- a/app/javascript/v3/components/Form/Switch.vue
+++ b/app/javascript/v3/components/Form/Switch.vue
@@ -1,7 +1,7 @@
 <template>
   <button
     type="button"
-    class="p-0 toggle-button"
+    class="p-0 toggle-button bg-primary-600"
     :class="{ active: value, small: size === 'small' }"
     role="switch"
     :aria-checked="value.toString()"
@@ -26,7 +26,6 @@ export default {
 </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;
@@ -42,10 +41,6 @@ export default {
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   width: 34px;
 
-  &.active {
-    background-color: var(--w-500);
-  }
-
   &.small {
     width: 22px;
     height: 14px;