From 20cc13434cffd831dd9aded85cfc05e6981dbd42 Mon Sep 17 00:00:00 2001
From: ThatOneCalculator <kainoa@t1c.dev>
Date: Sat, 18 Feb 2023 19:55:18 -0800
Subject: [PATCH] fix

---
 .../client/src/components/MkWaitingDialog.vue | 41 ++++++++++---------
 1 file changed, 21 insertions(+), 20 deletions(-)

diff --git a/packages/client/src/components/MkWaitingDialog.vue b/packages/client/src/components/MkWaitingDialog.vue
index dfc5115ca..00d34e949 100644
--- a/packages/client/src/components/MkWaitingDialog.vue
+++ b/packages/client/src/components/MkWaitingDialog.vue
@@ -1,18 +1,18 @@
 <template>
 <MkModal ref="modal" :prefer-type="'dialog'" :z-priority="'high'" @click="success ? done() : () => {}" @closed="emit('closed')">
-	<div class="iuyakobc" :class="{ iconOnly: (text == null) || success }">
-		<i v-if="success" class="ph-check-bold ph-lg icon success"></i>
-		<i v-else class="ph-circle-notch-bold ph-lg fa-pulse icon waiting"></i>
-		<div v-if="text && !success" class="text">{{ text }}<MkEllipsis/></div>
+	<div :class="[$style.root, { [$style.iconOnly]: (text == null) || success }]">
+		<i v-if="success" :class="[$style.icon, $style.success]" class="ph-check-bold ph-lg"></i>
+		<MkLoading v-else :class="[$style.icon, $style.waiting]" :em="true"/>
+		<div v-if="text && !success" :class="$style.text">{{ text }}<MkEllipsis/></div>
 	</div>
 </MkModal>
 </template>
 
 <script lang="ts" setup>
-import { watch, ref } from 'vue';
+import { watch, shallowRef } from 'vue';
 import MkModal from '@/components/MkModal.vue';
 
-const modal = ref<InstanceType<typeof MkModal>>();
+const modal = shallowRef<InstanceType<typeof MkModal>>();
 
 const props = defineProps<{
 	success: boolean;
@@ -27,7 +27,7 @@ const emit = defineEmits<{
 
 function done() {
 	emit('done');
-	modal.value.close();
+	modal.value?.close();
 }
 
 watch(() => props.showing, () => {
@@ -35,8 +35,9 @@ watch(() => props.showing, () => {
 });
 </script>
 
-<style lang="scss" scoped>
-.iuyakobc {
+<style lang="scss" module>
+.root {
+	margin: auto;
 	position: relative;
 	padding: 32px;
 	box-sizing: border-box;
@@ -53,21 +54,21 @@ watch(() => props.showing, () => {
 		align-items: center;
 		justify-content: center;
 	}
+}
 
-	> .icon {
-		font-size: 32px;
+.icon {
+	font-size: 32px;
 
-		&.success {
-			color: var(--accent);
-		}
-
-		&.waiting {
-			opacity: 0.7;
-		}
+	&.success {
+		color: var(--accent);
 	}
 
-	> .text {
-		margin-top: 16px;
+	&.waiting {
+		opacity: 0.7;
 	}
 }
+
+.text {
+	margin-top: 16px;
+}
 </style>