From 57e1ddcd3f67dbe935008c80a4a2a100ed3361aa Mon Sep 17 00:00:00 2001
From: xeltica <xeltica@gmail.com>
Date: Sat, 9 Oct 2021 02:16:21 +0900
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/backend/views/frontend.pug           |  2 +-
 src/frontend/components/AccountsPage.tsx | 46 ++++++++++++------------
 2 files changed, 25 insertions(+), 23 deletions(-)

diff --git a/src/backend/views/frontend.pug b/src/backend/views/frontend.pug
index 41e9108..fb78e58 100644
--- a/src/backend/views/frontend.pug
+++ b/src/backend/views/frontend.pug
@@ -33,7 +33,7 @@ html
 			script.
 				const token = '#{token}';
 				const previousToken = localStorage.getItem('token');
-				const accounts = JSON.parse(localStorage.getItem('accounts') && '[]');
+				const accounts = JSON.parse(localStorage.getItem('accounts') || '[]');
 				if (previousToken && !accounts.includes(previousToken)) {
 					accounts.push(previousToken);
 				}
diff --git a/src/frontend/components/AccountsPage.tsx b/src/frontend/components/AccountsPage.tsx
index ccd9ff3..27a1eff 100644
--- a/src/frontend/components/AccountsPage.tsx
+++ b/src/frontend/components/AccountsPage.tsx
@@ -37,30 +37,32 @@ export const AccountsPage: React.VFC = () => {
 					<p>@{data.username}@{data.host}</p>
 				</div>
 			</div>
-			<article>
-				<h2>{t('_accounts.switchAccount')}</h2>
-				<div className="menu large fluid mb-2">
-					{
-						accounts.length === accountTokens.length ? (
-							accounts.map(account => (
-								<button className="item fluid" style={{display: 'flex', flexDirection: 'row', alignItems: 'center'}} onClick={() => switchAccount(account.misshaiToken)}>
-									<i className="icon bi bi-chevron-right" />
-									@{account.username}@{account.host}
-									<button className="btn flat text-danger" style={{marginLeft: 'auto'}} onClick={e => {
-										const filteredAccounts = accounts.filter(ac => ac.id !== account.id);
-										dispatch(setAccounts(filteredAccounts));
-										e.stopPropagation();
-									}}>
-										<i className="bi bi-trash"/>
+			<article className="card">
+				<div className="body">
+					<h1>{t('_accounts.switchAccount')}</h1>
+					<div className="menu large fluid mb-2">
+						{
+							accounts.length === accountTokens.length ? (
+								accounts.map(account => (
+									<button className="item fluid" style={{display: 'flex', flexDirection: 'row', alignItems: 'center'}} onClick={() => switchAccount(account.misshaiToken)}>
+										<i className="icon bi bi-chevron-right" />
+										@{account.username}@{account.host}
+										<button className="btn flat text-danger" style={{marginLeft: 'auto'}} onClick={e => {
+											const filteredAccounts = accounts.filter(ac => ac.id !== account.id);
+											dispatch(setAccounts(filteredAccounts));
+											e.stopPropagation();
+										}}>
+											<i className="bi bi-trash"/>
+										</button>
 									</button>
-								</button>
-							))
-						) : (
-							<div className="item">...</div>
-						)
-					}
+								))
+							) : (
+								<div className="item">...</div>
+							)
+						}
+					</div>
+					<LoginForm />
 				</div>
-				<LoginForm />
 			</article>
 		</div>
 	);