From 17a12d127c99618324f6cccbaff3dac46676e58b Mon Sep 17 00:00:00 2001
From: xeltica <xeltica@gmail.com>
Date: Tue, 7 Sep 2021 20:50:09 +0900
Subject: [PATCH] wip

---
 src/frontend/components/SessionDataPage.tsx |  6 +-
 src/frontend/components/SettingPage.tsx     | 93 ++++++++++++---------
 src/frontend/init.tsx                       |  2 +
 src/frontend/pages/index.session.tsx        |  6 +-
 src/frontend/style.scss                     | 21 ++++-
 5 files changed, 78 insertions(+), 50 deletions(-)

diff --git a/src/frontend/components/SessionDataPage.tsx b/src/frontend/components/SessionDataPage.tsx
index 3a3664b..458805b 100644
--- a/src/frontend/components/SessionDataPage.tsx
+++ b/src/frontend/components/SessionDataPage.tsx
@@ -14,7 +14,7 @@ export const SessionDataPage: React.VFC = () => {
 			<Skeleton width="100%" height="160px" />
 		</div>
 	) : (
-		<>
+		<div className="fade">
 			{session.data && (
 				<section>
 					<p>
@@ -39,7 +39,7 @@ export const SessionDataPage: React.VFC = () => {
 			{score.data && (
 				<section>
 					<h2>みす廃データ</h2>
-					<table className="table fluid">
+					<table className="table fluid shadow-2" style={{border: 'none'}}>
 						<thead>
 							<tr>
 								<th>内容</th>
@@ -67,6 +67,6 @@ export const SessionDataPage: React.VFC = () => {
 					</table>
 				</section>
 			)}
-		</>
+		</div>
 	);
 };
diff --git a/src/frontend/components/SettingPage.tsx b/src/frontend/components/SettingPage.tsx
index 4a94927..b3104f3 100644
--- a/src/frontend/components/SettingPage.tsx
+++ b/src/frontend/components/SettingPage.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useReducer } from 'react';
+import React, { useEffect, useMemo, useReducer } from 'react';
 import { AlertMode } from '../../common/types/alert-mode';
 import { IUser } from '../../common/types/user';
 import { Visibility } from '../../common/types/visibility';
@@ -42,52 +42,63 @@ export const SettingPage: React.VFC = () => {
 		}
 	}, [session.data]);
 
+	const saveButton = useMemo(() => (
+		<button className="btn primary" style={{alignSelf: 'flex-end'}}>
+			保存
+		</button>
+	), []);
+
 	return session.isLoading || !data ? (
 		<div className="skeleton" style={{width: '100%', height: '128px'}}></div>
 	) : (
-		<div className="vstack">
-			<div>
-				<label htmlFor="alertMode" className="input-field">スコア通知方法</label>
-				<select name="alertMode" className="input-field" value={draft.alertMode} onChange={(e) => {
-					dispatchDraft({ alertMode: e.target.value as AlertMode });
-				}}>
-					<option value="note">自動的にノートを投稿</option>
-					<option value="notification">Misskeyに通知(標準)</option>
-					<option value="nothing">通知しない</option>
-				</select>
-				{draft.alertMode === 'notification' && (
-					<div className="alert bg-danger mt-2">
-						<i className="icon bi bi-exclamation-circle"></i>
-						「Misskey に通知」オプションは古いMisskeyでは動作しません。
+		<div className="vstack fade">
+			<div className="card">
+				<div className="body vstack">
+					<h1>スコア通知方法</h1>
+					<div>
+						<select name="alertMode" className="input-field" value={draft.alertMode} onChange={(e) => {
+							dispatchDraft({ alertMode: e.target.value as AlertMode });
+						}}>
+							<option value="note">自動的にノートを投稿</option>
+							<option value="notification">Misskeyに通知(標準)</option>
+							<option value="nothing">通知しない</option>
+						</select>
+						{draft.alertMode === 'notification' && (
+							<div className="alert bg-danger mt-2">
+								<i className="icon bi bi-exclamation-circle"></i>
+								「Misskey に通知」オプションは古いMisskeyでは動作しません。
+							</div>
+						)}
 					</div>
-				)}
-			</div>
-			{ draft.alertMode === 'note' && (
-				<div>
-					<label htmlFor="visibility" className="input-field">公開範囲</label>
-					<select name="visibility" className="input-field" value={draft.visibility} onChange={(e) => {
-						dispatchDraft({ visibility: e.target.value as Visibility });
-					}}>
-						<option value="public">パブリック</option>
-						<option value="home">ホーム</option>
-						<option value="followers">フォロワー</option>
-					</select>
-					<label className="input-switch mt-2">
-						<input type="checkbox" />
-						<div className="switch"></div>
-						<span>ローカル限定</span>
-					</label>
+					{ draft.alertMode === 'note' && (
+						<div>
+							<label htmlFor="visibility" className="input-field">公開範囲</label>
+							<select name="visibility" className="input-field" value={draft.visibility} onChange={(e) => {
+								dispatchDraft({ visibility: e.target.value as Visibility });
+							}}>
+								<option value="public">パブリック</option>
+								<option value="home">ホーム</option>
+								<option value="followers">フォロワー</option>
+							</select>
+							<label className="input-switch mt-2">
+								<input type="checkbox" />
+								<div className="switch"></div>
+								<span>ローカル限定</span>
+							</label>
+						</div>
+					)}
+					{saveButton}
+				</div>
+			</div>
+			<div className="card">
+				<div className="body vstack">
+					<h1>テンプレート</h1>
+					<textarea className="input-field" value={draft.template ?? defaultTemplate} style={{height: 228}} onChange={(e) => {
+						dispatchDraft({ template: e.target.value });
+					}} />
+					{saveButton}
 				</div>
-			)}
-			<div>
-				<label htmlFor="template" className="input-field">テンプレート</label>
-				<textarea className="input-field" value={draft.template ?? defaultTemplate} style={{height: 256}} onChange={(e) => {
-					dispatchDraft({ template: e.target.value });
-				}} />
 			</div>
-			<button className="btn primary">
-				設定を保存する
-			</button>
 		</div>
 	);
 };
