changes

app/components/dialog/Error.vue

@@ -2,43 +2,48 @@
   <div>
     <div class="field is-grouped">
       <div
-        class="control is-expanded pr-3"
+        class="control is-expanded"
         v-html="content"
       ></div>
       <div class="control">
-        <SvgIcon v-bind="{ name: 'error.svg', type: 'danger', size: 24 }"></SvgIcon>
+        <Icon
+          name="material-symbols:cancel-rounded"
+          :size="24"
+          class="has-text-danger"
+        />
       </div>
     </div>
-    <p class="border-bottom mt-3 mb-5"></p>
+    <div class="mt-3 mb-5"></div>
     <div class="field is-grouped">
       <div class="control is-expanded">
         <button
-          class="button is-danger has-text-white"
+          class="button is-danger"
           @click="cancel()"
         >
           Đóng
         </button>
       </div>
       <div
-        class="control"
         v-if="duration"
+        class="control"
       >
         <CountDown
-          v-bind="{ duration: duration }"
+          :duration="duration"
           @close="cancel()"
-        ></CountDown>
+        />
       </div>
     </div>
   </div>
 </template>
 <script setup>
-import { useStore } from "@/stores/index";
-const store = useStore();
-var props = defineProps({
+const props = defineProps({
   content: String,
   duration: Number,
 });
+
+const emit = defineEmits(["close"]);
+
 function cancel() {
-  this.$emit("close");
+  emit("close");
 }
 </script>

app/components/dialog/Info.vue

@@ -1,35 +1,37 @@
 <template>
   <div>
     <p v-html="content"></p>
-    <p class="border-bottom mt-3 mb-5"></p>
+    <div class="mt-3 mb-5"></div>
     <div class="field is-grouped">
       <div class="control is-expanded">
         <button
-          class="button is-dark"
+          class="button is-light"
           @click="cancel()"
         >
           Đóng
         </button>
       </div>
       <div
-        class="control"
         v-if="duration"
+        class="control"
       >
         <CountDown
-          v-bind="{ duration: duration }"
+          :duration="duration"
           @close="cancel()"
-        ></CountDown>
+        />
       </div>
     </div>
   </div>
 </template>
-<script>
-export default {
-  props: ["content", "duration"],
-  methods: {
-    cancel() {
-      this.$emit("close");
-    },
-  },
-};
+<script setup>
+const props = defineProps({
+  content: String,
+  duration: Number,
+});
+
+const emit = defineEmits(["close"]);
+
+function cancel() {
+  emit("close");
+}
 </script>

app/components/dialog/Success.vue

@@ -2,14 +2,18 @@
   <div>
     <div class="field is-grouped">
       <div
-        class="control is-expanded pr-3"
+        class="control is-expanded"
         v-html="content"
       ></div>
       <div class="control">
-        <SvgIcon v-bind="{ name: 'check2.svg', type: 'primary', size: 24 }"></SvgIcon>
+        <Icon
+          name="material-symbols:check-circle-rounded"
+          :size="24"
+          class="has-text-success"
+        />
       </div>
     </div>
-    <p class="border-bottom mt-3 mb-5"></p>
+    <div class="mt-3 mb-5"></div>
     <div class="field is-grouped">
       <div class="control is-expanded">
         <button
@@ -20,24 +24,26 @@
         </button>
       </div>
       <div
-        class="control"
         v-if="duration"
+        class="control"
       >
         <CountDown
-          v-bind="{ duration: duration }"
+          :duration="duration"
           @close="cancel()"
-        ></CountDown>
+        />
       </div>
     </div>
   </div>
 </template>
-<script>
-export default {
-  props: ["content", "duration"],
-  methods: {
-    cancel() {
-      this.$emit("close");
-    },
-  },
-};
+<script setup>
+const props = defineProps({
+  content: String,
+  duration: Number,
+});
+
+const emit = defineEmits(["close"]);
+
+function cancel() {
+  emit("close");
+}
 </script>