設定画面を調整

src/frontend/langs/ja-JP.json

@@ -53,6 +53,7 @@
 	"settings": "設定",
 	"accentColor": "アクセントカラー",
 	"changelog": "更新履歴",
+	"otherSettings": "その他の設定",
 	"_sidebar": {
 		"dashboard": "ダッシュボード",
 		"tools": "ツール",

src/frontend/pages/settings.tsx

@@ -110,13 +110,13 @@ 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>
+			<div className="vstack">
+				<div className="card pa-2">
 					<h3>{t('theme')}</h3>
 					<div className="vstack">
 						{
@@ -128,17 +128,17 @@ export const SettingPage: React.VFC = () => {
 							))
 						}
 					</div>
-			</section>
+				</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">{t('resetToDefault')}</button>
+					<button className="btn primary" onClick={() => dispatch(changeAccentColor('green'))}>{t('resetToDefault')}</button>
-			</section>
+				</div>
-			<section>
+				<div className="card pa-2">
 					<h3>{t('language')}</h3>
 					<select name="currentLang" className="input-field" value={currentLang} onChange={(e) => dispatch(changeLang(e.target.value))}>
 						{
@@ -154,9 +154,10 @@ export const SettingPage: React.VFC = () => {
 							<a href="https://crowdin.com/project/misskey-tools" target="_blank" rel="noopener noreferrer">{t('helpTranslation')}</a>
 						</div>
 					</div>
-			</section>
+				</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" />