From 69d46f278aa03b2776c61feb772f3f3d774a3056 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Fri, 4 Aug 2023 00:35:22 +0530
Subject: [PATCH] feat: Dark mode improvements (#7658)

---
 app/javascript/dashboard/App.vue              |  2 +
 app/javascript/dashboard/assets/scss/app.scss |  5 --
 .../assets/scss/widgets/_buttons.scss         | 14 ++---
 .../scss/widgets/_conversation-view.scss      | 60 +++++++++++--------
 .../assets/scss/widgets/_reply-box.scss       |  8 +--
 .../dashboard/components/ui/Banner.vue        | 54 ++++++-----------
 .../components/widgets/WootWriter/Editor.vue  | 15 ++---
 .../widgets/WootWriter/ReplyBottomPanel.vue   |  2 +-
 .../widgets/WootWriter/ReplyTopPanel.vue      |  2 +-
 .../widgets/conversation/Message.vue          | 12 +++-
 .../widgets/conversation/ReplyBox.vue         |  9 ++-
 .../conversation/contact/ContactInfo.vue      |  4 --
 tailwind.config.js                            |  8 +--
 13 files changed, 96 insertions(+), 99 deletions(-)

diff --git a/app/javascript/dashboard/App.vue b/app/javascript/dashboard/App.vue
index 17b8611e7..890673ca4 100644
--- a/app/javascript/dashboard/App.vue
+++ b/app/javascript/dashboard/App.vue
@@ -112,9 +112,11 @@ export default {
       ) {
         this.theme = 'dark';
         document.body.classList.add('dark');
+        document.documentElement.setAttribute('style', 'color-scheme: dark;');
       } else {
         this.theme = 'light ';
         document.body.classList.remove('dark');
+        document.documentElement.setAttribute('style', 'color-scheme: light;');
       }
     },
     listenToThemeChanges() {
diff --git a/app/javascript/dashboard/assets/scss/app.scss b/app/javascript/dashboard/assets/scss/app.scss
index 4a86dbc5a..13c3dd557 100644
--- a/app/javascript/dashboard/assets/scss/app.scss
+++ b/app/javascript/dashboard/assets/scss/app.scss
@@ -1,6 +1 @@
-// scss-lint:disable PropertySpelling
-:root {
-  color-scheme: light dark;
-}
-
 @import 'woot';
diff --git a/app/javascript/dashboard/assets/scss/widgets/_buttons.scss b/app/javascript/dashboard/assets/scss/widgets/_buttons.scss
index 686f97372..ab41dafdf 100644
--- a/app/javascript/dashboard/assets/scss/widgets/_buttons.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_buttons.scss
@@ -49,7 +49,7 @@
     }
 
     &.success {
-      @apply text-green-700 dark:text-green-100 hover:bg-green-50 dark:hover:bg-green-800 ;
+      @apply text-green-700 dark:text-green-100 hover:bg-green-50 dark:hover:bg-green-800;
     }
 
     &.alert {
@@ -110,7 +110,7 @@
     }
 
     &.success {
-      @apply text-green-700 dark:text-green-100 ;
+      @apply text-green-700 dark:text-green-100;
     }
 
     &.alert {
@@ -118,26 +118,26 @@
     }
 
     &.warning {
-      @apply text-yellow-700 dark:text-yellow-700;
+      @apply text-yellow-700 dark:text-yellow-600;
     }
 
     &:hover {
       @apply hover:bg-woot-50 dark:hover:bg-woot-900/50 hover:text-woot-500 dark:hover:text-woot-100;
 
       &.secondary {
-        @apply hover:bg-slate-50 dark:hover:bg-slate-700 text-slate-800 dark:text-slate-100;
+        @apply hover:bg-slate-50 dark:hover:bg-slate-700 hover:text-slate-800 dark:hover:text-slate-100;
       }
 
       &.success {
-        @apply hover:bg-green-50 dark:hover:bg-green-800 text-green-800 dark:text-green-100;
+        @apply hover:bg-green-50 dark:hover:bg-green-800 hover:text-green-800 dark:hover:text-green-100;
       }
 
       &.alert {
-        @apply hover:bg-red-50 dark:hover:bg-red-800 text-red-700 dark:text-red-100;
+        @apply hover:bg-red-50 dark:hover:bg-red-800 hover:text-red-700 dark:hover:text-red-100;
       }
 
       &.warning {
-        @apply hover:bg-yellow-50 dark:hover:bg-yellow-100 text-yellow-700 dark:text-yellow-700;
+        @apply hover:bg-yellow-100 dark:hover:bg-yellow-800 hover:text-yellow-700 dark:hover:text-yellow-600;
       }
     }
 
