デザイン調整

src/backend/views/frontend.pug

@@ -14,6 +14,7 @@ html
 		meta(name='twitter:card' content='summary')
 		meta(name='twitter:site' content='@Xeltica')
 		meta(name='twitter:creator' content='@Xeltica')
+		link(rel="stylesheet" href="https://koruri.chillout.chat/koruri.css")
 		link(rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css")
 		style.
 			.loading {

src/frontend/components/AccountsPage.tsx

@@ -31,12 +31,11 @@ export const AccountsPage: React.VFC = () => {
 		</div>
 	) :  (
 		<div className="fade vstack">
-			<div className="card">
-				<div className="body">
-					<h1>{t('_accounts.currentAccount')}</h1>
-					<p>@{data.username}@{data.host}</p>
-				</div>
-			</div>
+			<article>
+				<p>
+					<b>{t('_accounts.currentAccount')}:</b> @{data.username}@{data.host}
+				</p>
+			</article>
 			<article className="card">
 				<div className="body">
 					<h1>{t('_accounts.switchAccount')}</h1>

src/frontend/components/AnnouncementList.tsx

@@ -24,8 +24,8 @@ export const AnnouncementList: React.VFC = () => {
 	if (announcements.length === 0) return null;
 
 	return (
-		<Card>
-			<h1>{t('announcements')}</h1>
+		<>
+			<h2 className="mb-0">{t('announcements')}</h2>
 			<div className="large menu fade">
 				{announcements.map(a => (
 					<Link className="item fluid" key={a.id} to={`/announcements/${a.id}`}>
@@ -33,6 +33,6 @@ export const AnnouncementList: React.VFC = () => {
 					</Link>
 				))}
 			</div>
-		</Card>
+		</>
 	);
 };

src/frontend/components/SettingPage.tsx

@@ -93,7 +93,7 @@ export const SettingPage: React.VFC = () => {
 			<Card bodyClassName="vstack">
 				<h1>{t('appearance')}</h1>
 				<h2>{t('theme')}</h2>
-				<div>
+				<div className="vstack">
 					{
 						themes.map(theme => (
 							<label key={theme} className="input-check">
@@ -120,14 +120,22 @@ export const SettingPage: React.VFC = () => {
 					<a href="https://crowdin.com/project/misskey-tools" target="_blank" rel="noopener noreferrer">{t('helpTranslation')}</a>
 				</div>
 			</Card>
-			<Card bodyClassName="vstack">
-				<button className="btn block" onClick={onClickLogout}>{t('logout')}</button>
-				<p className="text-dimmed">{t('logoutDescription')}</p>
-			</Card>
-			<Card bodyClassName="vstack">
-				<button className="btn danger block" onClick={onClickDeleteAccount}>{t('deleteAccount')}</button>
-				<p className="text-dimmed">{t('deleteAccountDescription')}</p>
-			</Card>
+			<div className="list-form">
+				<button className="item" onClick={onClickLogout}>
+					<i className="icon bi bi-box-arrow-right" />
+					<div className="body">
+						<h1>{t('logout')}</h1>
+						<p className="desc">{t('logoutDescription')}</p>
+					</div>
+				</button>
+				<button className="item text-danger" onClick={onClickDeleteAccount}>
+					<i className="icon bi bi-trash-fill" />
+					<div className="body">
+						<h1>{t('deleteAccount')}</h1>
+						<p className="desc">{t('deleteAccountDescription')}</p>
+					</div>
+				</button>
+			</div>
 		</div>
 	);
 };

src/frontend/pages/announcement.tsx

@@ -20,25 +20,27 @@ export const AnnouncementPage: React.VFC = () => {
 	return (
 		<article className="xarticle">
 			{!announcement ? <Skeleton width="100%" height="10rem" /> : (
-				<>
-					<header className="mb-4">
-						<h2 className="mb-0">{announcement.title}</h2>
-						<aside className="text-dimmed">
-							<i className="bi bi-clock" />&nbsp;
-							{dayjs(announcement.createdAt).locale(lang.split('_')[0]).fromNow()}
-						</aside>
-					</header>
-					<section>
-						{(() => {
-							const res: ReactNodeArray = [];
-							announcement.body.split('\n').forEach(s => {
-								res.push(<>{s}</>);
-								res.push(<br />);
-							});
-							return res;
-						})()}
-					</section>
-				</>
+				<div className="card">
+					<div className="body">
+						<header className="mb-4">
+							<h2 className="mb-0">{announcement.title}</h2>
+							<aside className="text-dimmed">
+								<i className="bi bi-clock" />&nbsp;
+								{dayjs(announcement.createdAt).locale(lang.split('_')[0]).fromNow()}
+							</aside>
+						</header>
+						<section>
+							{(() => {
+								const res: ReactNodeArray = [];
+								announcement.body.split('\n').forEach(s => {
+									res.push(<>{s}</>);
+									res.push(<br />);
+								});
+								return res;
+							})()}
+						</section>
+					</div>
+				</div>
 			)}
 		</article>
 	);

src/frontend/style.scss

@@ -1,5 +1,6 @@
 body {
     --primary: rgb(134, 179, 0);
+    font-family: "Koruri", sans-serif;
     font-feature-settings: "pkna";
 }