feat: Dark Mode (PR -12) (#7590)

app/javascript/dashboard/components/layout/sidebarComponents/AccountContext.vue

@@ -1,18 +1,20 @@
 <template>
   <div
     v-if="showShowCurrentAccountContext"
-    class="rounded-md text-xs py-2 px-2 mt-2 relative border border-slate-50 dark:border-slate-800/50 hover:bg-slate-50 dark:hover:bg-slate-700 cursor-pointer"
+    class="text-slate-700 dark:text-slate-200 rounded-md text-xs py-2 px-2 mt-2 relative border border-slate-50 dark:border-slate-800/50 hover:bg-slate-50 dark:hover:bg-slate-700 cursor-pointer"
     @mouseover="setShowSwitch"
     @mouseleave="resetShowSwitch"
   >
     {{ $t('SIDEBAR.CURRENTLY_VIEWING_ACCOUNT') }}
-    <p class="text-ellipsis font-medium mb-0">
+    <p
+      class="text-ellipsis overflow-hidden whitespace-nowrap font-medium mb-0 text-slate-800 dark:text-slate-100"
+    >
       {{ account.name }}
     </p>
     <transition name="fade">
       <div
         v-if="showSwitchButton"
-        class="bg-gradient-to-r rtl:bg-gradient-to-l from-transparent via-white dark:via-slate-700 to-white dark:to-slate-700 flex items-center h-full justify-end absolute top-0 right-0 w-full"
+        class="ltr:overlay-shadow ltr:dark:overlay-shadow-dark rtl:rtl-overlay-shadow rtl:dark:rtl-overlay-shadow-dark flex items-center h-full justify-end absolute top-0 right-0 w-full"
       >
         <div class="my-0 mx-2">
           <woot-button
@@ -54,7 +56,41 @@ export default {
   },
 };
 </script>
