From e3f7399b546bce5c301eb487ad3f9cbf9167a276 Mon Sep 17 00:00:00 2001
From: Xeltica <xeltica@gmail.com>
Date: Thu, 15 Sep 2022 16:26:53 +0900
Subject: [PATCH] =?UTF-8?q?=E8=A8=AD=E5=AE=9A=E7=94=BB=E9=9D=A2=E3=82=92?=
 =?UTF-8?q?=E8=AA=BF=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/frontend/langs/ja-JP.json   |  1 +
 src/frontend/pages/settings.tsx | 79 +++++++++++++++++----------------
 2 files changed, 41 insertions(+), 39 deletions(-)

diff --git a/src/frontend/langs/ja-JP.json b/src/frontend/langs/ja-JP.json
index 4abb2eb..cadbeb4 100644
--- a/src/frontend/langs/ja-JP.json
+++ b/src/frontend/langs/ja-JP.json
@@ -53,6 +53,7 @@
 	"settings": "設定",
 	"accentColor": "アクセントカラー",
 	"changelog": "更新履歴",
+	"otherSettings": "その他の設定",
 	"_sidebar": {
 		"dashboard": "ダッシュボード",
 		"tools": "ツール",
diff --git a/src/frontend/pages/settings.tsx b/src/frontend/pages/settings.tsx
index 0539aee..f8fa55d 100644
--- a/src/frontend/pages/settings.tsx
+++ b/src/frontend/pages/settings.tsx
@@ -110,53 +110,54 @@ export const SettingPage: React.VFC = () => {
 		}));
 	}, [dispatch, t]);
 
-
 	return session.isLoading || !data ? (
 		<div className="skeleton" style={{width: '100%', height: '128px'}}></div>
 	) : (
 		<article className="fade">
 			<h2><i className="fas fa-palette"></i> {t('appearance')}</h2>
-			<section>
-				<h3>{t('theme')}</h3>
-				<div className="vstack">
-					{
-						themes.map(theme => (
-							<label key={theme} className="input-check">
-								<input type="radio" value={theme} checked={theme === currentTheme} onChange={(e) => dispatch(changeTheme(e.target.value as Theme))} />
-								<span>{t(`_themes.${theme}`)}</span>
-							</label>
-						))
-					}
-				</div>
-			</section>
-			<section>
-				<h3>{t('accentColor')}</h3>
-				<div className="hstack slim wrap mb-2">
-					{designSystemColors.map(c => (
-						<ColorInput className="shadow-2" type="radio" color={c} value={c} checked={c === currentAccentColor} onChange={e => dispatch(changeAccentColor(e.target.value))} />
-					))}
-				</div>
-				<button className="btn primary">{t('resetToDefault')}</button>
-			</section>
-			<section>
-				<h3>{t('language')}</h3>
-				<select name="currentLang" className="input-field" value={currentLang} onChange={(e) => dispatch(changeLang(e.target.value))}>
-					{
-						(Object.keys(languageName) as Array<keyof typeof languageName>).map(n => (
-							<option value={n} key={n}>{languageName[n]}</option>
-						))
-					}
-				</select>
-				<div className="alert bg-info mt-2">
-					<i className="icon fas fa-language" />
-					<div>
-						{t('translatedByTheCommunity')}&nbsp;
-						<a href="https://crowdin.com/project/misskey-tools" target="_blank" rel="noopener noreferrer">{t('helpTranslation')}</a>
+			<div className="vstack">
+				<div className="card pa-2">
+					<h3>{t('theme')}</h3>
+					<div className="vstack">
+						{
+							themes.map(theme => (
+								<label key={theme} className="input-check">
+									<input type="radio" value={theme} checked={theme === currentTheme} onChange={(e) => dispatch(changeTheme(e.target.value as Theme))} />
+									<span>{t(`_themes.${theme}`)}</span>
+								</label>
+							))
+						}
 					</div>
 				</div>
-			</section>
+				<div className="card pa-2">
+					<h3>{t('accentColor')}</h3>
+					<div className="hstack slim wrap mb-2">
+						{designSystemColors.map(c => (
+							<ColorInput className="shadow-2" type="radio" color={c} value={c} checked={c === currentAccentColor} onChange={e => dispatch(changeAccentColor(e.target.value))} />
+						))}
+					</div>
+					<button className="btn primary" onClick={() => dispatch(changeAccentColor('green'))}>{t('resetToDefault')}</button>
+				</div>
+				<div className="card pa-2">
+					<h3>{t('language')}</h3>
+					<select name="currentLang" className="input-field" value={currentLang} onChange={(e) => dispatch(changeLang(e.target.value))}>
+						{
+							(Object.keys(languageName) as Array<keyof typeof languageName>).map(n => (
+								<option value={n} key={n}>{languageName[n]}</option>
+							))
+						}
+					</select>
+					<div className="alert bg-info mt-2">
+						<i className="icon fas fa-language" />
+						<div>
+							{t('translatedByTheCommunity')}&nbsp;
+							<a href="https://crowdin.com/project/misskey-tools" target="_blank" rel="noopener noreferrer">{t('helpTranslation')}</a>
+						</div>
+					</div>
+				</div>
+			</div>
 			<section>
-				<h2>その他の設定</h2>
+				<h2>{t('otherSettings')}</h2>
 				<div className="list-form">
 					<button className="item" onClick={onClickLogout}>
 						<i className="icon fas fa-arrow-up-right-from-square" />