From e258caf89a94e4d9545c0000522c1fb270399358 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sun, 24 Oct 2021 20:16:55 +0900
Subject: [PATCH] :art:

---
 locales/ja-JP.yml                       |  2 +-
 src/client/components/ui/super-menu.vue |  5 +--
 src/client/pages/admin/index.vue        | 46 ++++++++++++++-----------
 src/client/pages/settings/index.vue     | 46 +++++++++++++++----------
 src/client/ui/_common_/sidebar.vue      |  2 +-
 src/client/ui/classic.header.vue        |  4 +--
 src/client/ui/classic.sidebar.vue       |  2 +-
 7 files changed, 59 insertions(+), 48 deletions(-)

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 2874feea0..dbb0bf166 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -795,7 +795,7 @@ itsOff: "オフになっています"
 emailRequiredForSignup: "アカウント登録にメールアドレスを必須にする"
 unread: "未読"
 filter: "フィルタ"
-controllPanel: "コントロールパネル"
+controlPanel: "コントロールパネル"
 manageAccounts: "アカウントを管理"
 makeReactionsPublic: "リアクション一覧を公開する"
 makeReactionsPublicDescription: "あなたがしたリアクション一覧を誰でも見れるようにします。"
diff --git a/src/client/components/ui/super-menu.vue b/src/client/components/ui/super-menu.vue
index 6ab94d744..195cc5732 100644
--- a/src/client/components/ui/super-menu.vue
+++ b/src/client/components/ui/super-menu.vue
@@ -50,9 +50,6 @@ export default defineComponent({
 			border-top: solid 0.5px var(--divider);
 		}
 
-		margin-left: 16px;
-		margin-right: 16px;
-
 		> .title {
 			font-size: 0.9em;
 			opacity: 0.7;
@@ -120,7 +117,7 @@ export default defineComponent({
 
 			> .items {
 				display: grid;
-				grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+				grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
 				grid-gap: 8px;
 				padding: 0 16px;
 
diff --git a/src/client/pages/admin/index.vue b/src/client/pages/admin/index.vue
index 07d407764..cda3ab912 100644
--- a/src/client/pages/admin/index.vue
+++ b/src/client/pages/admin/index.vue
@@ -3,14 +3,18 @@
 	<div class="nav" v-if="!narrow || page == null">
 		<MkHeader :info="header"></MkHeader>
 	
-		<div class="lxpfedzu">
-			<img :src="$instance.iconUrl || '/favicon.ico'" alt="" class="icon"/>
-		</div>
+		<MkSpacer :content-max="700">
+			<div class="lxpfedzu">
+				<div class="banner">
+					<img :src="$instance.iconUrl || '/favicon.ico'" alt="" class="icon"/>
+				</div>
 
-		<MkInfo v-if="noMaintainerInformation" warn class="info">{{ $ts.noMaintainerInformationWarning }} <MkA to="/admin/settings" class="_link">{{ $ts.configure }}</MkA></MkInfo>
-		<MkInfo v-if="noBotProtection" warn class="info">{{ $ts.noBotProtectionWarning }} <MkA to="/admin/bot-protection" class="_link">{{ $ts.configure }}</MkA></MkInfo>
+				<MkInfo v-if="noMaintainerInformation" warn class="info">{{ $ts.noMaintainerInformationWarning }} <MkA to="/admin/settings" class="_link">{{ $ts.configure }}</MkA></MkInfo>
+				<MkInfo v-if="noBotProtection" warn class="info">{{ $ts.noBotProtectionWarning }} <MkA to="/admin/bot-protection" class="_link">{{ $ts.configure }}</MkA></MkInfo>
 
-		<MkSuperMenu :def="menuDef" :grid="page == null"></MkSuperMenu>
+				<MkSuperMenu :def="menuDef" :grid="page == null"></MkSuperMenu>
+			</div>
+		</MkSpacer>
 	</div>
 	<div class="main">
 		<MkStickyContainer>
@@ -315,7 +319,7 @@ export default defineComponent({
 			[symbols.PAGE_INFO]: INFO,
 			menuDef,
 			header: {
-				title: i18n.locale.controllPanel,
+				title: i18n.locale.controlPanel,
 			},
 			noMaintainerInformation,
 			noBotProtection,
@@ -357,20 +361,22 @@ export default defineComponent({
 	}
 
 	> .nav {
-		> .info {
-			margin: 16px;
+		.lxpfedzu {
+			> .info {
+				margin: 16px 0;
+			}
+
+			> .banner {
+				margin: 16px;
+
+				> .icon {
+					display: block;
+					margin: auto;
+					height: 42px;
+					border-radius: 8px;
+				}
+			}
 		}
 	}
 }
-
-.lxpfedzu {
-	margin: 16px;
-
-	> .icon {
-		display: block;
-		margin: auto;
-		height: 42px;
-		border-radius: 8px;
-	}
-}
 </style>
diff --git a/src/client/pages/settings/index.vue b/src/client/pages/settings/index.vue
index 5a396b6a6..cf053dbe6 100644
--- a/src/client/pages/settings/index.vue
+++ b/src/client/pages/settings/index.vue
@@ -1,9 +1,13 @@
 <template>
 <div class="vvcocwet" :class="{ wide: !narrow }" ref="el">
 	<div class="nav" v-if="!narrow || page == null">
-		<div class="title">{{ $ts.settings }}</div>
-		<MkInfo v-if="emailNotConfigured" warn class="info">{{ $ts.emailNotConfiguredWarning }} <MkA to="/settings/email" class="_link">{{ $ts.configure }}</MkA></MkInfo>
-		<MkSuperMenu :def="menuDef" :grid="page == null"></MkSuperMenu>
+		<MkSpacer :content-max="700">
+			<div class="baaadecd">
+				<div class="title">{{ $ts.settings }}</div>
+				<MkInfo v-if="emailNotConfigured" warn class="info">{{ $ts.emailNotConfiguredWarning }} <MkA to="/settings/email" class="_link">{{ $ts.configure }}</MkA></MkInfo>
+				<MkSuperMenu :def="menuDef" :grid="page == null"></MkSuperMenu>
+			</div>
+		</MkSpacer>
 	</div>
 	<div class="main">
 		<component :is="component" :key="page" v-bind="pageProps"/>
@@ -272,22 +276,24 @@ export default defineComponent({
 <style lang="scss" scoped>
 .vvcocwet {
 	> .nav {
-		> .title {
-			margin: 16px;
-			font-size: 1.5em;
-			font-weight: bold;
-		}
+		.baaadecd {
+			> .title {
+				margin: 16px;
+				font-size: 1.5em;
+				font-weight: bold;
+			}
 
-		> .info {
-			margin: 0 16px;
-		}
+			> .info {
+				margin: 0 16px;
+			}
 
-		> .accounts {
-			> .avatar {
-				display: block;
-				width: 50px;
-				height: 50px;
-				margin: 8px auto 16px auto;
+			> .accounts {
+				> .avatar {
+					display: block;
+					width: 50px;
+					height: 50px;
+					margin: 8px auto 16px auto;
+				}
 			}
 		}
 	}
@@ -303,8 +309,10 @@ export default defineComponent({
 			box-sizing: border-box;
 			overflow: auto;
 
-			> .title {
-				margin: 24px;
+			.baaadecd {
+				> .title {
+					margin: 24px 0;
+				}
 			}
 		}
 
diff --git a/src/client/ui/_common_/sidebar.vue b/src/client/ui/_common_/sidebar.vue
index ec2a17ab8..ece80e60d 100644
--- a/src/client/ui/_common_/sidebar.vue
+++ b/src/client/ui/_common_/sidebar.vue
@@ -26,7 +26,7 @@
 				</template>
 				<div class="divider"></div>
 				<MkA v-if="$i.isAdmin || $i.isModerator" class="item" active-class="active" to="/admin" v-click-anime>
-					<i class="fas fa-server fa-fw"></i><span class="text">{{ $ts.instance }}</span>
+					<i class="fas fa-door-open fa-fw"></i><span class="text">{{ $ts.controlPanel }}</span>
 				</MkA>
 				<button class="item _button" @click="more" v-click-anime>
 					<i class="fa fa-ellipsis-h fa-fw"></i><span class="text">{{ $ts.more }}</span>
diff --git a/src/client/ui/classic.header.vue b/src/client/ui/classic.header.vue
index 908a4719a..ad5080e3f 100644
--- a/src/client/ui/classic.header.vue
+++ b/src/client/ui/classic.header.vue
@@ -13,8 +13,8 @@
 				</component>
 			</template>
 			<div class="divider"></div>
-			<MkA v-if="$i.isAdmin || $i.isModerator" class="item" active-class="active" to="/admin" :behavior="settingsWindowed ? 'modalWindow' : null" v-click-anime v-tooltip="$ts.instance">
-				<i class="fas fa-server fa-fw"></i>
+			<MkA v-if="$i.isAdmin || $i.isModerator" class="item" active-class="active" to="/admin" :behavior="settingsWindowed ? 'modalWindow' : null" v-click-anime v-tooltip="$ts.controlPanel">
+				<i class="fas fa-door-open fa-fw"></i>
 			</MkA>
 			<button class="item _button" @click="more" v-click-anime>
 				<i class="fas fa-ellipsis-h fa-fw"></i>
diff --git a/src/client/ui/classic.sidebar.vue b/src/client/ui/classic.sidebar.vue
index cce74a53c..ac061d446 100644
--- a/src/client/ui/classic.sidebar.vue
+++ b/src/client/ui/classic.sidebar.vue
@@ -21,7 +21,7 @@
 	</template>
 	<div class="divider"></div>
 	<MkA v-if="$i.isAdmin || $i.isModerator" class="item" active-class="active" to="/admin" :behavior="settingsWindowed ? 'modalWindow' : null" v-click-anime>
-		<i class="fas fa-server fa-fw"></i><span class="text">{{ $ts.instance }}</span>
+		<i class="fas fa-door-open fa-fw"></i><span class="text">{{ $ts.controlPanel }}</span>
 	</MkA>
 	<button class="item _button" @click="more" v-click-anime>
 		<i class="fas fa-ellipsis-h fa-fw"></i><span class="text">{{ $ts.more }}</span>