Fixes to alert visibility and icon

src/main.ts

@@ -27,6 +27,7 @@ import {
   faEllipsisVertical,
   faSpinner,
   faCircleCheck,
+  faXmark,
 } from "@fortawesome/free-solid-svg-icons";
 
 library.add(
@@ -46,7 +47,8 @@ library.add(
   faCalendar,
   faEllipsisVertical,
   faSpinner,
-  faCircleCheck
+  faCircleCheck,
+  faXmark
 );
 
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";

src/views/NewEditProjectView.vue

@@ -68,7 +68,7 @@
       class="close-button bg-slate-200 w-8 leading-loose rounded-full absolute top-2 right-2"
       @click="onClickClose()"
     >
-      <i class="fa-solid fa-xmark"></i>
+      <fa icon="xmark"></fa>
     </button>
     <h4 class="font-bold pr-5">{{ alertTitle }}</h4>
     <p>{{ alertMessage }}</p>
@@ -265,7 +265,7 @@ export default class NewEditProjectView extends Vue {
   isAlertVisible = false;
   public computedAlertClassNames() {
     return {
-      hidden: this.isAlertVisible,
+      hidden: !this.isAlertVisible,
       "dismissable-alert": true,
       "bg-slate-100": true,
       "p-5": true,