Fix Availability Page and Settings Page NoticeBar styles (#1402)

* Fix Availability NoticeBar styles

* Fix Settings NoticeBar styles

Author: davinotdavid

frontend/src/views/AvailabilityView/index.vue

@@ -3,14 +3,14 @@ import { inject, ref, useTemplateRef } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { storeToRefs } from 'pinia';
 import { callKey, dayjsKey } from '@/keys';
-import { LinkButton, NoticeBar, NoticeBarTypes, PrimaryButton } from '@thunderbirdops/services-ui';
+import { IconButton, LinkButton, NoticeBar, NoticeBarTypes, PrimaryButton } from '@thunderbirdops/services-ui';
+import { PhX } from '@phosphor-icons/vue';
 import { createAvailabilityStore } from '@/stores/availability-store';
 import { createScheduleStore } from '@/stores/schedule-store';
 import { useUserStore } from '@/stores/user-store';
 import { deepClone } from '@/utils';
 import { Alert, Availability } from '@/models';
-import { DateFormatStrings, AlertSchemes } from '@/definitions';
-import AlertBox from '@/elements/AlertBox.vue';
+import { DateFormatStrings } from '@/definitions';
 
 import AvailabilitySettings from './components/AvailabilitySettings/index.vue';
 import BookingPageDetails from './components/BookingPageDetails/index.vue';
@@ -110,7 +110,13 @@ async function onSaveChanges() {
   })
 }
 
+function clearNotices() {
+  validationError.value = null;
+  saveSuccess.value = null;
+}
+
 function onRevertChanges() {
+  clearNotices();
   availabilityStore.revertChanges();
 }
 </script>
@@ -154,20 +160,41 @@ export default {
       </template>
     </notice-bar>
 
-    <alert-box
-      class="alert-box"
-      v-if="validationError"
-      :alert="validationError"
-      @close="validationError = null"
-    />
+    <notice-bar
+      v-else-if="validationError"
+      :type="NoticeBarTypes.Critical"
+      class="notice-bar"
+    >
+      {{ validationError.title }}
+
+      <template #cta>
+        <icon-button
+          @click="clearNotices"
+          :title="t('label.close')"
+          class="btn-close"
+        >
+          <ph-x />
+        </icon-button>
+      </template>
+    </notice-bar>
 
-    <alert-box
-      class="alert-box"
+    <notice-bar
       v-else-if="saveSuccess"
-      :alert="saveSuccess"
-      :scheme="AlertSchemes.Success"
-      @close="saveSuccess = null"
-    />
+      :type="NoticeBarTypes.Success"
+      class="notice-bar"
+    >
+      {{ saveSuccess.title }}
+
+      <template #cta>
+        <icon-button
+          @click="clearNotices"
+          :title="t('label.close')"
+          class="btn-close"
+        >
+          <ph-x />
+        </icon-button>
+      </template>
+    </notice-bar>
 
     <form ref="availability-form" @submit.prevent>
       <div class="page-content">
@@ -223,6 +250,11 @@ export default {
   position: sticky;
   top: 5rem;
   z-index: 50;
+
+  .btn-close {
+    height: 2.375rem;
+    width: 2.375rem;
+  }
 }
 
 .page-content {
@@ -232,10 +264,6 @@ export default {
   margin-block-end: 2rem;
 }
 
-.alert-box {
-  margin-block-end: 2rem;
-}
-
 .page-content-right {
   display: grid;
   gap: 2rem;

frontend/src/views/SettingsView/index.vue

@@ -5,17 +5,16 @@ import {
 import { useRoute, useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { storeToRefs } from 'pinia';
-import { PrimaryButton, LinkButton } from '@thunderbirdops/services-ui';
+import { PrimaryButton, LinkButton, NoticeBar, NoticeBarTypes, IconButton } from '@thunderbirdops/services-ui';
 import { enumToObject } from '@/utils';
 import { callKey } from '@/keys';
-import { SettingsSections, AlertSchemes, ColourSchemes } from '@/definitions';
+import { SettingsSections, ColourSchemes } from '@/definitions';
 import { Alert, SubscriberResponse } from '@/models';
-import AlertBox from '@/elements/AlertBox.vue';
 import { useUserStore } from '@/stores/user-store';
 import { useCalendarStore } from '@/stores/calendar-store';
 import { useScheduleStore } from '@/stores/schedule-store';
 import { createSettingsStore } from '@/stores/settings-store';
-import { PhCaretRight } from '@phosphor-icons/vue';
+import { PhCaretRight, PhX } from '@phosphor-icons/vue';
 
 // Page sections
 import AccountSettings from './components/AccountSettings.vue';
@@ -196,7 +195,14 @@ async function onSaveChanges() {
   }
 }
 
+function clearNotices() {
+  validationError.value = null;
+  saveSuccess.value = null;
+}
+
 function onRevertChanges() {
+  clearNotices();
+
   settingsStore.revertChanges();
 }
 
@@ -227,20 +233,39 @@ export default {
     <h2>{{ t('label.settings') }}</h2>
   </header>
 
-  <alert-box
-    class="alert-box"
+  <notice-bar
+    class="notice-bar"
     v-if="validationError"
-    :alert="validationError"
-    @close="validationError = null"
-  />
+    :type="NoticeBarTypes.Critical"
+  >
+    {{ validationError.title }}
+
+    <template #cta>
+      <icon-button
+        @click="clearNotices"
+        :title="t('label.close')"
+      >
+        <ph-x />
+      </icon-button>
+    </template>
+  </notice-bar>
 
-  <alert-box
-    class="alert-box"
+  <notice-bar
+    class="notice-bar"
     v-else-if="saveSuccess"
-    :alert="saveSuccess"
-    :scheme="AlertSchemes.Success"
-    @close="saveSuccess = null"
-  />
+    :type="NoticeBarTypes.Success"
+  >
+    {{ saveSuccess.title }}
+
+    <template #cta>
+      <icon-button
+        @click="clearNotices"
+        :title="t('label.close')"
+      >
+        <ph-x />
+      </icon-button>
+    </template>
+  </notice-bar>
 
   <div class="main-container">
     <!-- sidebar navigation -->
@@ -310,7 +335,7 @@ section {
   margin-block-end: 2rem;
 }
 
-.alert-box {
+.notice-bar {
   margin-block-end: 2rem;
 }