From fdc2c5834b20393af85a75fe728363e78e11cfc8 Mon Sep 17 00:00:00 2001
From: Muhsin Keloth <muhsinkeramam@gmail.com>
Date: Mon, 22 Apr 2024 11:17:53 +0530
Subject: [PATCH] chore: more design updates

---
 .../dashboard/assets/scss/widgets/_base.scss  |  2 +-
 .../assets/scss/widgets/_buttons.scss         |  2 +-
 .../settings/personal/HotKeyCard.vue          | 26 +++---
 .../dashboard/settings/personal/Index.vue     |  2 +-
 .../personal/NotificationPreferences.vue      |  8 +-
 .../personal/NotificationSettings.vue         | 56 ++++++-------
 .../settings/personal/UserBasicProfile.vue    |  2 +-
 app/javascript/v3/components/Form/Select.vue  |  2 +-
 app/javascript/v3/components/Form/Switch.vue  | 81 +++++++++++++++++++
 .../v3/components/Form/WithLabel.vue          |  6 +-
 10 files changed, 134 insertions(+), 53 deletions(-)
 create mode 100644 app/javascript/v3/components/Form/Switch.vue

diff --git a/app/javascript/dashboard/assets/scss/widgets/_base.scss b/app/javascript/dashboard/assets/scss/widgets/_base.scss
index b247d69df..51294a077 100644
--- a/app/javascript/dashboard/assets/scss/widgets/_base.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_base.scss
@@ -105,7 +105,7 @@ textarea {
 }
 
 .error {
-  input,
+  input:not(.reset-base),
   input:not([type]),
   textarea,
   select,
diff --git a/app/javascript/dashboard/assets/scss/widgets/_buttons.scss b/app/javascript/dashboard/assets/scss/widgets/_buttons.scss
index e6702b37a..cdb0a6e72 100644
--- a/app/javascript/dashboard/assets/scss/widgets/_buttons.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_buttons.scss
@@ -1,6 +1,6 @@
 // scss-lint:disable SpaceAfterPropertyColon
 // scss-lint:disable MergeableSelector
-button:not(.reset-base) {
+.button {
   font-family: inherit;
   transition:
     background-color 0.25s ease-out,
diff --git a/app/javascript/dashboard/routes/dashboard/settings/personal/HotKeyCard.vue b/app/javascript/dashboard/routes/dashboard/settings/personal/HotKeyCard.vue
index 1fd84e6c0..00a9427ad 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/personal/HotKeyCard.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/personal/HotKeyCard.vue
@@ -1,18 +1,15 @@
 <template>
   <div
-    class="flex flex-col min-w-[15rem] max-h-[21.25rem] sm:w-[23rem] rounded-md border border-solid border-ash-200"
+    class="flex flex-col gap-4 w-full h-[220px] md:max-h-[220px] p-4 md:w-[350px] rounded-md border border-solid border-ash-200"
     :class="{
       'border border-solid border-primary-300 ': active,
     }"
   >
-    <div
-      class="flex justify-between items-center px-2 w-full h-10 rounded-t-[5px]"
-    >
-      <div class="flex items-center p-1 text-base font-medium text-ash-900">
-        {{ heading }}
-      </div>
-      <div>
-        <!-- Show radio button, if the card is active, set radio button checked -->
+    <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">
+        <div class="flex items-center text-base font-medium text-ash-900">
+          {{ heading }}
+        </div>
         <input
           :checked="active"
           type="radio"
@@ -20,13 +17,12 @@
           @change="$emit('update', 'enter')"
         />
       </div>
+      <span class="text-ash-900 text-sm leading-[1.4] text-start">
+        {{ content }}
+      </span>
     </div>
-    <div
-      class="text-slate-700 dark:text-slate-200 text-sm leading-[1.4] px-3 pb-0 text-start"
-    >
-      {{ content }}
-    </div>
-    <div v-if="src" class="p-3">
+
+    <div v-if="src">
       <img :src="src" class="object-cover w-full" />
     </div>
     <slot v-else />
diff --git a/app/javascript/dashboard/routes/dashboard/settings/personal/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/personal/Index.vue
index 73b721c7a..db9be65bf 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/personal/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/personal/Index.vue
@@ -3,7 +3,7 @@
     <div
       class="flex flex-col h-full p-5 pt-16 mx-auto my-0 bg-white dark:bg-slate-900 font-inter"
     >
-      <div class="flex flex-col gap-16 sm:max-w-3xl">
+      <div class="flex flex-col gap-16 sm:max-w-[720px]">
         <div class="flex flex-col gap-6">
           <h2 class="mt-4 text-2xl font-medium text-ash-900">
             Profile Settings
diff --git a/app/javascript/dashboard/routes/dashboard/settings/personal/NotificationPreferences.vue b/app/javascript/dashboard/routes/dashboard/settings/personal/NotificationPreferences.vue
index f884a42b9..ab3644e6b 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/personal/NotificationPreferences.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/personal/NotificationPreferences.vue
@@ -14,15 +14,15 @@
             Email
           </span>
         </table-header-cell>
-        <table-header-cell :span="3" label="Push notification">
+        <table-header-cell :span="4" label="Push notification">
           <div class="flex flex-row items-center justify-center gap-1">
             <span class="text-sm font-medium uppercase text-ash-900">
               Push notification
             </span>
-            <!-- <woot-switch
+            <v3-switch
               :value="!hasEnabledPushPermissions"
               @input="onRequestPermissions()"
-            /> -->
+            />
           </div>
         </table-header-cell>
       </div>
@@ -305,10 +305,12 @@ import {
   verifyServiceWorkerExistence,
 } from '../../../../helper/pushHelper';
 import { FEATURE_FLAGS } from 'dashboard/featureFlags';
+import V3Switch from 'v3/components/Form/Switch.vue';
 
 export default {
   components: {
     TableHeaderCell,
+    V3Switch,
   },
   mixins: [alertMixin, configMixin, uiSettingsMixin],
   data() {
diff --git a/app/javascript/dashboard/routes/dashboard/settings/personal/NotificationSettings.vue b/app/javascript/dashboard/routes/dashboard/settings/personal/NotificationSettings.vue
index eb3a1ca1c..08bf09cb1 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/personal/NotificationSettings.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/personal/NotificationSettings.vue
@@ -33,7 +33,7 @@
           <input
             id="audio_enable_alert_none"
             v-model="enableAudioAlerts"
-            class="notification--checkbox"
+            class="notification--checkbox accent-primary-600"
             type="radio"
             value="none"
             @input="handleAudioInput"
@@ -51,7 +51,7 @@
           <input
             id="audio_enable_alert_mine"
             v-model="enableAudioAlerts"
-            class="notification--checkbox"
+            class="notification--checkbox accent-primary-600"
             type="radio"
             value="mine"
             @input="handleAudioInput"
@@ -67,7 +67,7 @@
           <input
             id="audio_enable_alert_all"
             v-model="enableAudioAlerts"
-            class="notification--checkbox"
+            class="notification--checkbox accent-primary-600"
             type="radio"
             value="all"
             @input="handleAudioInput"
@@ -87,30 +87,32 @@
       >
         Alert conditions
       </label>
-      <div class="flex flex-row items-center justify-start gap-2">
-        <input
-          id="audio_alert_when_tab_is_inactive"
-          v-model="playAudioWhenTabIsInactive"
-          type="checkbox"
-          value="tab_is_inactive"
-          class="m-0 border-[1.5px] 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-woot-600 dark:checked:bg-woot-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]"
-          @input="handleAudioAlertConditions"
-        />
-        <label>
-          Send audio alerts only if the browser window is not active
-        </label>
-      </div>
-      <div class="flex flex-row items-center justify-start gap-2">
-        <input
-          v-model="alertIfUnreadConversationExist"
-          class="m-0 border-[1.5px] 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-woot-600 dark:checked:bg-woot-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]"
-          type="checkbox"
-          value="conversations_are_read"
-          @input="handleAudioAlertConditions"
-        />
-        <label>
-          Send alerts every 30s until all the assigned conversations are read
-        </label>
+      <div class="flex flex-col gap-2">
+        <div class="flex flex-row items-start gap-2">
+          <input
+            id="audio_alert_when_tab_is_inactive"
+            v-model="playAudioWhenTabIsInactive"
+            type="checkbox"
+            value="tab_is_inactive"
+            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]"
+            @input="handleAudioAlertConditions"
+          />
+          <label class="text-sm font-normal text-ash-900">
+            Send audio alerts only if the browser window is not active
+          </label>
+        </div>
+        <div class="flex flex-row items-start gap-2">
+          <input
+            v-model="alertIfUnreadConversationExist"
+            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]"
+            type="checkbox"
+            value="conversations_are_read"
+            @input="handleAudioAlertConditions"
+          />
+          <label class="text-sm font-normal text-ash-900">
+            Send alerts every 30s until all the assigned conversations are read
+          </label>
+        </div>
       </div>
     </div>
   </div>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/personal/UserBasicProfile.vue b/app/javascript/dashboard/routes/dashboard/settings/personal/UserBasicProfile.vue
index 43e2a1733..ac250dbd1 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/personal/UserBasicProfile.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/personal/UserBasicProfile.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <div class="flex flex-col gap-2">
-      <span class="font-medium text-ash-90"> Profile picture </span>
+      <span class="text-sm font-medium text-ash-900"> Profile picture </span>
       <div
         class="relative rounded-xl h-[72px] w-[72px] cursor-pointer"
         :title="name"
diff --git a/app/javascript/v3/components/Form/Select.vue b/app/javascript/v3/components/Form/Select.vue
index 793fa5134..67a311b04 100644
--- a/app/javascript/v3/components/Form/Select.vue
+++ b/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">
diff --git a/app/javascript/v3/components/Form/Switch.vue b/app/javascript/v3/components/Form/Switch.vue
new file mode 100644
index 000000000..b461ca34a
--- /dev/null
+++ b/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>
diff --git a/app/javascript/v3/components/Form/WithLabel.vue b/app/javascript/v3/components/Form/WithLabel.vue
index f554c56a9..a88db5c8e 100644
--- a/app/javascript/v3/components/Form/WithLabel.vue
+++ b/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>