feat: Dark Mode (#7471)

app/javascript/dashboard/components/widgets/conversation/bubble/Actions.vue

@@ -256,25 +256,25 @@ export default {
 <style lang="scss" scoped>
 .right {
   .message-text--metadata {
-    align-items: center;
+    @apply items-center;
     .time {
-      color: var(--w-100);
+      @apply text-woot-100 dark:text-woot-100;
     }
 
     .action--icon {
-      color: var(--white);
+      @apply text-white dark:text-white;
 
       &.read-tick {
-        color: var(--v-100);
+        @apply text-violet-100 dark:text-violet-100;
       }
 
       &.read-indicator {
-        color: var(--g-200);
+        @apply text-green-200 dark:text-green-200;
       }
     }
 
     .lock--icon--private {
-      color: var(--s-400);
+      @apply text-slate-400 dark:text-slate-400;
     }
   }
 }
@@ -282,41 +282,31 @@ export default {
 .left {
   .message-text--metadata {
     .time {
-      color: var(--s-400);
+      @apply text-slate-400 dark:text-slate-200;
     }
   }
 }
 
 .message-text--metadata {
-  align-items: flex-start;
-  display: flex;
+  @apply items-start flex;
 
   .time {
-    margin-right: var(--space-small);
-    display: block;
-    font-size: var(--font-size-micro);
-    line-height: 1.8;
+    @apply mr-2 block text-xxs leading-[1.8];
   }
 
   .action--icon {
-    margin-right: var(--space-small);
-    margin-left: var(--space-small);
-    color: var(--s-900);
+    @apply mr-2 ml-2 text-slate-900 dark:text-slate-100;
   }
 
   a {
-    color: var(--s-900);
+    @apply text-slate-900 dark:text-slate-100;
   }
 }
 
 .activity-wrap {
   .message-text--metadata {
     .time {
-      color: var(--s-300);
-      display: flex;
-      text-align: center;
-      font-size: var(--font-size-micro);
-      margin-left: 0;
+      @apply ml-2 rtl:mr-2 rtl:ml-0 flex text-center text-xxs text-slate-300 dark:text-slate-200;
     }
   }
 }
@@ -325,35 +315,28 @@ export default {
 .is-video {
   .message-text--metadata {
     .time {
-      bottom: var(--space-smaller);
-      color: var(--white);
-      position: absolute;
-      right: var(--space-small);
-      white-space: nowrap;
+      @apply bottom-1 text-white dark:text-slate-50 absolute right-2 whitespace-nowrap;
 
       &.has-status-icon {
-        right: var(--space-large);
-        line-height: 2;
+        @apply right-8 leading-loose;
       }
     }
     .read-tick {
-      position: absolute;
-      bottom: var(--space-small);
-      right: var(--space-small);
+      @apply absolute bottom-2 right-2;
     }
   }
 }
 
 .is-private {
   .message-text--metadata {
-    align-items: center;
+    @apply items-center;
 
     .time {
-      color: var(--s-400);
+      @apply text-slate-400 dark:text-slate-400;
     }
 
     .icon {
-      color: var(--s-400);
+      @apply text-slate-400 dark:text-slate-400;
     }
   }
 
@@ -361,18 +344,16 @@ export default {
   &.is-video {
     .time {
       position: inherit;
-      padding-left: var(--space-one);
+      @apply pl-2.5;
     }
   }
 }
 
 .delivered-icon {
-  margin-left: -var(--space-normal);
+  @apply ml-4;
 }
 
 .read-indicator-wrap {
-  line-height: 1;
-  display: flex;
-  align-items: center;
+  @apply leading-none flex items-center;
 }
 </style>

app/javascript/dashboard/components/widgets/conversation/bubble/Contact.vue

@@ -2,7 +2,9 @@
   <div class="contact--group">
     <fluent-icon icon="call" class="file--icon" size="18" />
     <div class="meta">
-      <p class="text-truncate margin-bottom-0">
+      <p
+        class="overflow-hidden whitespace-nowrap text-ellipsis margin-bottom-0"
+      >
         {{ phoneNumber }}
       </p>
     </div>

app/javascript/dashboard/components/widgets/conversation/bubble/Location.vue

@@ -4,7 +4,9 @@
       <fluent-icon icon="location" class="file--icon" size="32" />
     </div>
     <div class="meta">
-      <h5 class="text-block-title text-truncate">
+      <h5
+        class="text-block-title overflow-hidden whitespace-nowrap text-ellipsis"
+      >
         {{ name }}
       </h5>
       <div class="link-wrap">
@@ -47,32 +49,22 @@ export default {
 
 <style lang="scss" scoped>
 .location {
-  display: flex;
-  flex-direction: row;
-  padding: var(--space-smaller) 0;
-  cursor: pointer;
+  @apply flex flex-row py-1 px-0 cursor-pointer;
 
   .icon-wrap {
-    color: var(--s-600);
-    line-height: 1;
-    margin: 0 var(--space-smaller);
+    @apply text-slate-600 dark:text-slate-200 leading-none my-0 mx-1;
   }
 
   .text-block-title {
-    margin: 0;
-    color: var(--s-800);
-    word-break: break-word;
+    @apply m-0 text-slate-800 dark:text-slate-100 break-words;
   }
 
   .meta {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    padding-right: var(--space-normal);
+    @apply flex flex-col items-center pr-4;
   }
 
   .link-wrap {
-    display: flex;
+    @apply flex;
   }
 }
 </style>