-<style scoped lang="scss">
+<style scoped>
+@tailwind components;
+@layer components {
+  .overlay-shadow {
+    background-image: linear-gradient(
+      to right,
+      rgba(255, 255, 255, 0) 0%,
+      rgba(255, 255, 255, 1) 50%
+    );
+  }
+
+  .overlay-shadow-dark {
+    background-image: linear-gradient(
+      to right,
+      rgba(0, 0, 0, 0) 0%,
+      rgb(55, 84, 109) 50%
+    );
+  }
+
+  .rtl-overlay-shadow {
+    background-image: linear-gradient(
+      to left,
+      rgba(255, 255, 255, 0) 0%,
+      rgba(255, 255, 255, 1) 50%
+    );
+  }
+
+  .rtl-overlay-shadow-dark {
+    background-image: linear-gradient(
+      to left,
+      rgba(0, 0, 0, 0) 0%,
+      rgb(55, 84, 109) 50%
+    );
+  }
+}
 .fade-enter-active,
 .fade-leave-active {
   transition: opacity 300ms ease;
@@ -62,6 +98,6 @@ export default {
 
 .fade-enter,
 .fade-leave-to {
-  opacity: 0;
+  @apply opacity-0;
 }
 </style>

app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue

@@ -342,7 +342,7 @@ export default {
   label {
     @apply cursor-pointer;
   }
-  &:hover .button {
+  &:hover button {
     @apply dark:bg-slate-800 bg-slate-100;
   }
 }

app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue

@@ -1122,41 +1122,29 @@ export default {
 }
 
 .emoji-dialog {
-  top: unset;
+  @apply top-[unset] -bottom-10 -left-80 right-[unset];
-  bottom: -40px;
-  left: -320px;
-  right: unset;
 
   &::before {
-    right: var(--space-minus-normal);
-    bottom: var(--space-small);
     transform: rotate(270deg);
     filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.08));
+    @apply -right-4 bottom-2 rtl:right-0 rtl:-left-4;
   }
 }
 
 .emoji-dialog--rtl {
-  left: unset;
+  @apply left-[unset] -right-80;
-  right: -320px;
   &::before {
-    left: var(--space-minus-normal);
     transform: rotate(90deg);
-    right: 0;
-    bottom: var(--space-small);
     filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.08));
   }
 }
 
 .emoji-dialog--expanded {
-  left: unset;
+  @apply left-[unset] bottom-0 absolute z-[100];
-  bottom: var(--space-jumbo);
-  position: absolute;
-  z-index: var(--z-index-normal);
 
   &::before {
     transform: rotate(0deg);
-    left: var(--space-smaller);
+    @apply left-1 -bottom-2;
-    bottom: var(--space-minus-small);
   }
 }
 .message-signature {

app/javascript/dashboard/components/widgets/conversation/WhatsappTemplates/TemplatesPicker.vue

@@ -21,7 +21,9 @@
               <p class="label-title">
                 {{ template.name }}
               </p>
-              <span class="label-lang label">
+              <span
+                class="inline-block py-1 px-2 rounded-sm text-xs leading-none cursor-default bg-white dark:bg-slate-700 text-slate-800 dark:text-slate-100"
+              >
                 {{ $t('WHATSAPP_TEMPLATES.PICKER.LABELS.LANGUAGE') }} :
                 {{ template.language }}
               </span>
@@ -114,7 +116,7 @@ export default {
   @apply bg-slate-25 dark:bg-slate-900 rounded-md max-h-[18.75rem] overflow-y-auto p-2.5;
 
   .template__list-item {
-    @apply rounded-lg cursor-pointer block p-2.5 text-left w-full hover:bg-woot-50 dark:hover:bg-slate-600;
+    @apply rounded-lg cursor-pointer block p-2.5 text-left w-full hover:bg-woot-50 dark:hover:bg-slate-800;
 
     .label-title {
       @apply text-sm;

app/javascript/dashboard/modules/notes/components/AddNote.vue

@@ -1,12 +1,14 @@
 <template>
-  <div class="card">
+  <div
+    class="flex flex-col mb-2 p-4 border border-solid border-slate-75 dark:border-slate-700 overflow-hidden rounded-md flex-grow shadow-sm bg-white dark:bg-slate-900 text-slate-700 dark:text-slate-100"
+  >
     <woot-message-editor
       v-model="noteContent"
       class="input--note"
       :placeholder="$t('NOTES.ADD.PLACEHOLDER')"
       :enable-suggestions="false"
     />
-    <div class="footer">
+    <div class="flex justify-end w-full">
       <woot-button
         color-scheme="warning"
         :title="$t('NOTES.ADD.TITLE')"
@@ -75,10 +77,4 @@ export default {
     max-height: 22.5rem;
   }
 }
-
-.footer {
-  display: flex;
-  justify-content: flex-end;
-  width: 100%;
-}
 </style>

app/javascript/dashboard/modules/notes/components/ContactNote.vue

@@ -1,20 +1,28 @@
 <template>
-  <div class="card note-wrap">
+  <div
-    <div class="header">
+    class="flex flex-col mb-2 p-4 border border-solid border-slate-75 dark:border-slate-700 overflow-hidden rounded-md flex-grow shadow-sm bg-white dark:bg-slate-900 text-slate-700 dark:text-slate-100 note-wrap"
-      <div class="meta">
+  >
+    <div class="flex justify-between items-end text-xs gap-1">
+      <div class="flex items-center">
         <thumbnail
           :title="noteAuthorName"
           :src="noteAuthor.thumbnail"
           :username="noteAuthorName"
           size="20px"
         />
-        <div class="date-wrap">
+        <div class="my-0 mx-1 p-0.5 flex flex-row gap-1">
-          <span class="fw-medium"> {{ noteAuthorName }} </span>
+          <span class="font-medium text-slate-800 dark:text-slate-100">
-          <span> {{ $t('NOTES.LIST.LABEL') }} </span>
+            {{ noteAuthorName }}
-          <span class="fw-medium time-stamp"> {{ readableTime }} </span>
+          </span>
+          <span class="text-slate-700 dark:text-slate-100">
+            {{ $t('NOTES.LIST.LABEL') }}
+          </span>
+          <span class="font-medium text-slate-700 dark:text-slate-100">
+            {{ readableTime }}
+          </span>
         </div>
       </div>
-      <div class="actions">
+      <div class="actions flex invisible">
         <woot-button
           v-tooltip="$t('NOTES.CONTENT_HEADER.DELETE')"
           variant="smooth"
@@ -35,7 +43,10 @@
         :reject-text="$t('DELETE_NOTE.CONFIRM.NO')"
       />
     </div>
-    <p v-dompurify-html="formatMessage(note || '')" class="note__content" />
+    <p
+      v-dompurify-html="formatMessage(note || '')"
+      class="note__content mt-4"
+    />
   </div>
 </template>
 
@@ -116,39 +127,9 @@ export default {
   }
 }
 
-.note__content {
-  margin-top: var(--space-normal);
-}
-
-.header {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-end;
-  font-size: var(--font-size-mini);
-
-  .meta {
-    display: flex;
-    align-items: center;
-
-    .date-wrap {
-      margin: 0 var(--space-smaller);
-      padding: var(--space-micro);
-      color: var(--color-body);
-    }
-  }
-  .actions {
-    display: flex;
-    visibility: hidden;
-
-    .button {
-      margin-left: var(--space-small);
-    }
-  }
-}
-
 .note-wrap:hover {
   .actions {
-    visibility: visible;
+    @apply visible;
   }
 }
 </style>

app/javascript/dashboard/routes/dashboard/contacts/components/ContactInfoPanel.vue

@@ -152,7 +152,7 @@ export default {
   }
 }
 .contact--panel {
-  @apply border-r border-slate-50 dark:border-slate-700 h-full text-sm overflow-y-auto relative;
+  @apply border-r border-slate-50 dark:border-slate-800/50 h-full text-sm overflow-y-auto relative;
 }
 
 .list-group {

app/javascript/dashboard/routes/dashboard/contacts/pages/ContactManageView.vue

@@ -1,5 +1,7 @@
 <template>
-  <div class="view-box columns bg-white">
+  <div
+    class="flex justify-between flex-col h-full m-0 flex-1 bg-white dark:bg-slate-900"
+  >
     <settings-header
       button-route="new"
       :header-title="contact.name"
@@ -13,28 +15,22 @@
         :src="contact.thumbnail"
         :username="contact.name"
         size="32px"
-        class="margin-right-1"
+        class="mr-2 rtl:mr-0 rtl:ml-2"
       />
     </settings-header>
 
-    <div
+    <div v-if="uiFlags.isFetchingItem" class="text-center p-4 text-base h-full">
-      v-if="uiFlags.isFetchingItem"
-      class="text-center p-normal fs-default h-full"
-    >
       <spinner size="" />
       <span>{{ $t('CONTACT_PROFILE.LOADING') }}</span>
     </div>
-    <div
+    <div v-else-if="contact.id" class="overflow-hidden flex-1 min-w-0">
-      v-else-if="contact.id"
+      <div class="flex flex-wrap ml-auto mr-auto max-w-full h-full">
-      class="overflow-hidden column contact--dashboard-content"
-    >
-      <div class="row h-full">
         <contact-info-panel
           :show-close-button="false"
           :show-avatar="false"
           :contact="contact"
         />
-        <div class="small-12 medium-9 h-full">
+        <div class="w-[75%] h-full">
           <woot-tabs :index="selectedTabIndex" @change="onClickTabChange">
             <woot-tabs-item
               v-for="tab in tabs"
@@ -43,7 +39,9 @@
               :show-badge="false"
             />
           </woot-tabs>
-          <div class="tab-content overflow-auto">
+          <div
+            class="bg-slate-25 dark:bg-slate-800 h-[calc(100%-40px)] p-4 overflow-auto"
+          >
             <contact-notes
               v-if="selectedTabIndex === 0"
               :contact-id="Number(contactId)"
@@ -119,22 +117,3 @@ export default {
   },
 };
 </script>
-
-<style lang="scss" scoped>
-@import '~dashboard/assets/scss/mixins';
-
-.left {
-  @apply border-r border-slate-50 dark:border-slate-700;
-  overflow: auto;
-}
-
-.right {
-  padding: var(--space-normal);
-}
-
-.tab-content {
-  background: var(--color-background-light);
-  height: calc(100% - 40px);
-  padding: var(--space-normal);
-}
-</style>

app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/ListAllCategories.vue

@@ -1,13 +1,15 @@
 <template>
-  <div class="category-list--container">
+  <div class="w-full pl-4">
-    <header>
+    <header class="flex justify-between items-center mb-4">
-      <div class="header-left--wrap">
+      <div class="flex items-center w-full gap-3">
-        <label class="sub-block-title header-text">{{
+        <label
-          $t('HELP_CENTER.PORTAL.EDIT.CATEGORIES.TITLE')
+          class="font-normal mb-0 text-base text-slate-800 dark:text-slate-100"
-        }}</label>
+        >
+          {{ $t('HELP_CENTER.PORTAL.EDIT.CATEGORIES.TITLE') }}
+        </label>
         <select
           :value="currentLocaleCode"
-          class="row small-2 select-locale"
+          class="w-[15%] select-locale"
           @change="changeCurrentCategory"
         >
           <option
@@ -19,7 +21,7 @@
           </option>
         </select>
       </div>
-      <div class="header-right--wrap">
+      <div class="flex-none items-center">
         <woot-button
           size="small"
           variant="smooth"
@@ -168,38 +170,7 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-.category-list--container {
+.select-locale {
-  width: 100%;
+  @apply h-8 mb-0 py-0.5;
-  padding-left: var(--space-normal);
-
-  header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: var(--space-normal);
-
-    .header-left--wrap {
-      display: flex;
-      align-items: center;
-      width: 100%;
-
-      .header-text {
-        font-weight: var(--font-weight-normal);
-        margin-right: var(--space-slab);
-        margin-bottom: 0;
-      }
-    }
-
-    .header-right--wrap {
-      flex: none;
-      align-items: center;
-    }
-    .select-locale {
-      height: var(--space-large);
-      margin-bottom: 0;
-      padding-top: var(--space-micro);
-      padding-bottom: var(--space-micro);
-    }
-  }
 }
 </style>

app/javascript/shared/components/emoji/EmojiInput.vue

@@ -1,12 +1,15 @@
 <template>
-  <div role="dialog" class="emoji-dialog">
+  <div
-    <div class="emoji-list--wrap">
+    role="dialog"
+    class="emoji-dialog bg-white shadow-lg dark:bg-slate-900 rounded-md border border-solid border-slate-75 dark:border-slate-800/50 box-content h-[300px] absolute right-0 -top-[95px] w-80 z-20"
+  >
+    <div class="flex flex-col">
       <div class="emoji-search--wrap">
         <input
           ref="searchbar"
           v-model="search"
           type="text"
-          class="emoji-search--input"
+          class="emoji-search--input focus:box-shadow-blue dark:focus:box-shadow-blue-dark"
           :placeholder="$t('EMOJI.PLACEHOLDER')"
         />
       </div>
@@ -59,7 +62,11 @@
               :class="{ active: selectedKey === 'Search' }"
               @click="changeCategory('Search')"
             >
-              <fluent-icon icon="search" size="16" />
+              <fluent-icon
+                icon="search"
+                size="16"
+                class="text-slate-700 dark:text-slate-100"
+              />
             </button>
           </li>
           <li
@@ -158,168 +165,95 @@ export default {
   },
 };
 </script>
