close icon added

frontend/src/assets/stylesheets/components/alerts.scss

@@ -1,3 +1,10 @@
 .v-alert-title {
   text-transform: capitalize !important;
+}
+
+.v-alert__close {
+  .v-icon:before {
+    position: relative;
+    content: "✖";
+  }
 }

frontend/src/components/shared/AlertItem.vue

@@ -1,5 +1,18 @@
 <template>
   <v-alert
+    v-model="alert"
+    border="start"
+    variant="tonal"
+    closable
+    close-label="Close Alert"
+    color="deep-purple-accent-4"
+    title="Closable Alert"
+  >
+    Aenean imperdiet. Quisque id odio. Cras dapibus. Pellentesque ut neque. Cras dapibus.
+
+    Vivamus consectetuer hendrerit lacus. Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Curabitur blandit mollis lacus. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo.
+  </v-alert>
+  <!-- <v-alert
     v-if="alert"
     border="start"
     variant="tonal"
@@ -9,7 +22,7 @@
     :text="alert?.message"
     :type="alert?.type"
     :icon="alert?.icon"
-  />
+  /> -->
 </template>
 
 <script lang="ts" setup>
@@ -18,9 +31,4 @@ import { useAlertStore } from "@/store";
 
 const alertStore = useAlertStore();
 const { alert } = storeToRefs(alertStore);
-
-const icon = (type) => {
-  console.log(`$${type}`)
-  return `$${type}`;
-}
 </script>

frontend/src/plugins/index.ts

@@ -9,18 +9,27 @@ import { loadFonts } from './webfontloader'
 import vuetify from './vuetify'
 import { createPinia } from 'pinia'
 import router from '@/router'
-import VueDatePicker from '@vuepic/vue-datepicker';
+
+import VueDatePicker from '@vuepic/vue-datepicker'
+import { library } from "@fortawesome/fontawesome-svg-core"
+import { fas } from "@fortawesome/free-solid-svg-icons"
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome"
+
 import '@vuepic/vue-datepicker/dist/main.css'
+import '@fortawesome/fontawesome-free/css/all.css'
 
 import { Vue3Mq } from "vue3-mq";
 
+library.add(fas)
+
 // Types
 import type { App } from 'vue'
 
 export function registerPlugins (app: App) {
   loadFonts()
   app
     .component('VueDatePicker', VueDatePicker)
+    .component("font-awesome-icon", FontAwesomeIcon)
     .use(vuetify)
     .use(router)
     .use(Vue3Mq, {