From 715a4675b7c9492f0a3e32d8997d370493805dc9 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sat, 28 Nov 2020 12:44:39 +0900
Subject: [PATCH] Update about page

---
 locales/ja-JP.yml          |  1 +
 src/client/pages/about.vue | 74 +++++++++++++++++++++-----------------
 2 files changed, 43 insertions(+), 32 deletions(-)

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index b37bf66a4..035359839 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -648,6 +648,7 @@ noteFavoritesCount: "お気に入りノートの数"
 pageLikesCount: "Pageにいいねした数"
 pageLikedCount: "Pageにいいねされた数"
 reversiCount: "リバーシの対局数"
+contact: "連絡先"
 
 _aboutMisskey:
   about: "Misskeyはsyuiloによって2014年から開発されている、オープンソースのソフトウェアです。"
diff --git a/src/client/pages/about.vue b/src/client/pages/about.vue
index 7599ee693..dd0be265f 100644
--- a/src/client/pages/about.vue
+++ b/src/client/pages/about.vue
@@ -1,46 +1,55 @@
 <template>
-<div class="mmnnbwxb">
-	<section class="_section info" v-if="meta">
-		<div class="_title"><Fa :icon="faInfoCircle"/> {{ $t('instanceInfo') }}</div>
-		<div class="_content" v-if="meta.description">
-			<div v-html="meta.description"></div>
-		</div>
-		<div class="_content table">
-			<div><b>{{ $t('administrator') }}</b><span>{{ meta.maintainerName }}</span></div>
-			<div><b></b><span>{{ meta.maintainerEmail }}</span></div>
-		</div>
-		<div class="_content table">
-			<div><b>Misskey</b><span>v{{ version }}</span></div>
-		</div>
-	</section>
-
-	<div class="_section">
-		<div class="_content">
-			<MkInstanceStats/>
-		</div>
+<FormBase class="mmnnbwxb" v-if="meta">
+	<div class="_formItem logo">
+		<img v-if="meta.logoImageUrl" :src="meta.logoImageUrl">
+		<span v-else class="text">{{ instanceName }}</span>
 	</div>
-</div>
+	<FormGroup>
+		<FormKeyValueView>
+			<template #key>Misskey</template>
+			<template #value>v{{ version }}</template>
+		</FormKeyValueView>
+	</FormGroup>
+
+	<FormGroup>
+		<FormKeyValueView>
+			<template #key>{{ $t('administrator') }}</template>
+			<template #value>{{ meta.maintainerName }}</template>
+		</FormKeyValueView>
+		<FormKeyValueView>
+			<template #key>{{ $t('contact') }}</template>
+			<template #value>{{ meta.maintainerEmail }}</template>
+		</FormKeyValueView>
+	</FormGroup>
+</FormBase>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { faInfoCircle } from '@fortawesome/free-solid-svg-icons';
-import { version } from '@/config';
-import MkInstanceStats from '@/components/instance-stats.vue';
+import { version, instanceName } from '@/config';
+import FormLink from '@/components/form/link.vue';
+import FormBase from '@/components/form/base.vue';
+import FormGroup from '@/components/form/group.vue';
+import FormKeyValueView from '@/components/form/key-value-view.vue';
 import * as os from '@/os';
 
 export default defineComponent({
 	components: {
-		MkInstanceStats
+		FormBase,
+		FormGroup,
+		FormLink,
+		FormKeyValueView,
 	},
 
 	data() {
 		return {
 			INFO: {
-				title: this.$t('about'),
+				title: this.$t('instanceInfo'),
 				icon: faInfoCircle
 			},
 			version,
+			instanceName,
 			serverInfo: null,
 			faInfoCircle
 		}
@@ -56,15 +65,16 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .mmnnbwxb {
-	> .info {
-		> .table {
-			> div {
-				display: flex;
+	max-width: 800px;
+	box-sizing: border-box;
+	margin: 0 auto;
 
-				> * {
-					flex: 1;
-				}
-			}
+	> .logo {
+		text-align: center;
+
+		> img {
+			vertical-align: bottom;
+			max-height: 100px;
 		}
 	}
 }