From 352e16be2e5f310f072549ec83fdcb2d39819bd5 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Thu, 29 Dec 2022 17:24:46 +0900
Subject: [PATCH] :art:

---
 .../MkNotificationSettingWindow.vue           | 31 +++++++++++--------
 1 file changed, 18 insertions(+), 13 deletions(-)

diff --git a/packages/frontend/src/components/MkNotificationSettingWindow.vue b/packages/frontend/src/components/MkNotificationSettingWindow.vue
index 75bea2976..92165ef47 100644
--- a/packages/frontend/src/components/MkNotificationSettingWindow.vue
+++ b/packages/frontend/src/components/MkNotificationSettingWindow.vue
@@ -10,20 +10,25 @@
 	@closed="emit('closed')"
 >
 	<template #header>{{ i18n.ts.notificationSetting }}</template>
-	<div class="_monolithic_">
-		<div v-if="showGlobalToggle" class="_section">
-			<MkSwitch v-model="useGlobalSetting">
-				{{ i18n.ts.useGlobalSetting }}
-				<template #caption>{{ i18n.ts.useGlobalSettingDesc }}</template>
-			</MkSwitch>
+
+	<MkSpacer :margin-min="20" :margin-max="28">
+		<div class="_formRoot">
+			<template v-if="showGlobalToggle">
+				<MkSwitch v-model="useGlobalSetting" class="_formBlock">
+					{{ i18n.ts.useGlobalSetting }}
+					<template #caption>{{ i18n.ts.useGlobalSettingDesc }}</template>
+				</MkSwitch>
+			</template>
+			<template v-if="!useGlobalSetting">
+				<MkInfo class="_formBlock">{{ i18n.ts.notificationSettingDesc }}</MkInfo>
+				<div style="display: flex; gap: var(--margin); flex-wrap: wrap;">
+					<MkButton inline @click="disableAll">{{ i18n.ts.disableAll }}</MkButton>
+					<MkButton inline @click="enableAll">{{ i18n.ts.enableAll }}</MkButton>
+				</div>
+				<MkSwitch v-for="ntype in notificationTypes" class="_formBlock" :key="ntype" v-model="typesMap[ntype]">{{ i18n.t(`_notification._types.${ntype}`) }}</MkSwitch>
+			</template>
 		</div>
-		<div v-if="!useGlobalSetting" class="_section">
-			<MkInfo>{{ i18n.ts.notificationSettingDesc }}</MkInfo>
-			<MkButton inline @click="disableAll">{{ i18n.ts.disableAll }}</MkButton>
-			<MkButton inline @click="enableAll">{{ i18n.ts.enableAll }}</MkButton>
-			<MkSwitch v-for="ntype in notificationTypes" :key="ntype" v-model="typesMap[ntype]">{{ i18n.t(`_notification._types.${ntype}`) }}</MkSwitch>
-		</div>
-	</div>
+	</MkSpacer>
 </XModalWindow>
 </template>