First roll out of an AlertMessage control

src/components/AlertMessage.vue

@@ -12,12 +12,12 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue } from "vue-facing-decorator";
+import { Component, Prop, Vue } from "vue-facing-decorator";
 
 @Component
 export default class AlertMessage extends Vue {
-  alertTitle = "";
+  @Prop alertTitle = "";
-  alertMessage = "";
+  @Prop alertMessage = "";
 
   public onClickClose() {
     this.alertTitle = "";

src/views/HomeView.vue

@@ -106,18 +106,10 @@
       </ul>
     </div>
   </section>
-
+  <AlertMessage
-  <!-- This same popup code is in many files. -->
+    :alertTitle="alertTitle"
-  <div v-bind:class="computedAlertClassNames()">
+    :alertMessage="alertMessage"
-    <button
+  ></AlertMessage>
-      class="close-button bg-slate-200 w-8 leading-loose rounded-full absolute top-2 right-2"
-      @click="onClickClose()"
-    >
-      <fa icon="xmark"></fa>
-    </button>
-    <h4 class="font-bold pr-5">{{ alertTitle }}</h4>
-    <p>{{ alertMessage }}</p>
-  </div>
 </template>
 
 <script lang="ts">
@@ -131,9 +123,10 @@ import { accessToken } from "@/libs/crypto";
 import { createAndSubmitGive, didInfo } from "@/libs/endorserServer";
 import { Account } from "@/db/tables/accounts";
 import { Contact } from "@/db/tables/contacts";
+import AlertMessage from "@/components/AlertMessage";
 
 @Options({
-  components: { GiftedDialog },
+  components: { GiftedDialog, AlertMessage },
 })
 export default class HomeView extends Vue {
   activeDid = "";
@@ -145,6 +138,8 @@ export default class HomeView extends Vue {
   feedPreviousOldestId = null;
   feedLastViewedId = null;
   isHiddenSpinner = true;
+  alertTitle = "";
+  alertMessage = "";
 
   // 'created' hook runs when the Vue instance is first created
   async created() {
@@ -342,29 +337,5 @@ export default class HomeView extends Vue {
           "There was an error recording the give.";
       });
   }
-
-  // This same popup code is in many files.
-  alertMessage = "";
-  alertTitle = "";
-  public onClickClose() {
-    this.alertTitle = "";
-    this.alertMessage = "";
-  }
-  public computedAlertClassNames() {
-    return {
-      hidden: !this.alertMessage,
-      "dismissable-alert": true,
-      "bg-slate-100": true,
-      "p-5": true,
-      rounded: true,
-      "drop-shadow-lg": true,
-      fixed: true,
-      "top-3": true,
-      "inset-x-3": true,
-      "transition-transform": true,
-      "ease-in": true,
-      "duration-300": true,
-    };
-  }
 }
 </script>