minor cleanup in prep for consolidation across projects

nuxt.config.ts

@@ -59,7 +59,7 @@ export default defineNuxtConfig({
       registryHomeURL: process.env.VUE_APP_REGISTRY_HOME_URL || '',
       appEnv: `${process.env.VUE_APP_POD_NAMESPACE || 'unknown'}`,
       requireLogin: true,
-      version: process.env.npm_package_version || '',
+      version: `BCROS Business Dashboard UI v${process.env.npm_package_version || ''}`,
       appName: process.env.npm_package_name || ''
     }
   }

src/app/router.options.ts

@@ -9,7 +9,7 @@ export default <RouterConfig> {
       path: '/:identifier',
       component: () => import('~/pages/dashboard.vue').then(r => r.default || r),
       meta: {
-        layout: 'default',
+        layout: 'business',
         title: 'Business Dashboard',
         breadcrumbs: [getBcrosHomeCrumb, getRegistryDashCrumb, getBusinessDashCrumb]
       }

src/assets/styles/layout.scss

@@ -3,6 +3,10 @@
   @apply bg-gray-100 text-gray-700 min-h-[100vh] flex flex-col;
 }
 
+.app-inner-container {
+  @apply max-w-[1360px] w-[100vw] mx-auto px-4;
+}
+
 .app-body {
-  @apply grow relative max-w-[1360px] w-[100vw] mx-auto my-0 px-4 py-0;
+  @apply grow relative;
 }

src/components/bcros/Breadcrumb.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="bg-blue-350" data-cy="bcros-breadcrumb">
-    <div class="flex flex-wrap divide-x divide-white mx-auto py-[7px] px-4 h-[45px] w-full max-w-[1360px] text-white">
+    <div class="flex flex-wrap divide-x divide-white py-[7px] h-[45px] text-white app-inner-container">
       <UButton
         class="mr-3 mt-[1px] px-1 h-[28px] w-[28px] rounded-full"
         color="white"

src/components/bcros/BusinessDetails.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="bcros-business-details" class="bg-white h-[150px]" data-cy="business-details">
-    <div class="grid grid-cols-2 m-auto px-4 pt-5 w-full max-w-[1360px] text-bcGovGray-900">
+    <div class="grid grid-cols-2 pt-5 text-bcGovGray-900 app-inner-container">
       <div class="col-auto" data-cy="business-details-name">
         <h2 class="font-bold text-xl">
           {{ currentBusinessName }}

src/components/bcros/Footer.vue

@@ -3,7 +3,7 @@
     class="flex items-center h-[56px] border-t-2 border-yellow-400 bg-bcGovColor-darkBlue text-sm"
     data-cy="bcros-footer"
   >
-    <div class="m-auto px-4 h-[30.5px] w-full max-w-[1360px]">
+    <div class="h-[30.5px] w-full app-inner-container">
       <nav class="flex flex-grow">
         <ul class="p-0 -ml-2 list-none">
           <li v-for="link in links" :key="link.text" class="inline-block mr-2 pr-2 border-r last:mr-0 last:border-r-0">

src/components/bcros/header/Index.vue

@@ -6,7 +6,7 @@
   >
     <div
       id="bcros-main-header__container"
-      class="flex flex-wrap content-center m-auto px-4 h-[68px] w-full max-w-[1360px]"
+      class="flex flex-wrap content-center h-[68px] app-inner-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()">

src/layouts/business.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="app-container" data-cy="default-layout">
+    <bcros-header />
+    <bcros-system-banner
+      class="justify-center"
+      :message="systemMessage"
+    />
+    <bcros-breadcrumb v-if="crumbConstructors.length > 0" :crumb-constructors="crumbConstructors" />
+    <bcros-business-details />
+    <div class="app-inner-container app-body">
+      <slot />
+    </div>
+    <bcros-footer :about-text="version" />
+  </div>
+</template>
+
+<script setup lang="ts">
+const route = useRoute()
+const crumbConstructors = computed(() => (route?.meta?.breadcrumbs || []) as (() => BreadcrumbI)[])
+
+const systemMessage = ref('')
+onMounted(async () => {
+  await useBcrosLaunchdarkly().ldClient.waitUntilReady()
+  systemMessage.value = useBcrosLaunchdarkly().getStoredFlag('banner-text')
+})
+
+const version = useRuntimeConfig().public.version
+</script>
+
+<style scoped>
+
+</style>

src/layouts/default.vue

@@ -6,11 +6,10 @@
       :message="systemMessage"
     />
     <bcros-breadcrumb v-if="crumbConstructors.length > 0" :crumb-constructors="crumbConstructors" />
-    <bcros-business-details />
-    <div class="app-body">
+    <div class="app-inner-container app-body">
       <slot />
     </div>
-    <bcros-footer :about-text="'BCROS Business Dashboard UI v' + version" />
+    <bcros-footer :about-text="version" />
   </div>
 </template>