From d43688d87718223fdd1cbecb4be8c2c509883ad8 Mon Sep 17 00:00:00 2001
From: Xeltica <xeltica@gmail.com>
Date: Wed, 9 Feb 2022 11:30:16 +0900
Subject: [PATCH] =?UTF-8?q?=E3=83=87=E3=82=B6=E3=82=A4=E3=83=B3=E8=AA=BF?=
 =?UTF-8?q?=E6=95=B4=E3=81=A8=E9=9F=93=E5=9B=BD=E8=AA=9E=E5=AF=BE=E5=BF=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/frontend/components/AnnouncementList.tsx |  2 +-
 src/frontend/components/CurrentUser.tsx      |  2 +-
 src/frontend/components/DeveloperInfo.tsx    | 21 ++++++++++++++------
 src/frontend/components/MisshaiPage.scss     |  6 +++---
 src/frontend/components/MisshaiPage.tsx      | 20 ++++++++++++-------
 src/frontend/components/SettingPage.tsx      |  2 +-
 src/frontend/langs/index.ts                  |  9 ++++++---
 src/frontend/style.scss                      |  1 +
 8 files changed, 41 insertions(+), 22 deletions(-)

diff --git a/src/frontend/components/AnnouncementList.tsx b/src/frontend/components/AnnouncementList.tsx
index c5e4a44..93f3279 100644
--- a/src/frontend/components/AnnouncementList.tsx
+++ b/src/frontend/components/AnnouncementList.tsx
@@ -24,7 +24,7 @@ export const AnnouncementList: React.VFC = () => {
 
 	return (
 		<>
-			<h1 className="mb-0">{t('announcements')}</h1>
+			<h1 className="mb-0"><i className="bi-bell"></i> {t('announcements')}</h1>
 			<div className="large menu fade">
 				{announcements.map(a => (
 					<Link className="item fluid" key={a.id} to={`/announcements/${a.id}`}>
diff --git a/src/frontend/components/CurrentUser.tsx b/src/frontend/components/CurrentUser.tsx
index dfb87e1..0c5b00c 100644
--- a/src/frontend/components/CurrentUser.tsx
+++ b/src/frontend/components/CurrentUser.tsx
@@ -5,6 +5,6 @@ import { Skeleton } from './Skeleton';
 export const CurrentUser: React.VFC = () => {
 	const {data} = useGetSessionQuery(undefined);
 	return data ? (
-		<h1 className="text-125">{data.username}<span className="text-dimmed">@{data.host}</span></h1>
+		<h1 className="text-125"><i className="bi-person"></i> {data.username}<span className="text-dimmed">@{data.host}</span></h1>
 	) : <Skeleton height="1.5rem" />;
 };
diff --git a/src/frontend/components/DeveloperInfo.tsx b/src/frontend/components/DeveloperInfo.tsx
index 8ee3ffb..6f45f7d 100644
--- a/src/frontend/components/DeveloperInfo.tsx
+++ b/src/frontend/components/DeveloperInfo.tsx
@@ -5,13 +5,22 @@ export const DeveloperInfo: React.VFC = () => {
 	const {t} = useTranslation();
 	return (
 		<>
-			<h1>{t('_developerInfo.title')}</h1>
+			<h1><i className="bi-question-circle"></i> {t('_developerInfo.title')}</h1>
 			<p>{t('_developerInfo.description')}</p>
-			<ul>
-				<li><a href="http://misskey.io/@ebi" target="_blank" rel="noopener noreferrer">@ebi@misskey.io</a></li>
-				<li><a href="http://groundpolis.app/@X" target="_blank" rel="noopener noreferrer">@X@groundpolis.app</a></li>
-				<li><a href="http://twitter.com/@adxlw" target="_blank" rel="noopener noreferrer">@adxlw@twitter.com</a></li>
-			</ul>
+			<div className="menu large">
+				<a className="item" href="http://groundpolis.app/@Lutica" target="_blank" rel="noopener noreferrer">
+					<i className="icon bi-at"></i>
+					X@groundpolis.app
+				</a>
+				<a className="item" href="http://misskey.io/@ebi" target="_blank" rel="noopener noreferrer">
+					<i className="icon bi-at"></i>
+					ebi@misskey.io
+				</a>
+				<a className="item" href="http://twitter.com/@adxlw" target="_blank" rel="noopener noreferrer">
+					<i className="icon bi-at"></i>
+					adxlw@twitter.com
+				</a>
+			</div>
 		</>
 	);
 };
diff --git a/src/frontend/components/MisshaiPage.scss b/src/frontend/components/MisshaiPage.scss
index 145e8e9..bb36fe1 100644
--- a/src/frontend/components/MisshaiPage.scss
+++ b/src/frontend/components/MisshaiPage.scss
@@ -3,10 +3,10 @@
     flex-wrap: wrap;
     gap: var(--margin);
     > .misshaiData {
-        flex: 1 0 300px;
+        flex: 3 0 300px;
     }
-    > .misshaiRanking {
-        flex: 5 0 300px;
+    > .developerInfo {
+        flex: 1 0 300px;
     }
     > .alertModeSetting {
         flex: 1 0 300px;
diff --git a/src/frontend/components/MisshaiPage.tsx b/src/frontend/components/MisshaiPage.tsx
index b299175..02d02a7 100644
--- a/src/frontend/components/MisshaiPage.tsx
+++ b/src/frontend/components/MisshaiPage.tsx
@@ -14,6 +14,7 @@ import { Ranking } from './Ranking';
 import { Skeleton } from './Skeleton';
 
 import './MisshaiPage.scss';
+import { DeveloperInfo } from './DeveloperInfo';
 
 const variables = [
 	'notesCount',
@@ -196,10 +197,17 @@ export const MisshaiPage: React.VFC = () => {
 					<AnnouncementList />
 				</div>
 			</section>
+			<section className="card misshaiRanking">
+				<div className="body">
+					<h1><i className="bi-bar-chart"></i> {t('_missHai.ranking')}</h1>
+					<Ranking limit={limit} />
+					{limit && <button className="btn link" onClick={() => setLimit(undefined)}>{t('_missHai.showAll')}</button>}
+				</div>
+			</section>
 			<div className="misshaiPageLayout">
 				<section className="card misshaiData">
 					<div className="body">
-						<h1>{t('_missHai.data')}</h1>
+						<h1><i className="bi-activity"></i> {t('_missHai.data')}</h1>
 						<table className="table fluid">
 							<thead>
 								<tr>
@@ -234,18 +242,16 @@ export const MisshaiPage: React.VFC = () => {
 						</p>
 					</div>
 				</section>
-				<section className="card misshaiRanking">
+				<section className="card developerInfo">
 					<div className="body">
-						<h1>{t('_missHai.ranking')}</h1>
-						<Ranking limit={limit} />
-						{limit && <button className="btn link" onClick={() => setLimit(undefined)}>{t('_missHai.showAll')}</button>}
+						<DeveloperInfo />
 					</div>
 				</section>
 			</div>
 			<div className="misshaiPageLayout">
 				<section className="card alertModeSetting">
 					<div className="body">
-						<h1 className="mb-2">{t('alertMode')}</h1>
+						<h1 className="mb-2"><i className="bi-gear"></i> {t('alertMode')}</h1>
 						<div className="vstack">
 							{
 								alertModes.map((mode) => (
@@ -291,7 +297,7 @@ export const MisshaiPage: React.VFC = () => {
 				</section>
 				<section className="card templateSetting">
 					<div className="body">
-						<h1>{t('template')}</h1>
+						<h1><i className="bi-card-text"></i> {t('template')}</h1>
 						<p>{t('_template.description')}</p>
 						<div className="hstack dense mb-2">
 							<button className="btn" onClick={onClickInsertVariables}>
diff --git a/src/frontend/components/SettingPage.tsx b/src/frontend/components/SettingPage.tsx
index ba38297..48d0d67 100644
--- a/src/frontend/components/SettingPage.tsx
+++ b/src/frontend/components/SettingPage.tsx
@@ -91,7 +91,7 @@ export const SettingPage: React.VFC = () => {
 	) : (
 		<div className="vstack fade">
 			<Card bodyClassName="vstack">
-				<h1>{t('appearance')}</h1>
+				<h1><i className="bi-palette"></i> {t('appearance')}</h1>
 				<h2>{t('theme')}</h2>
 				<div className="vstack">
 					{
diff --git a/src/frontend/langs/index.ts b/src/frontend/langs/index.ts
index f524600..ec8fa0d 100644
--- a/src/frontend/langs/index.ts
+++ b/src/frontend/langs/index.ts
@@ -1,14 +1,17 @@
-import enUS from './en-US.json';
 import jaJP from './ja-JP.json';
+import enUS from './en-US.json';
+import koKR from './ko-KR.json';
 
 export const resources = {
-	'en_US': { translation: enUS },
 	'ja_JP': { translation: jaJP },
+	'en_US': { translation: enUS },
+	'ko_KR': { translation: koKR },
 };
 
 export const languageName = {
-	'en_US': 'English',
 	'ja_JP': '日本語',
+	'en_US': 'English',
+	'ko_KR': '한국어',
 } as const;
 
 export type LanguageCode = keyof typeof resources;
diff --git a/src/frontend/style.scss b/src/frontend/style.scss
index cd1ab31..f6bc41c 100644
--- a/src/frontend/style.scss
+++ b/src/frontend/style.scss
@@ -1,5 +1,6 @@
 body {
     --primary: rgb(134, 179, 0);
+    --primary-d: rgb(52, 70, 0);
     --max-width: 1024px;
     font-family: "Koruri", sans-serif;
     font-feature-settings: "pkna";