added popup control fix #3

src/components/base-components/PopUp.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="popup-control flex-column shadow ma8">
+    <div class="flex-row" :class="item.type">
+      <awesome-icon icon="circle-info" size="2x" class="ma" />
+      <div class="flex-column pa8-top ma8-bottom ma8-right">
+        <h3 class="ma-off">{{ item.title }}</h3>
+        <p class="ma-off ma8-top">{{ item.message }}</p>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    item: {
+      type: Object,
+      default() {
+        return {
+          type: "default",
+        };
+      },
+    },
+  },
+  mounted() {
+    setTimeout(() => {
+      this.$store.dispatch("removePopUp", this.item);
+    }, 5000);
+  },
+};
+</script>
+
+<style scoped>
+.popup-control {
+  width: 320px;
+  border-radius: 8px;
+  background-color: var(--white);
+}
+
+.default {
+  border-radius: 8px;
+  background-color: var(--white);
+}
+
+.danger {
+  border-radius: 8px;
+  background-color: var(--danger25);
+}
+.info {
+  border-radius: 8px;
+  background-color: var(--info);
+}
+.success {
+  border-radius: 8px;
+  background-color: var(--success);
+}
+</style>