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/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()