feat: update banner design [CW-1491] (#7296)

* refactor: banner styling

* refactor: update button style for reply assign banner

* feat: remove update-banner classes

---------

Co-authored-by: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>

app/javascript/dashboard/App.vue

@@ -115,11 +115,6 @@ export default {
 
 <style lang="scss">
 @import './assets/scss/app';
-.update-banner {
-  height: var(--space-larger);
-  align-items: center;
-  font-size: var(--font-size-small) !important;
-}
 </style>
 
 <style src="vue-multiselect/dist/vue-multiselect.min.css"></style>

app/javascript/dashboard/components/app/UpdateBanner.vue

@@ -1,7 +1,6 @@
 <template>
   <banner
     v-if="shouldShowBanner"
-    class="update-banner"
     color-scheme="primary"
     :banner-message="bannerMessage"
     href-link="https://github.com/chatwoot/chatwoot/releases"

app/javascript/dashboard/components/ui/Banner.vue

@@ -11,26 +11,29 @@
         {{ hrefLinkText }}
       </a>
     </span>
-    <woot-button
+    <div class="actions">
-      v-if="hasActionButton"
+      <woot-button
-      size="small"
+        v-if="hasActionButton"
-      variant="link"
+        size="tiny"
-      icon="arrow-right"
+        icon="arrow-right"
-      color-scheme="primary"
+        :variant="actionButtonVariant"
-      class-names="banner-action__button"
+        color-scheme="primary"
-      @click="onClick"
+        class-names="banner-action__button"
-    >
+        @click="onClick"
-      {{ actionButtonLabel }}
+      >
-    </woot-button>
+        {{ actionButtonLabel }}
-    <woot-button
+      </woot-button>
-      v-if="hasCloseButton"
+      <woot-button
-      size="small"
+        v-if="hasCloseButton"
-      variant="link"
+        size="tiny"
-      color-scheme="secondary"
+        :color-scheme="colorScheme"
-      icon="dismiss-circle"
+        icon="dismiss-circle"
-      class-names="banner-action__button"
+        class-names="banner-action__button"
-      @click="onClickClose"
+        @click="onClickClose"
-    />
+      >
+        {{ $t('GENERAL_SETTINGS.DISMISS') }}
+      </woot-button>
+    </div>
   </div>
 </template>
 
@@ -53,6 +56,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    actionButtonVariant: {
+      type: String,
+      default: '',
+    },
     actionButtonLabel: {
       type: String,
       default: '',
@@ -68,7 +75,12 @@ export default {
   },
   computed: {
     bannerClasses() {
-      return [this.colorScheme];
+      const classList = [this.colorScheme, `banner-align-${this.align}`];
+
+      if (this.hasActionButton || this.hasCloseButton) {
+        classList.push('has-button');
+      }
+      return classList;
     },
   },
   methods: {
@@ -84,17 +96,26 @@ 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(--space-slab) var(--space-normal);
+  padding: var(--y-padding) var(--x-padding);
   justify-content: center;
-  position: sticky;
 
   &.primary {
     background: var(--w-500);
     .banner-action__button {
+      background: var(--w-600);
+      border: none;
       color: var(--white);
+
+      &:hover {
+        background: var(--w-800);
+      }
     }
   }
 
@@ -107,7 +128,16 @@ export default {
   }
 
   &.alert {
-    background: var(--r-400);
+    background: var(--r-500);
+    .banner-action__button {
+      background: var(--r-700);
+      border: none;
+      color: var(--white);
+
+      &:hover {
+        background: var(--r-800);
+      }
+    }
   }
 
   &.warning {
@@ -133,8 +163,6 @@ export default {
   }
 
   .banner-action__button {
-    margin: 0 var(--space-smaller);
-
     ::v-deep .button__content {
       white-space: nowrap;
     }
@@ -144,5 +172,11 @@ export default {
     display: flex;
     align-items: center;
   }
+
+  .actions {
+    display: flex;
+    gap: var(--space-smaller);
+    right: var(--y-padding);
+  }
 }
 </style>

app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue

@@ -2,6 +2,7 @@
   <div class="reply-box" :class="replyBoxClass">
     <banner
       v-if="showSelfAssignBanner"
+      action-button-variant="link"
       color-scheme="secondary"
       :banner-message="$t('CONVERSATION.NOT_ASSIGNED_TO_YOU')"
       :has-action-button="true"