wip

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>
 	);
 };

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,12 +42,20 @@ 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 className="vstack fade">
+			<div className="card">
+				<div className="body vstack">
+					<h1>スコア通知方法</h1>
 					<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 });
 						}}>
@@ -79,15 +87,18 @@ export const SettingPage: React.VFC = () => {
 							</label>
 						</div>
 					)}
-			<div>
-				<label htmlFor="template" className="input-field">テンプレート</label>
-				<textarea className="input-field" value={draft.template ?? defaultTemplate} style={{height: 256}} onChange={(e) => {
+					{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>
-			<button className="btn primary">
-				設定を保存する
-			</button>
 		</div>
 	);
 };

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('; ')

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">
+			</div>
+			<article className="xarticle mt-4">
 				{component}
 			</article>
-			</div>
 		</>
 	);
 };

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;
+    }
+}