Merge pull request #1433 from bcgov/feature/alerts

Standard alerts.
bcgov · Mar 13, 2024 · 8341b55 · 8341b55
2 parents 7c24d7b + 20729d6
commit 8341b55
Show file tree

Hide file tree

Showing 20 changed files with 55 additions and 82 deletions.
diff --git a/frontend/src/components/AddStudent.vue b/frontend/src/components/AddStudent.vue
@@ -3,10 +3,10 @@
     <v-alert
       id="addStudentAlert"
       v-model="alert"
-      dense
-      outlined
-      dismissible
-      :class="alertType"
+      density="compact"
+      variant="tonal"
+      closable="true"
+      :type="alertType"
       class="mb-3"
     >
       {{ alertMessage }}

diff --git a/frontend/src/components/MsieBanner.vue b/frontend/src/components/MsieBanner.vue
@@ -1,14 +1,16 @@
 <template>
   <v-alert
     id="banner"
-    dense
-    type="error"
-    dismissible
-  >
-    Your current web browser, Microsoft Internet Explorer, is not supported for this service. Use one of these web browsers: Microsoft Edge, Mozilla Firefox, Google Chrome, or Apple Safari.
-  </v-alert>
+    closable="true"
+    density="compact"
+    variant="tonal"
+    type="warning"
+    text="Your current web browser, Microsoft Internet Explorer, is not supported for this service. Use one of these web browsers: Microsoft Edge, Mozilla Firefox, Google Chrome, or Apple Safari."
+  />
 </template>
 
+<script setup>
+</script>
 <style scoped>
 
 #banner {

diff --git a/frontend/src/components/SecureExchange/NewMessagePage.vue b/frontend/src/components/SecureExchange/NewMessagePage.vue
@@ -212,6 +212,7 @@
         <v-alert
           v-model="fileSizeAlert"
           density="compact"
+          variant="tonal"
           type="error"
         >
           {{ `Total files must be less than ${humanFileSize(fileRequirements.maxSize)}. Please remove some uploads. You may upload additional files later.` }}

diff --git a/frontend/src/components/admin/SchoolUsersAccessDetailsPage.vue b/frontend/src/components/admin/SchoolUsersAccessDetailsPage.vue
@@ -238,17 +238,12 @@
               >
                 <v-col class="mx-3 mb-3">
                   <v-alert
-                    dense
-                    color="#E9EBEF"
-                    outlined
+                    id="no-activation-code-banner"
+                    density="compact"
                     type="info"
-                    class="pa-2"
-                  >
-                    <span
-                      id="no-activation-code-banner"
-                      style="color: #003366"
-                    >Before adding users, a Primary Activation Code must be generated.</span>
-                  </v-alert>
+                    variant="tonal"
+                    text="Before adding users, a Primary Activation Code must be generated."
+                  />
                 </v-col>
               </v-row>
             </v-card>

diff --git a/frontend/src/components/common/DocumentUpload.vue b/frontend/src/components/common/DocumentUpload.vue
@@ -44,10 +44,10 @@
       </v-form>
       <v-alert
         v-model="alert"
-        dense
-        outlined
-        dismissible
-        :class="alertType"
+        density="compact"
+        closable="true"
+        variant="tonal"
+        :type="alertType"
         class="mb-3"
       >
         {{ alertMessage }}

diff --git a/frontend/src/components/common/EditStudent.vue b/frontend/src/components/common/EditStudent.vue
@@ -326,8 +326,8 @@
             <v-row v-if="hasError">
               <v-col>
                 <v-alert
-                  class="clear-message-error"
-                  icon="mdi-alert-circle-outline"
+                  type="warning"
+                  variant="tonal"
                   text="Warning! Updates to student details will not be saved until all errors are fixed."
                 />
               </v-col>
@@ -434,9 +434,9 @@
           </v-col>
           <v-col v-else-if="sdcSchoolCollectionStudentDetailCopy?.sdcSchoolCollectionStudentValidationIssues?.length === 0">
             <v-alert
-              dismissible="true"
-              class="clear-message success-message"
-              icon="mdi-check-circle-outline"
+              closable="true"
+              type="success"
+              variant="tonal"
               text="There are no errors or warnings on this student record."
             />
           </v-col>