-<style lang="scss">
+<style scoped>
-/**
+@tailwind components;
- * All the units used below are pixels due to variable name conflict in widget and dashboard
+@layer components {
- **/
+  .box-shadow-blue {
-@import '~dashboard/assets/scss/variables';
+    box-shadow: 0 0 0 1px #1f93ff, 0 0 2px 3px #c7e3ff;
-@import '~dashboard/assets/scss/mixins';
+  }
 
-$space-smaller: 4px;
+  .box-shadow-blue-dark {
-$space-small: 8px;
+    box-shadow: 0 0 0 1px #1f93ff, 0 0 2px 3px #37546d;
-$space-slab: 12px;
-$space-normal: 16px;
-$space-two: 20px;
-$space-medium: 24px;
-$space-large: 28px;
-$space-larger: 32px;
-
-$font-size-tiny: 12px;
-$font-size-small: 14px;
-$font-size-default: 16px;
-$font-size-medium: 18px;
-
-$color-bg: #ebf0f5;
-
-$border-radius-normal: 5px;
-
-.emoji-dialog {
-  @include elegant-card;
-  background: $color-white;
-  border-radius: $space-small;
-  box-sizing: content-box;
-  height: 300px;
-  position: absolute;
-  right: 0;
-  top: -95px;
-  width: 320px;
-  z-index: 1;
-
-  &::before {
-    @include arrow(bottom, $color-bg, $space-slab);
-    bottom: -$space-slab;
-    position: absolute;
-    right: $space-two;
   }
 }
+</style>
+<style lang="scss">
+@import '~dashboard/assets/scss/mixins';
 
-.emoji-list--wrap {
+.emoji-dialog {
-  display: flex;
+  &::before {
-  flex-direction: column;
+    $space-slab: 12px;
+
+    @media (prefers-color-scheme: dark) {
+      $color-bg-dark: #293f51;
+      @include arrow(bottom, $color-bg-dark, $space-slab);
+    }
+    @media (prefers-color-scheme: light) {
+      $color-bg: #ebf0f5;
+      @include arrow(bottom, $color-bg, $space-slab);
+    }
+
+    @apply -bottom-3 absolute right-5;
+  }
 }
 
 .emoji--item {
-  background: transparent;
+  @apply bg-transparent border-0 rounded cursor-pointer text-lg h-6 m-0 py-0 px-1 hover:bg-slate-75 dark:hover:bg-slate-800;
-  border: 0;
-  border-radius: $space-smaller;
-  cursor: pointer;
-  font-size: $font-size-medium;
-  height: $space-medium;
-  margin: 0;
-  padding: 0 $space-smaller;
-
-  &:hover {
-    background: var(--s-75);
-  }
 }
 
 .emoji--row {
-  box-sizing: border-box;
+  @apply box-border p-1;
-  padding: $space-smaller;
 
   .emoji--item {
-    height: 26px;
+    @apply h-[26px] w-[26px] leading-normal m-1;
-    line-height: 1.5;
-    margin: $space-smaller;
-    width: 26px;
   }
 }
 
 .emoji-search--wrap {
-  margin: $space-small;
+  @apply m-2 sticky top-2;
-  position: sticky;
-  top: $space-small;
 
   .emoji-search--input {
-    background-color: $color-bg;
+    @apply text-sm focus-visible:border-transparent text-slate-800 dark:text-slate-100 h-8 m-0 p-2 w-full rounded-md bg-slate-75 dark:bg-slate-800 border border-solid border-transparent dark:border-slate-800/50;
-    border: 1px solid transparent;
-    border-radius: $border-radius-normal;
-    font-size: $font-size-small;
-    height: $space-larger;
-    margin: 0;
-    padding: $space-small;
-    width: 100%;
-
-    &:focus {
-      box-shadow: 0 0 0 1px $color-woot, 0 0 2px 3px $color-primary-light;
-    }
   }
 }
 
 .empty-message {
-  align-items: center;
+  @apply items-center flex flex-col h-[212px] justify-center;
-  display: flex;
-  flex-direction: column;
-  height: 212px;
-  justify-content: center;
 
   .emoji-icon {
-    color: var(--s-200);
+    @apply text-slate-200 dark:text-slate-200 mb-2;
-    margin-bottom: $space-small;
   }
   .empty-message--text {
-    color: var(--s-200);
+    @apply text-slate-200 dark:text-slate-200 text-sm font-medium;
-    font-size: $font-size-small;
-    font-weight: 500;
   }
 }
 
 .emoji-item {
-  height: 212px;
+  @apply h-[212px] overflow-y-auto;
-  overflow-y: auto;
 }
 
 .emoji-category--title {
-  color: $color-heading;
+  @apply text-slate-800 text-sm dark:text-slate-100 font-medium leading-normal m-0 py-1 px-2 capitalize;
-  font-size: $font-size-small;
-  font-weight: 500;
-  line-height: 1.5;
-  margin: 0;
-  padding: $space-smaller $space-small;
-  text-transform: capitalize;
 }
 
 .emoji-dialog--footer {
-  background-color: $color-bg;
+  @apply relative w-[322px] -left-px rtl:left-[unset] rtl:-right-px bottom-0 py-0 rounded-b-md border-b border-solid border-slate-75 dark:border-slate-800/50 px-1 bg-slate-75 dark:bg-slate-800;
-  bottom: 0;
-  padding: 0 $space-smaller;
-  position: sticky;
 
   ul {
-    display: flex;
+    @apply flex relative left-[2px] rtl:left-[unset] rtl:right-[2px] list-none m-0 overflow-auto py-1 px-0;
-    list-style: none;
-    margin: 0;
-    overflow: auto;
-    padding: $space-smaller 0;
 
     > li {
-      align-items: center;
+      @apply items-center cursor-pointer flex justify-center p-1;
-      cursor: pointer;
-      display: flex;
-      justify-content: center;
-      padding: $space-smaller;
     }
 
     li .active {
-      background: $color-white;
+      @apply bg-white dark:bg-slate-900;
     }
     .emoji--item {
-      align-items: center;
+      @apply items-center flex text-sm;
-      display: flex;
-      font-size: $font-size-small;
 
       &:hover {
-        background: $color-bg;
+        @apply bg-slate-75 dark:bg-slate-900;
       }
     }
   }