デザイン調整と韓国語対応

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}`}>

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" />;
 };

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>
 		</>
 	);
 };

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;

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}>

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">
 					{

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;

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";