feat: Dark Mode (#7471)

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

@@ -1,9 +1,13 @@
 <template>
-  <div class="conv-header flex-col md:flex-row">
+  <div
+    class="bg-white dark:bg-slate-900 flex justify-between items-center py-2 px-4 border-b border-slate-50 dark:border-slate-800/50 flex-col md:flex-row"
+  >
     <div
       class="flex-1 w-100 flex flex-col md:flex-row items-center justify-center"
     >
-      <div class="user">
+      <div
+        class="flex justify-center items-center mr-4 rtl:mr-0 rtl:ml-4 min-w-0"
+      >
         <back-button v-if="showBackButton" :back-url="backButtonUrl" />
         <Thumbnail
           :src="currentContact.thumbnail"
@@ -11,31 +15,38 @@
           :username="currentContact.name"
           :status="currentContact.availability_status"
         />
-        <div class="user--profile__meta">
+        <div class="items-start flex flex-col ml-2 rtl:ml-0 rtl:mr-2 min-w-0">
           <woot-button
             variant="link"
             color-scheme="secondary"
-            class="text-truncate"
+            class="overflow-hidden whitespace-nowrap text-ellipsis"
             @click.prevent="$emit('contact-panel-toggle')"
           >
-            <h3 class="sub-block-title user--name text-truncate">
+            <h3
+              class="text-base inline-block leading-tight capitalize m-0 p-0 text-ellipsis overflow-hidden whitespace-nowrap text-slate-900 dark:text-slate-100"
+            >
               <span>{{ currentContact.name }}</span>
               <fluent-icon
                 v-if="!isHMACVerified"
                 v-tooltip="$t('CONVERSATION.UNVERIFIED_SESSION')"
                 size="14"
-                class="hmac-warning__icon"
+                class="text-yellow-600 dark:text-yellow-500 my-0 mx-0.5"
                 icon="warning"
               />
             </h3>
           </woot-button>
-          <div class="conversation--header--actions text-truncate">
+          <div
+            class="conversation--header--actions items-center flex text-xs gap-2 text-ellipsis overflow-hidden whitespace-nowrap"
+          >
             <inbox-name v-if="hasMultipleInboxes" :inbox="inbox" />
-            <span v-if="isSnoozed" class="snoozed--display-text">
+            <span
+              v-if="isSnoozed"
+              class="font-medium text-yellow-600 dark:text-yellow-500"
+            >
               {{ snoozedDisplayText }}
             </span>
             <woot-button
-              class="user--profile__button"
+              class="p-0"
               size="small"
               variant="link"
               @click="$emit('contact-panel-toggle')"
@@ -46,8 +57,8 @@
         </div>
       </div>
       <div
-        class="header-actions-wrap mt-3 lg:mt-0"
-        :class="{ 'has-open-sidebar': isContactPanelOpen }"
+        class="header-actions-wrap items-center flex flex-row flex-grow justify-end mt-3 lg:mt-0"
+        :class="{ 'justify-end': isContactPanelOpen }"
       >
         <more-actions :conversation-id="currentChat.id" />
       </div>
@@ -161,54 +172,9 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.conv-header {
-  flex: 0 0 var(--space-jumbo);
-  flex-direction: row;
-}
-
-.option__desc {
-  display: flex;
-  align-items: center;
-}
-
-.option__desc {
-  &::v-deep .status-badge {
-    margin-right: var(--space-small);
-    min-width: 0;
-    flex-shrink: 0;
-  }
-}
-
-.user--name {
-  display: inline-block;
-  line-height: 1.2;
-  text-transform: capitalize;
-  margin: 0;
-  padding: 0;
-}
-
 .conversation--header--actions {
-  align-items: center;
-  display: flex;
-  font-size: var(--font-size-mini);
-  gap: var(--space-small);
-
   ::v-deep .inbox--name {
-    margin: 0;
+    @apply m-0;
   }
-
-  .user--profile__button {
-    padding: 0;
-  }
-
-  .snoozed--display-text {
-    font-weight: var(--font-weight-medium);
-    color: var(--y-600);
-  }
-}
-
-.hmac-warning__icon {
-  color: var(--y-600);
-  margin: 0 var(--space-micro);
 }
 </style>