デザイン調整

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">
+			<article>
-				<div className="body">
+				<p>
-					<h1>{t('_accounts.currentAccount')}</h1>
+					<b>{t('_accounts.currentAccount')}:</b> @{data.username}@{data.host}
-					<p>@{data.username}@{data.host}</p>
+				</p>
-				</div>
+			</article>
-			</div>
 			<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">
+			<div className="list-form">
-				<button className="btn block" onClick={onClickLogout}>{t('logout')}</button>
+				<button className="item" onClick={onClickLogout}>
-				<p className="text-dimmed">{t('logoutDescription')}</p>
+					<i className="icon bi bi-box-arrow-right" />
-			</Card>
+					<div className="body">
-			<Card bodyClassName="vstack">
+						<h1>{t('logout')}</h1>
-				<button className="btn danger block" onClick={onClickDeleteAccount}>{t('deleteAccount')}</button>
+						<p className="desc">{t('logoutDescription')}</p>
-				<p className="text-dimmed">{t('deleteAccountDescription')}</p>
+					</div>
-			</Card>
+				</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" /> : (
-				<>
+				<div className="card">
-					<header className="mb-4">
+					<div className="body">
-						<h2 className="mb-0">{announcement.title}</h2>
+						<header className="mb-4">
-						<aside className="text-dimmed">
+							<h2 className="mb-0">{announcement.title}</h2>
-							<i className="bi bi-clock" />&nbsp;
+							<aside className="text-dimmed">
-							{dayjs(announcement.createdAt).locale(lang.split('_')[0]).fromNow()}
+								<i className="bi bi-clock" />&nbsp;
-						</aside>
+								{dayjs(announcement.createdAt).locale(lang.split('_')[0]).fromNow()}
-					</header>
+							</aside>
-					<section>
+						</header>
-						{(() => {
+						<section>
-							const res: ReactNodeArray = [];
+							{(() => {
-							announcement.body.split('\n').forEach(s => {
+								const res: ReactNodeArray = [];
-								res.push(<>{s}</>);
+								announcement.body.split('\n').forEach(s => {
-								res.push(<br />);
+									res.push(<>{s}</>);
-							});
+									res.push(<br />);
-							return res;
+								});
-						})()}
+								return res;
-					</section>
+							})()}
-				</>
+						</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";
 }
 

yarn.lock

@@ -1620,6 +1620,13 @@ debug@2.6.9, debug@^2.2.0:
   dependencies:
     ms "2.0.0"
 
+debug@=3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261"
+  integrity sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==
+  dependencies:
+    ms "2.0.0"
+
 debug@^3.1.0, debug@^3.2.6:
   version "3.2.7"
   resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.7.tgz#72580b7e9145fb39b6676f9c5e5fb100b934179a"
@@ -2253,6 +2260,13 @@ flatted@^3.1.0:
   resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.2.2.tgz#64bfed5cb68fe3ca78b3eb214ad97b63bedce561"
   integrity sha512-JaTY/wtrcSyvXJl4IMFHPKyFur1sE9AUqc0QnhOaJ0CxHtAoIV8pYDzeEfAaNEtGkOfq4gr3LBFmdXW5mOQFnA==
 
+follow-redirects@1.5.10:
+  version "1.5.10"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.5.10.tgz#7b7a9f9aea2fdff36786a94ff643ed07f4ff5e2a"
+  integrity sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==
+  dependencies:
+    debug "=3.1.0"
+
 follow-redirects@^1.14.0:
   version "1.14.4"
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.14.4.tgz#838fdf48a8bbdd79e52ee51fb1c94e3ed98b9379"
@@ -5633,8 +5647,8 @@ xdg-basedir@^4.0.0:
   integrity sha512-PSNhEJDejZYV7h50BohL09Er9VaIefr2LMAf3OEmpCkjOi34eYyQYAXUTjEQtZJTKcF0E2UKTh+osDLsgNim9Q==
 
 xeltica-ui@xeltica/ui:
-  version "1.0.0-alpha.7"
+  version "1.0.0-alpha.15"
-  resolved "https://codeload.github.com/xeltica/ui/tar.gz/765a73de505b5e405021b8ce182f4e3627560e72"
+  resolved "https://codeload.github.com/xeltica/ui/tar.gz/d8088a79e78f0795a92a542d872b3449ad34dbcb"
 
 xml2js@^0.4.17:
   version "0.4.23"