From f0d3ae09d9bebcd5913361f6f8fd86a0ae233d35 Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Wed, 4 Oct 2023 18:47:08 +0530
Subject: [PATCH] refactor: move top level styles to tailwind

---
 .../assets/scss/widgets/_reply-box.scss       |  6 ------
 .../widgets/conversation/ReplyBox.vue         | 21 +++++++------------
 2 files changed, 7 insertions(+), 20 deletions(-)

diff --git a/app/javascript/dashboard/assets/scss/widgets/_reply-box.scss b/app/javascript/dashboard/assets/scss/widgets/_reply-box.scss
index d15150f36..89be3e6d3 100644
--- a/app/javascript/dashboard/assets/scss/widgets/_reply-box.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_reply-box.scss
@@ -2,10 +2,6 @@
   transition: box-shadow 0.35s $swift-ease-out-function,
     height 2s $swift-ease-out-function;
 
-  &.is-focused {
-    box-shadow: var(--shadow);
-  }
-
   .reply-box__top {
     .icon {
       color: $medium-gray;
@@ -47,8 +43,6 @@
   }
 
   &.is-private {
-    @apply bg-yellow-100 dark:bg-yellow-800;
-
     .reply-box__top {
       @apply bg-yellow-100 dark:bg-yellow-800;
 
diff --git a/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue b/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
index dbe70c979..0b04b8f71 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
@@ -1,5 +1,11 @@
 <template>
-  <div class="reply-box" :class="replyBoxClass">
+  <div
+    class="border-t border-slate-50 dark:border-slate-700 bg-white dark:bg-slate-900 reply-box"
+    :class="{
+      'bg-yellow-100 dark:bg-yellow-800 is-private': isPrivate,
+      'shadow-sm': isFocused || hasAttachments,
+    }"
+  >
     <banner
       v-if="showSelfAssignBanner"
       action-button-variant="clear"
@@ -389,12 +395,6 @@ export default {
         : '(↵)';
       return `${sendMessageText} ${keyLabel}`;
     },
-    replyBoxClass() {
-      return {
-        'is-private': this.isPrivate,
-        'is-focused': this.isFocused || this.hasAttachments,
-      };
-    },
     hasAttachments() {
       return this.attachedFiles.length;
     },
@@ -1077,13 +1077,6 @@ export default {
   @apply bg-transparent py-0 px-4;
 }
 
-.reply-box {
-  @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-200;
-  }
-}
 .send-button {
   @apply mb-0;
 }