diff --git a/src/frontend/init.tsx b/src/frontend/init.tsx
index 9226256..7a06669 100644
--- a/src/frontend/init.tsx
+++ b/src/frontend/init.tsx
@@ -2,6 +2,8 @@ import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { App } from './App';
 
+document.body.classList.add('dark');
+
 // cookieにトークンが入ってたらlocalStorageに移し替える
 const token = document.cookie
 	.split('; ')
diff --git a/src/frontend/pages/index.session.tsx b/src/frontend/pages/index.session.tsx
index ae78280..1241fcc 100644
--- a/src/frontend/pages/index.session.tsx
+++ b/src/frontend/pages/index.session.tsx
@@ -29,10 +29,10 @@ export const IndexSessionPage: React.VFC = () => {
 			<Header />
 			<div className="xarticle card" style={{borderRadius: 'var(--radius)'}}>
 				<Tab items={items} selected={selectedTab} onSelect={setSelectedTab}/>
-				<article className="container">
-					{component}
-				</article>
 			</div>
+			<article className="xarticle mt-4">
+				{component}
+			</article>
 		</>
 	);
 };
diff --git a/src/frontend/style.scss b/src/frontend/style.scss
index 1d29445..6225bb0 100644
--- a/src/frontend/style.scss
+++ b/src/frontend/style.scss
@@ -6,25 +6,29 @@ body {
 .xarticle {
     margin: auto;
     max-width: 720px;
-    overflow: hidden;
 }
 
 .skeleton {
     border-radius: var(--radius);
-    background: var(--tone-1);
+    background: var(--tone-2);
     position: relative;
     overflow: hidden;
     &::after {
         content: "";
         inset: 0;
         position: absolute;
-        background: linear-gradient(90deg, transparent, var(--tone-2) 50%, transparent 100%);
+        background: linear-gradient(90deg, transparent, var(--tone-3) 50%, transparent 100%);
         animation: 1.2s ease-out 0s infinite skeleton;
     }
 }
 
+.fade {
+    animation: 0.3s ease-out 0s fadeIn;
+}
+
 .tab {
     display: flex;
+    flex-wrap: wrap;
     background: var(--panel);
     .item {
         position: relative;
@@ -67,3 +71,14 @@ body {
         transform: translateX(300%);
     }
 }
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(-8px);
+    }
+    to {
+        opacity: 1;
+        transform: none;
+    }
+}