feat: Dark mode improvements (#7658)

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 {