From 58ae2ccbfa71f2ff6d6cb6101a92c0288d5836fd Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Thu, 5 Jan 2023 19:50:52 +0900
Subject: [PATCH] :art:

---
 .../frontend/src/components/MkSuperMenu.vue   |  4 +--
 .../src/components/MkTokenGenerateWindow.vue  | 34 +++++++++++--------
 packages/frontend/src/pages/settings/apps.vue | 28 ++++++++-------
 3 files changed, 37 insertions(+), 29 deletions(-)

diff --git a/packages/frontend/src/components/MkSuperMenu.vue b/packages/frontend/src/components/MkSuperMenu.vue
index 36960bfc31..bb2a789b3f 100644
--- a/packages/frontend/src/components/MkSuperMenu.vue
+++ b/packages/frontend/src/components/MkSuperMenu.vue
@@ -141,8 +141,8 @@ export default defineComponent({
 						margin-right: 0;
 						margin-bottom: 6px;
 						font-size: 1.5em;
-						width: 54px;
-						height: 54px;
+						width: 60px;
+						height: 60px;
 						aspect-ratio: 1;
 						background: var(--panel);
 						border-radius: 100%;
diff --git a/packages/frontend/src/components/MkTokenGenerateWindow.vue b/packages/frontend/src/components/MkTokenGenerateWindow.vue
index 8d5b6f8635..894336136c 100644
--- a/packages/frontend/src/components/MkTokenGenerateWindow.vue
+++ b/packages/frontend/src/components/MkTokenGenerateWindow.vue
@@ -11,20 +11,25 @@
 	@ok="ok()"
 >
 	<template #header>{{ title || $ts.generateAccessToken }}</template>
-	<div v-if="information" class="_section">
-		<MkInfo warn>{{ information }}</MkInfo>
-	</div>
-	<div class="_section">
-		<MkInput v-model="name">
-			<template #label>{{ $ts.name }}</template>
-		</MkInput>
-	</div>
-	<div class="_section">
-		<div style="margin-bottom: 16px;"><b>{{ $ts.permission }}</b></div>
-		<MkButton inline @click="disableAll">{{ $ts.disableAll }}</MkButton>
-		<MkButton inline @click="enableAll">{{ $ts.enableAll }}</MkButton>
-		<MkSwitch v-for="kind in (initialPermissions || kinds)" :key="kind" v-model="permissions[kind]">{{ $t(`_permissions.${kind}`) }}</MkSwitch>
-	</div>
+
+	<MkSpacer :margin-min="20" :margin-max="28">
+		<div class="_formRoot">
+			<div v-if="information" class="_formBlock">
+				<MkInfo warn>{{ information }}</MkInfo>
+			</div>
+			<div class="_formBlock">
+				<MkInput v-model="name">
+					<template #label>{{ $ts.name }}</template>
+				</MkInput>
+			</div>
+			<div class="_formBlock"><b>{{ $ts.permission }}</b></div>
+			<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="kind in (initialPermissions || kinds)" :key="kind" v-model="permissions[kind]" class="_formBlock">{{ $t(`_permissions.${kind}`) }}</MkSwitch>
+		</div>
+	</MkSpacer>
 </XModalWindow>
 </template>
 
@@ -36,6 +41,7 @@ import MkSwitch from './form/switch.vue';
 import MkButton from './MkButton.vue';
 import MkInfo from './MkInfo.vue';
 import XModalWindow from '@/components/MkModalWindow.vue';
+import { i18n } from '@/i18n';
 
 const props = withDefaults(defineProps<{
 	title?: string | null;
diff --git a/packages/frontend/src/pages/settings/apps.vue b/packages/frontend/src/pages/settings/apps.vue
index 0154c0c951..fe237de906 100644
--- a/packages/frontend/src/pages/settings/apps.vue
+++ b/packages/frontend/src/pages/settings/apps.vue
@@ -8,28 +8,28 @@
 			</div>
 		</template>
 		<template #default="{items}">
-			<div v-for="token in items" :key="token.id" class="_panel bfomjevm">
+			<div v-for="token in items" :key="token.id" class="_panel _formBlock bfomjevm">
 				<img v-if="token.iconUrl" class="icon" :src="token.iconUrl" alt=""/>
 				<div class="body">
 					<div class="name">{{ token.name }}</div>
 					<div class="description">{{ token.description }}</div>
-					<div class="">
-						<div>{{ i18n.ts.installedDate }}:</div>
-						<div><MkTime :time="token.createdAt"/></div>
-					</div>
-					<div class="">
-						<div>{{ i18n.ts.lastUsedDate }}:</div>
-						<div><MkTime :time="token.lastUsedAt"/></div>
-					</div>
-					<div class="actions">
-						<button class="_button" @click="revoke(token)"><i class="ti ti-trash"></i></button>
-					</div>
-					<details>
+					<MkKeyValue class="_formBlock" oneline>
+						<template #key>{{ i18n.ts.installedDate }}</template>
+						<template #value><MkTime :time="token.createdAt"/></template>
+					</MkKeyValue>
+					<MkKeyValue class="_formBlock" oneline>
+						<template #key>{{ i18n.ts.lastUsedDate }}</template>
+						<template #value><MkTime :time="token.lastUsedAt"/></template>
+					</MkKeyValue>
+					<details class="_formBlock">
 						<summary>{{ i18n.ts.details }}</summary>
 						<ul>
 							<li v-for="p in token.permission" :key="p">{{ $t(`_permissions.${p}`) }}</li>
 						</ul>
 					</details>
+					<div class="actions">
+						<MkButton inline danger @click="revoke(token)"><i class="ti ti-trash"></i></MkButton>
+					</div>
 				</div>
 			</div>
 		</template>
@@ -43,6 +43,8 @@ import FormPagination from '@/components/MkPagination.vue';
 import * as os from '@/os';
 import { i18n } from '@/i18n';
 import { definePageMetadata } from '@/scripts/page-metadata';
+import MkKeyValue from '@/components/MkKeyValue.vue';
+import MkButton from '@/components/MkButton.vue';
 
 const list = ref<any>(null);