feat: add ability to make banners dismissible + new info and warning color schemes added based on themes (#3586)

Co-authored-by: jamesgeorge007 <jamesgeorge998001@gmail.com>

packages/hoppscotch-common/src/components/app/Banner.vue

@@ -1,19 +1,27 @@
 <template>
   <div
     :role="bannerRole"
-    class="flex items-center px-4 py-2 text-tiny"
+    class="flex items-center justify-between px-4 py-2 text-tiny"
     :class="bannerColor"
   >
-    <component :is="bannerIcon" class="mr-2 text-white" />
+    <div class="flex items-center">
+      <component :is="bannerIcon" class="mr-2 text-secondaryDark" />
 
-    <span class="text-white">
-      <span v-if="banner.alternateText" class="md:hidden">
-        {{ banner.alternateText(t) }}
+      <span class="text-secondaryDark">
+        <span v-if="banner.alternateText" class="md:hidden">
+          {{ banner.alternateText(t) }}
+        </span>
+        <span :class="{ '<md:hidden': banner.alternateText }">
+          {{ banner.text(t) }}
+        </span>
       </span>
-      <span :class="banner.alternateText ? '<md:hidden' : ''">
-        {{ banner.text(t) }}
-      </span>
-    </span>
+    </div>
+
+    <icon-lucide-x
+      v-if="dismissible"
+      class="text-white hover:cursor-pointer hover:text-gray-300"
+      @click="emit('dismiss')"
+    />
   </div>
 </template>
 
@@ -26,22 +34,32 @@ import IconAlertCircle from "~icons/lucide/alert-circle"
 import IconAlertTriangle from "~icons/lucide/alert-triangle"
 import IconInfo from "~icons/lucide/info"
 
-const props = defineProps<{
-  banner: BannerContent
-}>()
+const props = withDefaults(
+  defineProps<{
+    banner: BannerContent
+    dismissible?: boolean
+  }>(),
+  {
+    dismissible: false,
+  }
+)
 
 const t = useI18n()
 
+const emit = defineEmits<{
+  (e: "dismiss"): void
+}>()
+
 const ariaRoles: Record<BannerType, string> = {
-  error: "alert",
-  warning: "status",
   info: "status",
+  warning: "status",
+  error: "alert",
 }
 
 const bgColors: Record<BannerType, string> = {
-  error: "bg-red-700",
-  warning: "bg-yellow-700",
-  info: "bg-stone-800",
+  info: "bg-info",
+  warning: "bg-warning",
+  error: "bg-error",
 }
 
 const icons = {

packages/hoppscotch-common/src/components/app/Header.vue

@@ -217,7 +217,12 @@
         </div>
       </div>
     </header>
-    <AppBanner v-if="bannerContent" :banner="bannerContent" />
+    <AppBanner
+      v-if="bannerContent"
+      :banner="bannerContent"
+      :dismissible="true"
+      @dismiss="dismissOfflineBanner"
+    />
     <TeamsModal :show="showTeamsModal" @hide-modal="showTeamsModal = false" />
     <TeamsInvite
       v-if="workspace.type === 'team' && workspace.teamID"
@@ -314,6 +319,8 @@ watch(isOnline, () => {
   }
 })
 
+const dismissOfflineBanner = () => banner.removeBanner(bannerID!)
+
 const currentUser = useReadonlyStream(
   platform.auth.getProbableUserStream(),
   platform.auth.getProbableUser()

packages/hoppscotch-common/src/components/http/TestResult.vue

@@ -41,7 +41,7 @@
             <div class="divide-y divide-dividerLight">
               <div
                 v-if="noEnvSelected && !globalHasAdditions"
-                class="flex bg-error p-4 text-secondaryDark"
+                class="flex bg-info p-4 text-secondaryDark"
                 role="alert"
               >
                 <icon-lucide-alert-triangle class="svg-icons mr-4" />

packages/hoppscotch-common/src/components/profile/UserDelete.vue

@@ -26,7 +26,7 @@
         </div>
         <div
           v-else-if="myTeams.length"
-          class="flex flex-col space-y-2 rounded-lg border border-red-500 bg-error p-4 text-secondaryDark"
+          class="flex flex-col space-y-2 rounded-lg border border-red-500 bg-info p-4 text-secondaryDark"
         >
           <h2 class="font-bold text-red-500">
             {{ t("error.danger_zone") }}
@@ -45,7 +45,7 @@
         </div>
         <div v-else>
           <div
-            class="mb-4 flex flex-col space-y-2 rounded-lg border border-red-500 bg-error p-4 text-secondaryDark"
+            class="mb-4 flex flex-col space-y-2 rounded-lg border border-red-500 bg-info p-4 text-secondaryDark"
           >
             <h2 class="font-bold text-red-500">
               {{ t("error.danger_zone") }}