diff --git a/frontend/src/components/common/forms/SchoolContactsForm.vue b/frontend/src/components/common/forms/SchoolContactsForm.vue
@@ -21,8 +21,6 @@
           <v-alert
             id="nonEditableAlert"
             density="compact"
-            color="#003366"
-            icon="mdi-help-circle-outline"
             type="info"
             variant="tonal"
           >
@@ -95,15 +93,11 @@
           >
             <v-alert
               :id="`publiclyAvailableAlert${schoolContactType.label}`"
-              color="#003366"
               density="compact"
               type="info"
               variant="tonal"
-            >
-              <p>
-                Contacts of this type are only available to the ministry and not available to public.
-              </p>
-            </v-alert>
+              text="Contacts of this type are only available to the ministry and not available to public."
+            />
           </v-col>
         </v-row>
         <v-row

diff --git a/frontend/src/components/common/forms/SchoolDetailsForm.vue b/frontend/src/components/common/forms/SchoolDetailsForm.vue
@@ -12,8 +12,6 @@
           <v-alert
             id="nonEditableAlert"
             density="compact"
-            color="#003366"
-            icon="mdi-help-circle-outline"
             type="info"
             variant="tonal"
           >

diff --git a/frontend/src/components/district/DistrictContacts.vue b/frontend/src/components/district/DistrictContacts.vue
@@ -127,15 +127,11 @@
           >
             <v-alert
               :id="`publiclyAvailableAlert${districtContactType.label}`"
-              color="#003366"
               density="compact"
               type="info"
               variant="tonal"
-            >
-              <p>
-                Contacts of this type are only available to the ministry and not available to public.
-              </p>
-            </v-alert>
+              text="Contacts of this type are only available to the ministry and not available to public."
+            />
           </v-col>
         </v-row>
         <v-row

diff --git a/frontend/src/components/district/EditDistrictContactPage.vue b/frontend/src/components/district/EditDistrictContactPage.vue
@@ -14,14 +14,13 @@
             <v-alert
               width="100%"
               density="compact"
-              color="#E9EBEF"
               type="info"
+              variant="tonal"
             >
-              <p style="color: #003366">
+              <p>
                 District contacts will be <strong>available to the public as of start date</strong>.
               </p>
               <p
-                style="color: #003366"
                 class="mb-1"
               >
                 Please be sure to review the new contact details carefully before saving.

diff --git a/frontend/src/components/district/NewDistrictContactPage.vue b/frontend/src/components/district/NewDistrictContactPage.vue
@@ -15,16 +15,15 @@
           <v-col>
             <v-alert
               width="100%"
-              color="#E9EBEF"
-              dense
+              density="compact"
+              variant="tonal"
               type="info"
             >
-              <p style="color: #003366">
+              <p>
                 District contacts will be <strong>available to the public as of start date</strong>.
               </p>
               <p
                 class="mb-1"
-                style="color: #003366"
               >
                 Please be sure to review the new contact details carefully before saving.
               </p>

diff --git a/frontend/src/components/school/EditSchoolContactPage.vue b/frontend/src/components/school/EditSchoolContactPage.vue
@@ -13,18 +13,13 @@
           <v-col>
             <v-alert
               v-if="editContact.schoolContactTypeCode === SCHOOL_CONTACT_TYPES.SAFE_COORD"
-              color="#003366"
               density="compact"
               type="info"
               variant="tonal"
-            >
-              <p>
-                Contacts of this type are only available to the ministry and not available to public.
-              </p>
-            </v-alert>
+              text="Contacts of this type are only available to the ministry and not available to public."
+            />
             <v-alert
               v-else
-              color="#003366"
               density="compact"
               type="info"
               variant="tonal"

diff --git a/frontend/src/components/school/NewSchoolContactPage.vue b/frontend/src/components/school/NewSchoolContactPage.vue
@@ -12,16 +12,15 @@
         <v-row class="d-flex justify-center">
           <v-col>
             <v-alert
-              color="#E9EBEF"
-              dense
+              density="compact"
+              variant="tonal"
               type="info"
             >
-              <p style="color: #003366">
+              <p>
                 School contacts will be
                 <strong>available to the public as of start date.</strong>
               </p>
               <p
-                style="color: #003366"
                 class="mb-1"
               >
                 Please be sure to review the new contact details carefully before saving.

