From 35ca67c9ba341e319ebbc9ea75dce20bc797a4e0 Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Tue, 14 Jan 2025 02:42:43 +0530
Subject: [PATCH] fix: Update the design for the reply box banner UI (#10678)

---
 .../components-next/message/MessageError.vue  | 10 +++++++++-
 .../dashboard/components/ui/Banner.vue        |  2 +-
 .../widgets/conversation/ReplyBox.vue         | 20 +++++++++----------
 3 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/app/javascript/dashboard/components-next/message/MessageError.vue b/app/javascript/dashboard/components-next/message/MessageError.vue
index 128ab0b06..dca1ae7ff 100644
--- a/app/javascript/dashboard/components-next/message/MessageError.vue
+++ b/app/javascript/dashboard/components-next/message/MessageError.vue
@@ -1,11 +1,15 @@
 <script setup>
 import Icon from 'next/icon/Icon.vue';
 import { useI18n } from 'vue-i18n';
+import { useMessageContext } from './provider.js';
+import { ORIENTATION } from './constants';
 
 defineProps({
   error: { type: String, required: true },
 });
 
+const { orientation } = useMessageContext();
+
 const { t } = useI18n();
 </script>
 
@@ -22,7 +26,11 @@ const { t } = useI18n();
         />
       </div>
       <div
-        class="absolute bg-n-alpha-3 px-4 py-3 border rounded-xl border-n-strong text-n-slate-12 bottom-6 w-52 right-0 text-xs backdrop-blur-[100px] shadow-[0px_0px_24px_0px_rgba(0,0,0,0.12)] opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all"
+        class="absolute bg-n-alpha-3 px-4 py-3 border rounded-xl border-n-strong text-n-slate-12 bottom-6 w-52 text-xs backdrop-blur-[100px] shadow-[0px_0px_24px_0px_rgba(0,0,0,0.12)] opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all"
+        :class="{
+          'left-0': orientation === ORIENTATION.LEFT,
+          'right-0': orientation === ORIENTATION.RIGHT,
+        }"
       >
         {{ error }}
       </div>
diff --git a/app/javascript/dashboard/components/ui/Banner.vue b/app/javascript/dashboard/components/ui/Banner.vue
index 7071de61e..eb0a5d28a 100644
--- a/app/javascript/dashboard/components/ui/Banner.vue
+++ b/app/javascript/dashboard/components/ui/Banner.vue
@@ -116,7 +116,7 @@ export default {
   }
 
   &.secondary {
-    @apply bg-slate-200 dark:bg-slate-300 text-slate-800 dark:text-slate-800;
+    @apply bg-n-slate-3 dark:bg-n-solid-3 text-n-slate-12;
     a {
       @apply text-slate-800 dark:text-slate-800;
     }
diff --git a/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue b/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
index 85ff52da1..a12e8c23c 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
@@ -1071,17 +1071,17 @@ export default {
 </script>
 
 <template>
+  <Banner
+    v-if="showSelfAssignBanner"
+    action-button-variant="clear"
+    color-scheme="secondary"
+    class="banner--self-assign mx-2 mb-2 rounded-lg"
+    :banner-message="$t('CONVERSATION.NOT_ASSIGNED_TO_YOU')"
+    has-action-button
+    :action-button-label="$t('CONVERSATION.ASSIGN_TO_ME')"
+    @primary-action="onClickSelfAssign"
+  />
   <div class="reply-box" :class="replyBoxClass">
-    <Banner
-      v-if="showSelfAssignBanner"
-      action-button-variant="clear"
-      color-scheme="secondary"
-      class="banner--self-assign"
-      :banner-message="$t('CONVERSATION.NOT_ASSIGNED_TO_YOU')"
-      has-action-button
-      :action-button-label="$t('CONVERSATION.ASSIGN_TO_ME')"
-      @primary-action="onClickSelfAssign"
-    />
     <ReplyTopPanel
       :mode="replyType"
       :is-message-length-reaching-threshold="isMessageLengthReachingThreshold"