From e67f8824d984f19f1b4b0e68b69ecbef8154a822 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Tue, 16 Jan 2024 18:36:43 +0530
Subject: [PATCH] fix: Backdrop color for insert article modal in dark mode
 (#8711)

---
 app/javascript/dashboard/assets/scss/widgets/_modal.scss     | 2 +-
 .../components/widgets/WootWriter/ReplyBottomPanel.vue       | 4 ++--
 .../helpcenter/components/ArticleSearch/SearchPopover.vue    | 2 +-
 tailwind.config.js                                           | 5 ++---
 4 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/app/javascript/dashboard/assets/scss/widgets/_modal.scss b/app/javascript/dashboard/assets/scss/widgets/_modal.scss
index 1f0641c6e..4a3ca61c1 100644
--- a/app/javascript/dashboard/assets/scss/widgets/_modal.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_modal.scss
@@ -1,7 +1,7 @@
 .modal-mask {
   // @include flex;
   // @include flex-align(center, middle);
-  @apply flex items-center justify-center bg-modal dark:bg-modal z-[9990] h-full left-0 fixed top-0 w-full;
+  @apply flex items-center justify-center bg-modal-backdrop-light dark:bg-modal-backdrop-dark  z-[9990] h-full left-0 fixed top-0 w-full;
 }
 
 .page-top-bar {
diff --git a/app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue b/app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue
index b5022c9a2..2984c506a 100644
--- a/app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue
+++ b/app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue
@@ -101,10 +101,10 @@
       <transition name="modal-fade">
         <div
           v-show="$refs.upload && $refs.upload.dropActive"
-          class="fixed top-0 bottom-0 left-0 right-0 z-20 flex flex-col items-center justify-center w-full h-full gap-2 text-slate-600 dark:text-slate-200 bg-white_transparent dark:bg-black_transparent"
+          class="fixed top-0 bottom-0 left-0 right-0 z-20 flex flex-col items-center justify-center w-full h-full gap-2 text-slate-900 dark:text-slate-50 bg-modal-backdrop-light dark:bg-modal-backdrop-dark"
         >
           <fluent-icon icon="cloud-backup" size="40" />
-          <h4 class="page-sub-title text-slate-600 dark:text-slate-200">
+          <h4 class="page-sub-title text-slate-900 dark:text-slate-50">
             {{ $t('CONVERSATION.REPLYBOX.DRAG_DROP') }}
           </h4>
         </div>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/SearchPopover.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/SearchPopover.vue
index 1c221d3be..7de19a9e3 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/SearchPopover.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/SearchPopover.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="fixed flex items-center justify-center w-screen h-screen bg-white/70 top-0 left-0 z-50"
+    class="fixed flex items-center justify-center w-screen h-screen bg-modal-backdrop-light dark:bg-modal-backdrop-dark top-0 left-0 z-50"
   >
     <div
       v-on-clickaway="onClose"
diff --git a/tailwind.config.js b/tailwind.config.js
index 764f2ae3a..4ab6f5dd8 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -32,9 +32,8 @@ module.exports = {
     colors: {
       transparent: 'transparent',
       white: '#fff',
-      white_transparent: 'rgba(255, 255, 255, 0.9)',
-      black_transparent: 'rgba(0, 0, 0, 0.9)',
-      modal: 'rgba(0, 0, 0, 0.4)',
+      'modal-backdrop-light': 'rgba(0, 0, 0, 0.4)',
+      'modal-backdrop-dark': 'rgba(0, 0, 0, 0.6)',
       current: 'currentColor',
       woot: {
         25: blue.blue2,