From a7e77885d2fef662982acf629c8364b25caab6f9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=81=BE=E3=81=A3=E3=81=A1=E3=82=83=E3=81=A8=E3=83=BC?=
 =?UTF-8?q?=E3=81=AB=E3=82=85?=
 <17376330+u1-liquid@users.noreply.github.com>
Date: Mon, 12 Feb 2024 11:19:25 +0900
Subject: [PATCH] =?UTF-8?q?spec(frontend):=20about=E3=83=9A=E3=83=BC?=
 =?UTF-8?q?=E3=82=B8=E3=81=AEUI=E8=AA=BF=E6=95=B4=20(MisskeyIO#441)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/frontend/src/pages/about.vue | 47 ++++++++++++++++++---------
 1 file changed, 31 insertions(+), 16 deletions(-)

diff --git a/packages/frontend/src/pages/about.vue b/packages/frontend/src/pages/about.vue
index aab3124735..ad47867b76 100644
--- a/packages/frontend/src/pages/about.vue
+++ b/packages/frontend/src/pages/about.vue
@@ -31,22 +31,15 @@ SPDX-License-Identifier: AGPL-3.0-only
 						</MkKeyValue>
 						<div v-html="i18n.tsx.poweredByMisskeyDescription({ name: instance.name ?? host })">
 						</div>
-						<FormLink to="/about-misskey">{{ i18n.ts.aboutMisskey }}</FormLink>
+						<FormLink to="/about-misskey">
+							<template #icon><i class="ti ti-info-circle"></i></template>
+							{{ i18n.ts.aboutMisskey }}
+						</FormLink>
 						<FormLink :to="instance.repositoryUrl" external>
 							<template #icon><i class="ti ti-code"></i></template>
 							{{ i18n.ts.sourcecode }}
 							<template #suffix>GitHub</template>
 						</FormLink>
-						<FormLink :to="instance.feedbackUrl" external>
-							<template #icon><i class="ti ti-message"></i></template>
-							{{ i18n.ts.feedback }}
-							<template #suffix>Helpdesk</template>
-						</FormLink>
-						<FormLink to="https://misskeyhq.fanbox.cc" external>
-							<template #icon><i class="ti ti-pig-money"></i></template>
-							{{ i18n.tsx.supportThisInstance({ name: instance.name ?? host }) }}
-							<template #suffix>pixivFANBOX</template>
-						</FormLink>
 					</div>
 				</FormSection>
 
@@ -62,17 +55,39 @@ SPDX-License-Identifier: AGPL-3.0-only
 								<template #value>{{ instance.maintainerEmail }}</template>
 							</MkKeyValue>
 						</FormSplit>
-						<FormLink v-if="instance.impressumUrl" :to="instance.impressumUrl" external>{{ i18n.ts.impressum }}</FormLink>
+						<FormLink v-if="instance.impressumUrl" :to="instance.impressumUrl" external>
+							<template #icon><i class="ti ti-user-shield"></i></template>
+							{{ i18n.ts.impressum }}
+						</FormLink>
 						<div class="_gaps_s">
 							<MkFolder v-if="instance.serverRules.length > 0">
-								<template #label>{{ i18n.ts.serverRules }}</template>
+								<template #label>
+									<i class="ti ti-checkup-list"></i>
+									{{ i18n.ts.serverRules }}
+								</template>
 
 								<ol class="_gaps_s" :class="$style.rules">
-									<li v-for="item, index in instance.serverRules" :key="index" :class="$style.rule"><div :class="$style.ruleText" v-html="item"></div></li>
+									<li v-for="(item, index) in instance.serverRules" :key="index" :class="$style.rule"><div :class="$style.ruleText" v-html="item"></div></li>
 								</ol>
 							</MkFolder>
-							<FormLink v-if="instance.tosUrl" :to="instance.tosUrl" external>{{ i18n.ts.termsOfService }}</FormLink>
-							<FormLink v-if="instance.privacyPolicyUrl" :to="instance.privacyPolicyUrl" external>{{ i18n.ts.privacyPolicy }}</FormLink>
+							<FormLink v-if="instance.tosUrl" :to="instance.tosUrl" external>
+								<template #icon><i class="ti ti-license"></i></template>
+								{{ i18n.ts.termsOfService }}
+							</FormLink>
+							<FormLink v-if="instance.privacyPolicyUrl" :to="instance.privacyPolicyUrl" external>
+								<template #icon><i class="ti ti-shield-lock"></i></template>
+								{{ i18n.ts.privacyPolicy }}
+							</FormLink>
+							<FormLink v-if="instance.feedbackUrl" :to="instance.feedbackUrl" external>
+								<template #icon><i class="ti ti-message"></i></template>
+								{{ i18n.ts.feedback }}
+								<template #suffix>Helpdesk</template>
+							</FormLink>
+							<FormLink to="https://misskeyhq.fanbox.cc" external>
+								<template #icon><i class="ti ti-pig-money"></i></template>
+								{{ i18n.tsx.supportThisInstance({ name: instance.name ?? host }) }}
+								<template #suffix>pixivFANBOX</template>
+							</FormLink>
 						</div>
 					</div>
 				</FormSection>