refactor(client): use css modules

packages/frontend/src/components/MkWaitingDialog.vue

@@ -1,9 +1,9 @@
 <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="ti ti-check icon success"></i>
-		<MkLoading v-else class="icon waiting" :em="true"/>
-		<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="ti ti-check"></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>
@@ -35,8 +35,8 @@ watch(() => props.showing, () => {
 });
 </script>
 
-<style lang="scss" scoped>
-.iuyakobc {
+<style lang="scss" module>
+.root {
 	margin: auto;
 	position: relative;
 	padding: 32px;
@@ -54,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>