feat: Dark Mode (#7471)

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="view-box fill-height">
+  <div class="m-0 flex flex-col justify-between h-full flex-grow min-w-0">
     <banner
       v-if="!currentChat.can_reply"
       color-scheme="alert"
@@ -16,19 +16,19 @@
       @close="removeTweetSelection"
     />
 
-    <div class="sidebar-toggle__wrap">
+    <div class="flex justify-end">
       <woot-button
         variant="smooth"
         size="tiny"
         color-scheme="secondary"
-        class="sidebar-toggle--button"
+        class="rounded-bl-calc rtl:rotate-180 rounded-tl-calc fixed top-[6.25rem] z-10 bg-white dark:bg-slate-700 border-slate-50 dark:border-slate-600 border-solid border border-r-0 box-border"
         :icon="isRightOrLeftIcon"
         @click="onToggleContactPanel"
       />
     </div>
     <ul class="conversation-panel">
       <transition name="slide-up">
-        <li class="spinner--container">
+        <li class="min-h-[4rem]">
           <span v-if="shouldShowSpinner" class="spinner message" />
         </li>
       </transition>
@@ -44,7 +44,7 @@
         :is-web-widget-inbox="isAWebWidgetInbox"
       />
       <li v-show="unreadMessageCount != 0" class="unread--toast">
-        <span class="text-uppercase">
+        <span>
           {{ unreadMessageCount }}
           {{
             unreadMessageCount > 1
@@ -535,68 +535,41 @@ export default {
 };
 </script>
 
-<style scoped lang="scss">
-.spinner--container {
-  min-height: var(--space-jumbo);
-}
-
-.view-box.fill-height {
-  height: auto;
-  flex-grow: 1;
-  min-width: 0;
-}
-
-.modal-mask {
-  &::v-deep {
-    .ProseMirror-woot-style {
-      max-height: 25rem;
-    }
-
-    .reply-box {
-      border: 1px solid var(--color-border);
-      max-width: 75rem;
-      width: 70%;
-    }
-
-    .reply-box .reply-box__top {
-      position: relative;
-      min-height: 27.5rem;
-    }
-
-    .reply-box__top .input {
-      min-height: 27.5rem;
-    }
-
-    .emoji-dialog {
-      position: fixed;
-      left: unset;
-      position: absolute;
-      bottom: var(--space-smaller);
-    }
+<style scoped>
+@tailwind components;
+@layer components {
+  .rounded-bl-calc {
+    border-bottom-left-radius: calc(1.5rem + 1px);
   }
-}
-.sidebar-toggle__wrap {
-  display: flex;
-  justify-content: flex-end;
 
-  .sidebar-toggle--button {
-    position: fixed;
-
-    top: var(--space-mega);
-    z-index: var(--z-index-low);
-
-    background: var(--white);
-
-    padding: inherit 0;
-    border-top-left-radius: calc(
-      var(--space-medium) + 1px
-    ); /* 100px of height + 10px of border */
-    border-bottom-left-radius: calc(
-      var(--space-medium) + 1px
-    ); /* 100px of height + 10px of border */
-    border: 1px solid var(--color-border-light);
-    border-right: 0;
-    box-sizing: border-box;
+  .rounded-tl-calc {
+    border-top-left-radius: calc(1.5rem + 1px);
+  }
+}
+</style>
+
+<style scoped lang="scss">
+.modal-mask {
+  &::v-deep {
+    .ProseMirror-woot-style {
+      @apply max-h-[25rem];
+    }
+
+    .reply-box {
+      @apply border border-solid border-slate-75 dark:border-slate-600 max-w-[75rem] w-[70%];
+    }
+
+    .reply-box .reply-box__top {
+      @apply relative min-h-[27.5rem];
+    }
+
+    .reply-box__top .input {
+      @apply min-h-[27.5rem];
+    }
+
+    .emoji-dialog {
+      @apply absolute left-auto bottom-1;
+    }
   }
 }
 </style>