diff --git a/frontend/src/components/sdcCollection/StepFiveSchoolContacts.vue b/frontend/src/components/sdcCollection/StepFiveSchoolContacts.vue
@@ -4,12 +4,10 @@
       <v-col>
         <v-alert
           density="compact"
-          color="#003366"
           type="info"
           variant="tonal"
-        >
-          Please review and verify that the details on the record for the school are accurate.
-        </v-alert>
+          text="Please review and verify that the details on the record for the school are accurate."
+        />
       </v-col>
     </v-row>
 

diff --git a/frontend/src/components/sdcCollection/StepFourSchoolDetails.vue b/frontend/src/components/sdcCollection/StepFourSchoolDetails.vue
@@ -7,12 +7,10 @@
       <v-col>
         <v-alert
           density="compact"
-          color="#003366"
           type="info"
           variant="tonal"
-        >
-          Please review and verify that the details on the record for the school are accurate.
-        </v-alert>
+          text="Please review and verify that the details on the record for the school are accurate."
+        />
       </v-col>
     </v-row>
 

diff --git a/frontend/src/components/sdcCollection/stepOneUploadData/StepOneUploadData.vue b/frontend/src/components/sdcCollection/stepOneUploadData/StepOneUploadData.vue
@@ -19,6 +19,7 @@
       <v-col>
         <v-alert
           density="compact"
+          variant="tonal"
           type="error"
           :text="fileUploadErrorMessage"
         />
@@ -132,6 +133,7 @@
       <v-col>
         <v-alert
           density="compact"
+          variant="tonal"
           type="error"
           :text="fileUploadErrorMessage"
         />

diff --git a/frontend/src/components/sdcCollection/stepOneUploadData/SummaryComponent.vue b/frontend/src/components/sdcCollection/stepOneUploadData/SummaryComponent.vue
@@ -20,7 +20,7 @@
         density="compact"
         type="error"
         variant="tonal"
-        data-cy="headcount-error-banner"
+        id="headcount-error-banner"
       >
         <strong>{{ studentsInError }} students</strong> reported with errors - these students are <strong>not included in the summary counts</strong>. Eligible FTE count will be generated once all errors have been fixed in the next step.
       </v-alert>

diff --git a/frontend/src/components/sdcCollection/stepThreeVerifyData/StepThreeVerifyData.vue b/frontend/src/components/sdcCollection/stepThreeVerifyData/StepThreeVerifyData.vue
@@ -88,14 +88,12 @@
       </v-window-item>
     </v-window>
     <v-alert
-      color="#003366"
       density="compact"
       type="info"
       variant="tonal"
-      data-cy="estimated-info-banner"
-    >
-      All FTE Values, Program Headcounts, and Program Eligibility are estimated results and still require a final review from the ministry staff.
-    </v-alert>
+      id="estimated-info-banner"
+      text="All FTE Values, Program Headcounts, and Program Eligibility are estimated results and still require a final review from the ministry staff."
+    />
   </div>
 
   <v-row justify="end">

diff --git a/frontend/src/components/sdcCollection/stepThreeVerifyData/ViewStudentDetailsComponent.vue b/frontend/src/components/sdcCollection/stepThreeVerifyData/ViewStudentDetailsComponent.vue
@@ -17,7 +17,6 @@
         >
           <v-alert
             id="eligible-fte-banner"
-            color="#003366"
             density="compact"
             type="info"
             variant="tonal"

diff --git a/frontend/src/components/sdcCollection/stepTwoValidateData/StepTwoViewDataIssues.vue b/frontend/src/components/sdcCollection/stepTwoValidateData/StepTwoViewDataIssues.vue
@@ -214,8 +214,8 @@
             class="mr-3"
           >
             <v-alert
-              class="clear-message-error"
-              icon="mdi-alert-outline"
+              type="warning"
+              variant="tonal"
               text="There are no results for the selected category."
             />
           </v-col>
@@ -294,8 +294,8 @@
       </v-col>
       <v-col v-else-if="!isLoading()">
         <v-alert
-          class="clear-message success-message"
-          icon="mdi-check-circle-outline"
+          type="success"
+          variant="tonal"
           text="Congratulations! There are no errors or warnings in the 1701 Submission"
         />
       </v-col>