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;
-  bottom: -40px;
-  left: -320px;
-  right: unset;
+  @apply top-[unset] -bottom-10 -left-80 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;
-  right: -320px;
+  @apply left-[unset] -right-80;
   &::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;
-  bottom: var(--space-jumbo);
-  position: absolute;
-  z-index: var(--z-index-normal);
+  @apply left-[unset] bottom-0 absolute z-[100];
 
   &::before {
     transform: rotate(0deg);
-    left: var(--space-smaller);
-    bottom: var(--space-minus-small);
+    @apply left-1 -bottom-2;
   }
 }
 .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;