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/assets/themes/base-themes.scss

@@ -20,26 +20,6 @@
   --sidebar-primary-sticky-fold: 2rem;
 }
 
-@mixin dark-theme {
-  --primary-color: #181818;
-  --primary-light-color: #1c1c1e;
-  --primary-dark-color: #262626;
-  --primary-contrast-color: #171717;
-
-  --secondary-color: #a3a3a3;
-  --secondary-light-color: #737373;
-  --secondary-dark-color: #fafafa;
-
-  --divider-color: #262626;
-  --divider-light-color: #1f1f1f;
-  --divider-dark-color: #2d2d2d;
-
-  --error-color: #292524;
-  --tooltip-color: #f5f5f5;
-  --popover-color: #1b1b1b;
-  --editor-theme: "merbivore_soft";
-}
-
 @mixin light-theme {
   --primary-color: #ffffff;
   --primary-light-color: #f9fafb;
@@ -54,12 +34,36 @@
   --divider-light-color: #f3f4f6;
   --divider-dark-color: #d1d5db;
 
-  --error-color: #fef3c7;
+  --info-color: #fef3c7;
+  --warning-color: #fef9c3;
+  --error-color: #fee2e2;
   --tooltip-color: #262626;
   --popover-color: #ffffff;
   --editor-theme: "textmate";
 }
 
+@mixin dark-theme {
+  --primary-color: #181818;
+  --primary-light-color: #1c1c1e;
+  --primary-dark-color: #262626;
+  --primary-contrast-color: #171717;
+
+  --secondary-color: #a3a3a3;
+  --secondary-light-color: #737373;
+  --secondary-dark-color: #fafafa;
+
+  --divider-color: #262626;
+  --divider-light-color: #1f1f1f;
+  --divider-dark-color: #2d2d2d;
+
+  --info-color: #292524;
+  --warning-color: #854d0e;
+  --error-color: #991b1b;
+  --tooltip-color: #f5f5f5;
+  --popover-color: #1b1b1b;
+  --editor-theme: "merbivore_soft";
+}
+
 @mixin black-theme {
   --primary-color: #0f0f0f;
   --primary-light-color: #171717;
@@ -74,7 +78,9 @@
   --divider-light-color: #181818;
   --divider-dark-color: #323232;
 
-  --error-color: #1c1917;
+  --info-color: #1c1917;
+  --warning-color: #713f12;
+  --error-color: #7f1d1d;
   --tooltip-color: #f5f5f5;
   --popover-color: #0f0f0f;
   --editor-theme: "twilight";

packages/hoppscotch-common/locales/en.json

@@ -341,8 +341,8 @@
     "authorization": "The authorization header will be automatically generated when you send the request.",
     "generate_documentation_first": "Generate documentation first",
     "network_fail": "Unable to reach the API endpoint. Check your network connection or select a different Interceptor and try again.",
-    "offline": "You seem to be offline. Data in this workspace might not be up to date.",
+    "offline": "You're using Hoppscotch offline. Updates will sync when you're online, based on workspace settings",
-    "offline_short": "You seem to be offline.",
+    "offline_short": "You're using Hoppscotch offline.",
     "post_request_tests": "Test scripts are written in JavaScript, and are run after the response is received.",
     "pre_request_script": "Pre-request scripts are written in JavaScript, and are run before the request is sent.",
     "script_fail": "It seems there is a glitch in the pre-request script. Check the error below and fix the script accordingly.",

packages/hoppscotch-common/src/components.d.ts

@@ -161,6 +161,7 @@ declare module 'vue' {
     IconLucideSearch: typeof import('~icons/lucide/search')['default']
     IconLucideUsers: typeof import('~icons/lucide/users')['default']
     IconLucideVerified: typeof import('~icons/lucide/verified')['default']
+    IconLucideX: typeof import('~icons/lucide/x')['default']
     InterceptorsErrorPlaceholder: typeof import('./components/interceptors/ErrorPlaceholder.vue')['default']
     InterceptorsExtensionSubtitle: typeof import('./components/interceptors/ExtensionSubtitle.vue')['default']
     LensesHeadersRenderer: typeof import('./components/lenses/HeadersRenderer.vue')['default']

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 class="text-secondaryDark">
-      <span v-if="banner.alternateText" class="md:hidden">
+        <span v-if="banner.alternateText" class="md:hidden">
-        {{ banner.alternateText(t) }}
+          {{ banner.alternateText(t) }}
+        </span>
+        <span :class="{ '<md:hidden': banner.alternateText }">
+          {{ banner.text(t) }}
+        </span>
       </span>
-      <span :class="banner.alternateText ? '<md:hidden' : ''">
+    </div>
-        {{ banner.text(t) }}
+
-      </span>
+    <icon-lucide-x
-    </span>
+      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<{
+const props = withDefaults(
-  banner: BannerContent
+  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",
+  info: "bg-info",
-  warning: "bg-yellow-700",
+  warning: "bg-warning",
-  info: "bg-stone-800",
+  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") }}

packages/hoppscotch-ui/ui-preset.ts

@@ -39,6 +39,8 @@ export default {
         divider: "var(--divider-color)",
         dividerLight: "var(--divider-light-color)",
         dividerDark: "var(--divider-dark-color)",
+        info: "var(--info-color)",
+        warning: "var(--warning-color)",
         error: "var(--error-color)",
         tooltip: "var(--tooltip-color)",
         popover: "var(--popover-color)",