diff --git a/app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss b/app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss
index b107ec226..4e4a04f33 100644
--- a/app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss
@@ -1,34 +1,45 @@
 // scss-lint:disable MergeableSelector
 
-@mixin bubble-with-types {
-  @apply py-2 text-sm font-normal bg-woot-500 dark:bg-woot-500 relative px-4 m-0 text-white dark:text-white;
-
-  .message-text__wrap {
-    @apply relative;
-
-    .link {
-      @apply text-white dark:text-white underline;
-    }
+@tailwind utilities;
+@layer utilities {
+  .custom-gradient {
+    background-image: linear-gradient(
+      -180deg,
+      transparent 3%,
+      rgb(76 81 85) 130%
+    );
   }
 
-  .image,
-  .video {
-    @apply cursor-pointer relative;
+  .bubble-with-types {
+    @apply py-2 text-sm font-normal bg-woot-500 dark:bg-woot-500 relative px-4 m-0 text-white dark:text-white;
 
-    .modal-container {
-      @apply text-center;
+    .message-text__wrap {
+      @apply relative;
+
+      .link {
+        @apply text-white dark:text-white underline;
+      }
     }
 
-    .modal-image {
-      @apply max-h-[76vh] max-w-[76vw];
-    }
+    .image,
+    .video {
+      @apply cursor-pointer relative;
 
-    .modal-video {
-      @apply max-h-[76vh] max-w-[76vw];
-    }
+      .modal-container {
+        @apply text-center;
+      }
 
-    &::before {
-      @apply bg-gradient-to-t from-transparent via-transparent to-slate-800 bg-repeat bg-clip-border bottom-0 h-[20%] content-[''] left-0 absolute w-full opacity-80;
+      .modal-image {
+        @apply max-h-[76vh] max-w-[76vw];
+      }
+
+      .modal-video {
+        @apply max-h-[76vh] max-w-[76vw];
+      }
+
+      &::before {
+        @apply custom-gradient bottom-0 h-[20%] content-[''] left-0 absolute w-full opacity-80;
+      }
     }
   }
 }
@@ -55,8 +66,7 @@
   }
 
   .bubble {
-    @include bubble-with-types;
-    @apply text-left break-words;
+    @apply bubble-with-types text-left break-words;
 
     .aplayer {
       @apply shadow-none;
@@ -129,7 +139,7 @@
       @apply ml-auto break-words rounded-l-lg rounded-r;
 
       &.is-private {
-        @apply text-black-900 dark:text-black-900 relative border border-solid bg-yellow-100 border-yellow-200 dark:bg-yellow-300/70 dark:border-0;
+        @apply text-black-900 dark:text-white relative border border-solid bg-yellow-100 dark:bg-yellow-700 border-yellow-200 dark:border-yellow-600/25;
       }
 
       &.is-image {
diff --git a/app/javascript/dashboard/assets/scss/widgets/_reply-box.scss b/app/javascript/dashboard/assets/scss/widgets/_reply-box.scss
index b03a55d7b..d15150f36 100644
--- a/app/javascript/dashboard/assets/scss/widgets/_reply-box.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_reply-box.scss
@@ -1,6 +1,6 @@
 .reply-box {
   transition: box-shadow 0.35s $swift-ease-out-function,
-  height 2s $swift-ease-out-function;
+    height 2s $swift-ease-out-function;
 
   &.is-focused {
     box-shadow: var(--shadow);
@@ -47,13 +47,13 @@
   }
 
   &.is-private {
-    background: var(--y-50);
+    @apply bg-yellow-100 dark:bg-yellow-800;
 
     .reply-box__top {
-      background: var(--y-50);
+      @apply bg-yellow-100 dark:bg-yellow-800;
 
       > input {
-        background: var(--y-50);
+        @apply bg-yellow-100 dark:bg-yellow-800;
       }
     }
   }
diff --git a/app/javascript/dashboard/components/ui/Banner.vue b/app/javascript/dashboard/components/ui/Banner.vue
index 59129d6f4..8ffe410e2 100644
--- a/app/javascript/dashboard/components/ui/Banner.vue
+++ b/app/javascript/dashboard/components/ui/Banner.vue
@@ -96,87 +96,67 @@ export default {
 
 <style lang="scss" scoped>
 .banner {
-  --x-padding: var(--space-normal);
-  --y-padding: var(--space-slab);
-
-  display: flex;
-  gap: var(--x-padding);
-  color: var(--white);
-  font-size: var(--font-size-mini);
-  padding: var(--y-padding) var(--x-padding);
-  justify-content: center;
+  @apply flex items-center gap-4 text-white dark:text-white text-xs py-3 px-4 justify-center;
 
   &.primary {
-    background: var(--w-500);
+    @apply bg-woot-500 dark:bg-woot-500;
     .banner-action__button {
-      background: var(--w-600);
-      border: none;
-      color: var(--white);
+      @apply bg-woot-600 dark:bg-woot-600 border-none text-white;
 
       &:hover {
-        background: var(--w-800);
+        @apply bg-woot-700 dark:bg-woot-700;
       }
     }
   }
 
   &.secondary {
-    background: var(--s-200);
-    color: var(--s-800);
+    @apply bg-slate-200 dark:bg-slate-300 text-slate-800 dark:text-slate-800;
     a {
-      color: var(--s-800);
+      @apply text-slate-800 dark:text-slate-800;
     }
   }
 
   &.alert {
-    background: var(--r-500);
+    @apply bg-red-500 dark:bg-red-500;
     .banner-action__button {
-      background: var(--r-700);
-      border: none;
-      color: var(--white);
+      @apply bg-red-700 dark:bg-red-700 border-none text-white dark:text-white;
 
       &:hover {
-        background: var(--r-800);
+        @apply bg-red-800 dark:bg-red-800;
       }
     }
   }
 
   &.warning {
-    background: var(--y-600);
-    color: var(--y-500);
+    @apply bg-yellow-500 dark:bg-yellow-500 text-yellow-500 dark:text-yellow-500;
     a {
-      color: var(--y-500);
+      @apply text-yellow-500 dark:text-yellow-500;
     }
   }
 
   &.gray {
-    background: var(--b-500);
+    @apply text-black-500 dark:text-black-500;
     .banner-action__button {
-      color: var(--white);
+      @apply text-white dark:text-white;
     }
   }
 
   a {
-    margin-left: var(--space-smaller);
-    text-decoration: underline;
-    color: var(--white);
-    font-size: var(--font-size-mini);
+    @apply ml-1 underline text-white dark:text-white text-xs;
   }
 
   .banner-action__button {
     ::v-deep .button__content {
-      white-space: nowrap;
+      @apply whitespace-nowrap;
     }
   }
 
   .banner-message {
-    display: flex;
-    align-items: center;
+    @apply flex items-center;
   }
 
   .actions {
-    display: flex;
-    gap: var(--space-smaller);
-    right: var(--y-padding);
+    @apply flex gap-1 right-3;
   }
 }
 </style>
diff --git a/app/javascript/dashboard/components/widgets/WootWriter/Editor.vue b/app/javascript/dashboard/components/widgets/WootWriter/Editor.vue
index d7807d5be..80e3a4042 100644
--- a/app/javascript/dashboard/components/widgets/WootWriter/Editor.vue
+++ b/app/javascript/dashboard/components/widgets/WootWriter/Editor.vue
@@ -462,10 +462,7 @@ export default {
     h3,
     h4,
     h5,
-    h6 {
-      @apply text-slate-800 dark:text-slate-100;
-    }
-
+    h6,
     p {
       @apply text-slate-800 dark:text-slate-100;
     }
@@ -498,16 +495,20 @@ export default {
 
 .is-private {
   .prosemirror-mention-node {
-    @apply font-medium bg-slate-50 dark:bg-slate-200 text-slate-900 dark:text-slate-900 py-0 px-1;
+    @apply font-medium bg-yellow-100 dark:bg-yellow-800 text-slate-900 dark:text-slate-25 py-0 px-1;
   }
 
   .ProseMirror-menubar-wrapper {
     .ProseMirror-menubar {
-      @apply bg-yellow-50 dark:bg-yellow-50 text-slate-700 dark:text-slate-700;
+      @apply bg-yellow-100 dark:bg-yellow-800 text-slate-700 dark:text-slate-25;
     }
 
     > .ProseMirror {
-      @apply text-slate-800 dark:text-slate-800;
+      @apply text-slate-800 dark:text-slate-25;
+
+      p {
+        @apply text-slate-800 dark:text-slate-25;
+      }
     }
   }
 }
diff --git a/app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue b/app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue
index e029b5625..2a7d77fa7 100644
--- a/app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue
+++ b/app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue
@@ -326,7 +326,7 @@ export default {
   @apply flex justify-between py-3 px-4;
 
   &.is-note-mode {
-    @apply bg-yellow-50 dark:bg-yellow-50;
+    @apply bg-yellow-100 dark:bg-yellow-800;
   }
 }
 
diff --git a/app/javascript/dashboard/components/widgets/WootWriter/ReplyTopPanel.vue b/app/javascript/dashboard/components/widgets/WootWriter/ReplyTopPanel.vue
index 0b80d3052..d3a28c754 100644
--- a/app/javascript/dashboard/components/widgets/WootWriter/ReplyTopPanel.vue
+++ b/app/javascript/dashboard/components/widgets/WootWriter/ReplyTopPanel.vue
@@ -137,7 +137,7 @@ export default {
   .button--note {
     @apply border-l-0 rounded-none;
     &.is-active {
-      @apply border-r border-b-0 bg-yellow-50 dark:bg-yellow-50 border-t-0 border-slate-50 dark:border-slate-700;
+      @apply border-r border-b-0 bg-yellow-100 dark:bg-yellow-800 border-t-0 border-slate-50 dark:border-slate-700;
     }
     &:hover,
     &:active {
diff --git a/app/javascript/dashboard/components/widgets/conversation/Message.vue b/app/javascript/dashboard/components/widgets/conversation/Message.vue
index bfdf8a6cd..36ac1256b 100644
--- a/app/javascript/dashboard/components/widgets/conversation/Message.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/Message.vue
@@ -555,7 +555,7 @@ export default {
       @apply text-woot-700 dark:text-woot-700;
     }
     &.is-private.is-text > .message-text__wrap .prosemirror-mention-node {
-      @apply font-bold bg-none rounded-sm p-0 text-slate-700 dark:text-slate-700 underline;
+      @apply font-bold bg-none rounded-sm p-0 bg-yellow-100 dark:bg-yellow-700 text-slate-700 dark:text-slate-25 underline;
     }
 
     &.is-from-bot {
@@ -651,6 +651,10 @@ li.right {
     @apply bg-slate-75 dark:bg-slate-700 inline-block leading-none rounded-sm p-1;
   }
 
+  ol li {
+    @apply list-item list-decimal;
+  }
+
   pre {
     @apply bg-slate-75 dark:bg-slate-700 block border-slate-75 dark:border-slate-700 text-slate-800 dark:text-slate-100 rounded-md p-2 mt-1 mb-2 leading-relaxed whitespace-pre-wrap;
 
@@ -660,7 +664,11 @@ li.right {
   }
 
   blockquote {
-    @apply border-l-4 mx-0 my-1 pt-2 pr-2 pb-0 pl-4 border-slate-75 border-solid dark:border-slate-700 text-slate-800 dark:text-slate-100;
+    @apply border-l-4 mx-0 my-1 pt-2 pr-2 pb-0 pl-4 border-slate-75 border-solid dark:border-slate-600 text-slate-800 dark:text-slate-100;
+
+    p {
+      @apply text-slate-800 dark:text-slate-300;
+    }
   }
 }
 
diff --git a/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue b/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
index cd06545c7..a46a59be3 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
@@ -2,8 +2,9 @@
   <div class="reply-box" :class="replyBoxClass">
     <banner
       v-if="showSelfAssignBanner"
-      action-button-variant="link"
+      action-button-variant="clear"
       color-scheme="secondary"
+      class="banner--self-assign"
       :banner-message="$t('CONVERSATION.NOT_ASSIGNED_TO_YOU')"
       :has-action-button="true"
       :action-button-label="$t('CONVERSATION.ASSIGN_TO_ME')"
@@ -1094,6 +1095,10 @@ export default {
   @apply mb-0;
 }
 
+.banner--self-assign {
+  @apply py-2;
+}
+
 .message-signature-wrap {
   @apply my-0 mx-4 px-1 flex max-h-[8vh] items-baseline justify-between hover:bg-slate-25 dark:hover:bg-slate-800 border border-dashed border-slate-100 dark:border-slate-700 rounded-sm overflow-auto;
 }
@@ -1110,7 +1115,7 @@ export default {
   @apply border-t border-slate-50 dark:border-slate-700 bg-white dark:bg-slate-900;
 
   &.is-private {
-    @apply bg-yellow-50 dark:bg-yellow-50;
+    @apply bg-yellow-50 dark:bg-yellow-200;
   }
 }
 .send-button {
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue
index ee04d1bb5..0f4d4c129 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue
@@ -97,7 +97,6 @@
         <woot-button
           v-tooltip="$t('CONTACT_PANEL.NEW_MESSAGE')"
           title="$t('CONTACT_PANEL.NEW_MESSAGE')"
-          class="mr-2 rtl:ml-2 rtl:mr-0"
           icon="chat"
           size="small"
           @click="toggleConversationModal"
@@ -105,7 +104,6 @@
         <woot-button
           v-tooltip="$t('EDIT_CONTACT.BUTTON_LABEL')"
           title="$t('EDIT_CONTACT.BUTTON_LABEL')"
-          class="mr-2 rtl:ml-2 rtl:mr-0"
           icon="edit"
           variant="smooth"
           size="small"
@@ -114,7 +112,6 @@
         <woot-button
           v-tooltip="$t('CONTACT_PANEL.MERGE_CONTACT')"
           title="$t('CONTACT_PANEL.MERGE_CONTACT')"
-          class="mr-2 rtl:ml-2 rtl:mr-0"
           icon="merge"
           variant="smooth"
           size="small"
@@ -126,7 +123,6 @@
           v-if="isAdmin"
           v-tooltip="$t('DELETE_CONTACT.BUTTON_LABEL')"
           title="$t('DELETE_CONTACT.BUTTON_LABEL')"
-          class="mr-2 rtl:ml-2 rtl:mr-0"
           icon="delete"
           variant="smooth"
           size="small"
diff --git a/tailwind.config.js b/tailwind.config.js
index 8b916cc87..89546bc30 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -64,15 +64,15 @@ module.exports = {
       },
       yellow: {
         50: yellow.yellow2,
-        100: yellow.yellow4,
+        100: yellow.yellow3,
         200: yellow.yellow5,
         300: yellowDark.yellow10,
         400: yellowDark.yellow9,
         500: yellowDark.yellow11,
         600: yellow.yellow8,
-        700: yellow.yellow11,
-        800: yellowDark.yellow8,
-        900: yellowDark.yellow7,
+        700: yellowDark.yellow7,
+        800: yellowDark.yellow2,
+        900: yellowDark.yellow1,
       },
       slate: {
         25: slate.slate2,