feat: Show banner message if Chatwoot update available (#3999)

Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Co-authored-by: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>
Co-authored-by: Fayaz Ahmed <15716057+fayazara@users.noreply.github.com>
Co-authored-by: Pranav <pranav@chatwoot.com>

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

@@ -1,6 +1,6 @@
 <template>
   <div class="banner" :class="bannerClasses">
-    <span>
+    <span class="banner-message">
       {{ bannerMessage }}
       <a
         v-if="hrefLink"
@@ -26,7 +26,7 @@
       v-if="hasCloseButton"
       size="small"
       variant="link"
-      color-scheme="warning"
+      color-scheme="secondary"
       icon="dismiss-circle"
       class-names="banner-action__button"
       @click="onClickClose"
@@ -92,8 +92,19 @@ export default {
   justify-content: center;
   position: sticky;
 
+  &.primary {
+    background: var(--w-500);
+    .banner-action__button {
+      color: var(--white);
+    }
+  }
+
   &.secondary {
-    background: var(--s-300);
+    background: var(--s-200);
+    color: var(--s-800);
+    a {
+      color: var(--s-800);
+    }
   }
 
   &.alert {
@@ -110,9 +121,13 @@ export default {
 
   &.gray {
     background: var(--b-500);
+    .banner-action__button {
+      color: var(--white);
+    }
   }
 
   a {
+    margin-left: var(--space-smaller);
     text-decoration: underline;
     color: var(--white);
     font-size: var(--font-size-mini);
@@ -125,5 +140,10 @@ export default {
       white-space: nowrap;
     }
   }
+
+  .banner-message {
+    display: flex;
+    align-items: center;
+  }
 }
 </style>