From e6d666e1ee8cdb9aa942485001636ade9c16d6af Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Tue, 10 Jan 2023 20:12:38 +0900
Subject: [PATCH] fix style

---
 packages/frontend/src/components/MkDialog.vue | 56 +++++++++----------
 1 file changed, 28 insertions(+), 28 deletions(-)

diff --git a/packages/frontend/src/components/MkDialog.vue b/packages/frontend/src/components/MkDialog.vue
index bf9dc1f491..160ea23e05 100644
--- a/packages/frontend/src/components/MkDialog.vue
+++ b/packages/frontend/src/components/MkDialog.vue
@@ -4,13 +4,13 @@
 		<div v-if="icon" :class="$style.icon">
 			<i :class="icon"></i>
 		</div>
-		<div v-else-if="!input && !select" :class="[$style.icon, type]">
-			<i v-if="type === 'success'" class="ti ti-check"></i>
-			<i v-else-if="type === 'error'" class="ti ti-circle-x"></i>
-			<i v-else-if="type === 'warning'" class="ti ti-alert-triangle"></i>
-			<i v-else-if="type === 'info'" class="ti ti-info-circle"></i>
-			<i v-else-if="type === 'question'" class="ti ti-question-circle"></i>
-			<MkLoading v-else-if="type === 'waiting'" :em="true"/>
+		<div v-else-if="!input && !select" :class="[$style.icon, $style['type_' + type]]">
+			<i v-if="type === 'success'" :class="$style.iconInner" class="ti ti-check"></i>
+			<i v-else-if="type === 'error'" :class="$style.iconInner" class="ti ti-circle-x"></i>
+			<i v-else-if="type === 'warning'" :class="$style.iconInner" class="ti ti-alert-triangle"></i>
+			<i v-else-if="type === 'info'" :class="$style.iconInner" class="ti ti-info-circle"></i>
+			<i v-else-if="type === 'question'" :class="$style.iconInner" class="ti ti-question-circle"></i>
+			<MkLoading v-else-if="type === 'waiting'" :class="$style.iconInner" :em="true"/>
 		</div>
 		<header v-if="title" :class="$style.title"><Mfm :text="title"/></header>
 		<div v-if="text" :class="$style.text"><Mfm :text="text"/></div>
@@ -158,32 +158,32 @@ onBeforeUnmount(() => {
 .icon {
 	font-size: 24px;
 
-	&.info {
-		color: #55c4dd;
-	}
-
-	&.success {
-		color: var(--success);
-	}
-
-	&.error {
-		color: var(--error);
-	}
-
-	&.warning {
-		color: var(--warn);
-	}
-
-	> * {
-		display: block;
-		margin: 0 auto;
-	}
-
 	& + .title {
 		margin-top: 8px;
 	}
 }
 
+.iconInner {
+	display: block;
+	margin: 0 auto;
+}
+
+.type_info {
+	color: #55c4dd;
+}
+
+.type_success {
+	color: var(--success);
+}
+
+.type_error {
+	color: var(--error);
+}
+
+.type_warning {
+	color: var(--warn);
+}
+
 .title {
 	margin: 0 0 8px 0;
 	font-weight: bold;