SDCI-98: Added alert to direct users to Info hub to learn about new E…

…DX process

frontend/src/assets/main.css

@@ -12,6 +12,12 @@ a {
   color: #2a6496;
 }
 
+/** Need to look at how CSS is loaded in since Vuetify defaults are overriding our custom CSS.
+Fixing this now could risk delaying other releases, so we will have to wait on this one - SF **/
+.v-alert, .v-alert--variant-outlined {
+  border-radius: 8px !important;
+}
+
 @media (max-width: 768px) {
   #app {
     min-width: 1130px; /* Adjust as needed */

frontend/src/components/SchoolSelect.vue

@@ -4,6 +4,7 @@ import { useAppStore } from '@/stores/app'
 import router from '@/router'
 import { useSanitizeURL } from '@/composables/string'
 import DownloadSchoolsModal from '@/components/DownloadSchoolsModal.vue'
+import DisplayAlert from '@/components/common/DisplayAlert.vue'
 
 // Type Imports
 import type { ListSchool } from '@/types/types'
@@ -35,11 +36,12 @@ function goToSchoolSearch() {
 <template>
   <v-container fluid class="pt-0">
     <v-sheet elevation="2" class="py-6 full-width">
+      <DisplayAlert />
       <v-row no-gutters justify="space-between">
         <img
           src="@/assets/images/BCMapGraphic.png"
           alt="Map of British Columbia"
-          style="height: 268px; position: absolute; top: 50px; left: -80px"
+          style="height: 268px; position: absolute; top: 120px; left: -80px"
         />
         <v-spacer />
         <v-col lg="6" md="8" class="ml-0 py-6 school-search">

frontend/src/components/common/DisplayAlert.vue

@@ -0,0 +1,11 @@
+<script></script>
+
+<template>
+  <v-alert type="info" color="primary" variant="outlined" style="background-color: #f6f9fc"
+    >The information on this page is provided by schools and districts through the Education Data
+    Exchange (EDX).
+    <a href="https://www2.gov.bc.ca/gov/content?id=0F6C7869EEC844F190091E71D6BA3B58"
+      >Learn more.</a
+    ></v-alert
+  >
+</template>

frontend/src/views/AuthorityView.vue

@@ -11,6 +11,7 @@ import { useSanitizeURL } from '@/composables/string'
 
 // import common components
 import DisplayAddress from '@/components/common/DisplayAddress.vue'
+import DisplayAlert from '@/components/common/DisplayAlert.vue'
 
 const appStore = useAppStore()
 const authorityId = ref<any>(null) // Initialize with null initially
@@ -212,6 +213,7 @@ onMounted(async () => {
       ]"
     ></v-breadcrumbs>
     <v-sheet style="z-index: 100; position: relative" elevation="2" class="py-6 full-width">
+      <DisplayAlert />
       <v-row no-gutters justify="space-between">
         <v-col>
           <h1 class="mt-3 mb-2">

frontend/src/views/ContactsView.vue

@@ -4,6 +4,8 @@ import { ref, onMounted } from 'vue'
 import InstituteService from '@/services/InstituteService'
 import jsonexport from 'jsonexport/dist'
 
+import DisplayAlert from '@/components/common/DisplayAlert.vue'
+
 const appStore = useAppStore()
 // used for open and close modal
 const dialog = ref(false)
@@ -111,6 +113,7 @@ onMounted(() => {
       <v-row no-gutters justify="space-between">
         <v-spacer />
         <v-col cols="12">
+          <DisplayAlert />
           <h2 class="mt-3 mb-2">Find District Contacts by Type</h2>
           <v-row>
             <v-autocomplete

frontend/src/views/DistrictView.vue

@@ -10,6 +10,8 @@ import jsonexport from 'jsonexport/dist'
 import { useSanitizeURL } from '@/composables/string'
 // import common components
 import DisplayAddress from '@/components/common/DisplayAddress.vue'
+import DisplayAlert from '@/components/common/DisplayAlert.vue'
+
 const appStore = useAppStore()
 const districtId = ref<string | null>(null) // Initialize with null initially
 const district = reactive({ value: {} as District })
@@ -187,6 +189,7 @@ onMounted(async () => {
     ></v-breadcrumbs>
 
     <v-sheet style="z-index: 100; position: relative" elevation="2" class="py-6 full-width">
+      <DisplayAlert />
       <v-row no-gutters justify="space-between">
         <v-col v-if="district.value.districtData">
           <v-row no-gutters>

frontend/src/views/OffshoreView.vue

@@ -5,6 +5,8 @@ import { reactive, onBeforeMount, ref } from 'vue'
 import { distNumberFromMincode } from '@/utils/common'
 import jsonexport from 'jsonexport/dist'
 import DisplayAddress from '@/components/common/DisplayAddress.vue'
+import DisplayAlert from '@/components/common/DisplayAlert.vue'
+
 const appStore = useAppStore()
 const { offshoreSchools } = storeToRefs(appStore)
 const schoolSearch = ref('')
@@ -129,9 +131,10 @@ onBeforeMount(() => {
       :items="[{ title: 'Home', href: '/' }, 'Offshore Schools']"
     ></v-breadcrumbs>
     <v-sheet style="z-index: 100; position: relative" elevation="2" class="py-6 full-width">
+      <DisplayAlert />
       <v-row no-gutters justify="space-between">
         <v-col>
-          <h2 class="mt-3 mb-2">Offshore Schools</h2>
+          <h1 class="mt-3 mb-2">Offshore Schools</h1>
         </v-col>
         <v-spacer />
         <v-col cols="3"

frontend/src/views/SchoolSearchView.vue

@@ -3,6 +3,8 @@ import { ref, onMounted, onBeforeMount, isProxy, toRaw } from 'vue'
 import { useAppStore } from '@/stores/app'
 import InstituteService from '@/services/InstituteService'
 import DisplayAddress from '@/components/common/DisplayAddress.vue'
+import DisplayAlert from '@/components/common/DisplayAlert.vue'
+
 const currentDate: Date = new Date()
 const appStore = useAppStore()
 const jurisdictions = ref([])
@@ -225,8 +227,9 @@ onBeforeMount(async () => {
       :items="[{ title: 'Home', href: '/' }, 'Search']"
     ></v-breadcrumbs>
     <v-sheet style="z-index: 100; position: relative" elevation="2" class="py-6 full-width">
+      <DisplayAlert />
       <v-container class="main">
-        <h2>Find Schools</h2>
+        <h1>Find Schools</h1>
         <v-row>
           <v-col cols="12" md="3">
             <v-select

frontend/src/views/SchoolView.vue

@@ -8,6 +8,7 @@ import type { School, Grade } from '@/types/types.d.ts'
 import jsonexport from 'jsonexport/dist'
 import { distNumberFromMincode, formatPhoneNumber } from '@/utils/common'
 import DisplayAddress from '@/components/common/DisplayAddress.vue'
+import DisplayAlert from '@/components/common/DisplayAlert.vue'
 import { useSanitizeURL } from '@/composables/string'
 const appStore = useAppStore()
 
@@ -203,6 +204,7 @@ function goToDistrict() {
     ></v-breadcrumbs>
 
     <v-sheet style="z-index: 100; position: relative" elevation="2" class="py-6 full-width">
+      <DisplayAlert />
       <v-row no-gutters justify="space-between">
         <v-row v-if="schoolData.value" no-gutters justify="space-between">
           <v-col>