24289 - update styles for banner, fix styles for header (#74)

* 24289 - style: fix flexgrid to wrap on small sized screens and smaller

* 24289 - style: udpate alert style.

* fix: eslint

src/components/bcros/SystemBanner.vue

@@ -2,25 +2,35 @@
   <UAlert
     v-show="!!message && !close"
     class="border-b-2 border-yellow-400 py-0"
-    color="yellow"
-    :description="message"
+    color="orange"
     variant="solid"
-    :close-button="{ class: 'pr-2 text-gray-900' }"
+    :close-button="false"
     :ui="{ rounded: 'rounded-none', padding: 'p-0', gap: 'app-inner-container py-2' }"
-    @close="close = true"
   >
-    <template #icon>
+    <template v-if="icon" #icon>
       <!-- NB: needed due to icon sizing via app.config / ui config for alert is not getting applied -->
       <UIcon class="ml-[-2px] text-[34px]" :name="icon" />
     </template>
+    <template v-if="message" #description>
+      <div class="flex w-full justify-center text-[16px]">
+        <span class="blue-links" v-html="message" />
+      </div>
+    </template>
   </UAlert>
 </template>
 
 <script setup lang="ts">
 defineProps({
   dismissible: { type: Boolean, default: false },
-  icon: { type: String, default: 'i-mdi-information' },
+  icon: { type: String, default: '' },
   message: { type: String, default: '' }
 })
 const close = ref(false)
 </script>
+
+<style>
+.blue-links a {
+  color: #1669BB;
+  text-decoration: underline;
+}
+</style>

src/components/bcros/header/Index.vue

@@ -4,9 +4,13 @@
     class="bg-bcGovColor-darkBlue border-b-2 border-yellow-400"
     data-cy="bcros-header"
   >
-    <div id="bcros-main-header__container">
-      <nav id="bcros-main-header__container__actions" class="flex flex-wrap content-center h-[50px] w-full">
-        <a id="bcros-main-header__container__actions__home-redirect" class="flex" @click="goToBcrosHome()">
+    <div id="bcros-main-header__container" class="flex max-w-bcros mx-auto h-[68px] justify-center">
+      <nav id="bcros-main-header__container__actions" class="flex flex-wrap content-center w-full">
+        <a
+          id="bcros-main-header__container__actions__home-redirect"
+          class="flex justify-center items-center"
+          @click="goToBcrosHome()"
+        >
           <picture>
             <source media="(max-width:600px)" srcset="@/assets/images/gov_bc_logo_vert.png">
             <img src="@/assets/images/gov_bc_logo_horiz.png" alt="Government of British Columbia Logo">

src/layouts/business.vue

@@ -25,10 +25,12 @@ onMounted(async () => {
   </div>
   <div v-show="!dashboardIsLoading" class="app-container" data-cy="default-layout">
     <bcros-header />
-    <bcros-system-banner
-      class="justify-center"
-      :message="systemMessage"
-    />
+    <div class="justify-center">
+      <bcros-system-banner
+        class="justify-center "
+        :message="systemMessage"
+      />
+    </div>
     <bcros-breadcrumb v-if="crumbConstructors.length > 0" :crumb-constructors="crumbConstructors" />
     <bcros-business-details />
     <div class="app-inner-container app-body">

tailwind.config.ts

@@ -13,6 +13,9 @@ export default {
         bcGovColor: {
           darkBlue: '#003366'
         },
+        orange: {
+          500: '#FB8C00'
+        },
         // used color generator recommended by tailwind docs: https://uicolors.app/create
         bcGovGray: {
           50: '#f8f9fa',