Skip to content

Commit 5bdef61

Browse files
nakatermnakaterm
authored
UI リニューアル (#69)
* home を更新 * home を修正 * project を修正 * submission を修正 * not found を修正 * header を修正 * Landing を中心に修正 * Header を微調整 * リンクを統一 * 戻るフローを修正 * アイコンを Lucide に統一 * description が長い場合は省略表示 * ボタンを daisyUI に * Submission のボタンを整理 * icon のサイズ指定を修正 * collapse を daisyUI に * toast を閉じるボタンを追加 * header から作成ボタンを削除 * 説明テキストを修正、Footer を Home で使用 * header の mx-auto が消えていたので修正 * Project の幅を修正 * body の背景色は header に合わせて白に * button の variant を設定 * input のテキストサイズを 16px 以上に修正 * ホームのデフォルト表示を修正 * collapse 内 padding を調整 * 編集ボタンは上に移動 * submission を修正 * Home と関連部分を修正 * NotFound を修正 * Project を修正 * rounded-lg に統一
1 parent e4cd5ea commit 5bdef61

File tree

9 files changed

+831
-576
lines changed

9 files changed

+831
-576
lines changed

‎client/src/components/Footer.tsx‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import { EXTERNAL_LINKS } from "../constants/links";
2+
3+
export default function Footer() {
4+
return (
5+
<footer className="bg-slate-900 py-12 text-slate-300">
6+
<div className="mx-auto max-w-7xl px-6 sm:px-8 lg:px-10">
7+
<div className="grid gap-12 md:grid-cols-2 lg:gap-24">
8+
<div>
9+
<div className="flex items-center gap-2 text-white">
10+
<img src="/logo-white.svg" alt="イツヒマ" className="h-6 w-6" />
11+
<span className="font-bold font-mplus text-xl tracking-tight">イツヒマ</span>
12+
</div>
13+
<p className="mt-6 max-w-md text-slate-400 text-sm">「いつヒマ？」で日程調整しよう</p>
14+
</div>
15+
<div>
16+
<h3 className="font-bold text-sm text-white">サポート</h3>
17+
<ul className="mt-4 text-sm">
18+
<li>
19+
<a
20+
href={EXTERNAL_LINKS.GUIDE}
21+
target="_blank"
22+
rel="noreferrer noopener"
23+
className="hover:text-slate-400"
24+
>
25+
使い方
26+
</a>
27+
</li>
28+
<li className="mt-3">
29+
<a
30+
href={EXTERNAL_LINKS.FEEDBACK}
31+
target="_blank"
32+
rel="noreferrer noopener"
33+
className="hover:text-slate-400"
34+
>
35+
ご意見・バグ報告
36+
</a>
37+
</li>
38+
</ul>
39+
</div>
40+
</div>
41+
<div className="mt-12 border-slate-800 border-t pt-8 text-center text-slate-500 text-xs">
42+
<p>&copy; {new Date().getFullYear()} イツヒマ All rights reserved.</p>
43+
</div>
44+
</div>
45+
</footer>
46+
);
47+
}

‎client/src/components/Header.tsx‎

Lines changed: 65 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,76 @@
1-
import { HiOutlineHome, HiOutlineQuestionMarkCircle } from "react-icons/hi";
1+
import { useState } from "react";
2+
import { LuMenu, LuX } from "react-icons/lu";
23
import { NavLink } from "react-router";
4+
import { EXTERNAL_LINKS } from "../constants/links";
35

46
export default function Header() {
7+
const [isMenuOpen, setIsMenuOpen] = useState(false);
8+
59
return (
6-
<div className="navbar sticky top-0 left-0 z-50 bg-primary shadow-sm">
7-
<div className="px-2 font-mplus text-2xl text-white">
8-
<NavLink className="flex items-center gap-1" to="/">
9-
<img src="/logo-white.svg" alt="logo" width={24} />
10-
<span className="px-2">イツヒマ</span>
11-
<span className="text-xs">(アルファ版)</span>
10+
<header className="sticky top-0 z-50 w-full border-slate-200 border-b bg-white">
11+
<div className="mx-auto flex h-16 w-full max-w-7xl items-center justify-between px-4 sm:px-6 lg:px-8">
12+
<NavLink to="/" className="flex items-center gap-2 transition-opacity hover:opacity-80">
13+
<img src="/logo.svg" alt="イツヒマ" className="h-6 w-6" />
14+
<span className="font-bold font-mplus text-slate-800 text-xl tracking-tight">イツヒマ</span>
15+
<span className="rounded-full bg-slate-100 px-2 py-0.5 font-medium text-[10px] text-slate-500">
16+
アルファ版
17+
</span>
1218
</NavLink>
13-
</div>
14-
<div>
15-
<div className="dropdown dropdown-end -translate-y-1/2 absolute top-1/2 right-3 transform text-gray-600">
16-
<NavLink className="btn btn-primary" to="/home">
17-
<HiOutlineHome size={24} className="text-white" />
18-
<span className="hidden md:block">ホーム</span>
19+
20+
<nav className="hidden items-center gap-6 md:flex">
21+
<NavLink to="/home" className="font-medium text-slate-600 text-sm transition-colors hover:text-primary">
22+
ホーム
1923
</NavLink>
20-
<button tabIndex={0} className="btn btn-circle btn-primary" type="button">
21-
<HiOutlineQuestionMarkCircle size={28} className="text-white" />
24+
<a
25+
href={EXTERNAL_LINKS.GUIDE}
26+
target="_blank"
27+
rel="noreferrer noopener"
28+
className="font-medium text-slate-600 text-sm transition-colors hover:text-primary"
29+
>
30+
使い方
31+
</a>
32+
</nav>
33+
34+
<div className="flex items-center md:hidden">
35+
<button
36+
type="button"
37+
className="rounded-lg p-2 text-slate-600 hover:bg-slate-100"
38+
onClick={() => setIsMenuOpen(!isMenuOpen)}
39+
>
40+
{isMenuOpen ? <LuX className="h-6 w-6" /> : <LuMenu className="h-6 w-6" />}
2241
</button>
23-
<div className="dropdown-content z-[1] w-56 rounded-box bg-base-100 p-2 shadow">
24-
<p className="p-2 text-xs">イツヒマは現在アルファ版です。</p>
25-
{/* biome-ignore lint/a11y/noNoninteractiveTabindex: daisyUI の仕様。tabIndex を消すとモバイルで開かないなどの問題が起こる */}
26-
<ul tabIndex={0} className="menu p-0">
27-
<li>
28-
<a
29-
href="https://utcode.notion.site/1e4ca5f557bc80f2b697ca7b9342dc89?pvs=4"
30-
target="_blank"
31-
rel="noreferrer noopener"
32-
>
33-
使い方ページ (臨時)
34-
</a>
35-
</li>
36-
<li>
37-
<a href="https://forms.gle/AB6xbgKjnDv5m1nm6" target="_blank" rel="noreferrer noopener">
38-
ご意見・バグ報告
39-
</a>
40-
</li>
41-
</ul>
42-
</div>
4342
</div>
4443
</div>
45-
</div>
44+
45+
{isMenuOpen && (
46+
<div className="absolute top-16 left-0 w-full border-slate-100 border-b bg-white shadow-lg md:hidden">
47+
<div className="flex flex-col gap-1 px-4 pt-2 pb-4">
48+
<NavLink
49+
to="/home"
50+
className="block rounded-lg px-3 py-2 font-medium text-base text-slate-600 hover:bg-slate-50 hover:text-primary"
51+
onClick={() => setIsMenuOpen(false)}
52+
>
53+
ホーム
54+
</NavLink>
55+
<a
56+
href={EXTERNAL_LINKS.GUIDE}
57+
target="_blank"
58+
rel="noreferrer noopener"
59+
className="block rounded-lg px-3 py-2 font-medium text-base text-slate-600 hover:bg-slate-50 hover:text-primary"
60+
>
61+
使い方ページ
62+
</a>
63+
<a
64+
href={EXTERNAL_LINKS.FEEDBACK}
65+
target="_blank"
66+
rel="noreferrer noopener"
67+
className="block rounded-lg px-3 py-2 font-medium text-base text-slate-600 hover:bg-slate-50 hover:text-primary"
68+
>
69+
ご意見・バグ報告
70+
</a>
71+
</div>
72+
</div>
73+
)}
74+
</header>
4675
);
4776
}

‎client/src/constants/links.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
export const EXTERNAL_LINKS = {
2+
GUIDE: "https://utcode.notion.site/1e4ca5f557bc80f2b697ca7b9342dc89?pvs=4",
3+
FEEDBACK: "https://forms.gle/AB6xbgKjnDv5m1nm6",
4+
} as const;

‎client/src/index.css‎

Lines changed: 50 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,56 @@
1515
}
1616

1717
.btn {
18-
font-weight: normal;
18+
font-weight: bold;
19+
@apply rounded-lg transition-all;
20+
}
21+
22+
.btn-primary {
23+
@apply bg-primary text-white shadow-sm hover:bg-primary/90 hover:shadow-md;
24+
}
25+
26+
.btn-primary:disabled {
27+
@apply bg-slate-300 text-slate-500 cursor-not-allowed opacity-60 hover:bg-slate-300 hover:shadow-sm;
28+
}
29+
30+
.btn-primary:focus-visible {
31+
@apply outline-none ring-2 ring-primary ring-offset-2;
32+
}
33+
34+
.btn-primary:active:not(:disabled) {
35+
@apply scale-95 shadow-none;
36+
}
37+
38+
.btn-outline {
39+
@apply border-2 border-slate-200 bg-white text-slate-700 hover:border-slate-300 hover:bg-slate-50;
40+
}
41+
42+
.btn-outline:disabled {
43+
@apply border-slate-200 bg-slate-50 text-slate-400 cursor-not-allowed opacity-60 hover:border-slate-200 hover:bg-slate-50;
44+
}
45+
46+
.btn-outline:focus-visible {
47+
@apply outline-none ring-2 ring-slate-400 ring-offset-2;
48+
}
49+
50+
.btn-outline:active:not(:disabled) {
51+
@apply scale-95 bg-slate-100;
52+
}
53+
54+
.btn-ghost {
55+
@apply bg-transparent hover:bg-slate-50;
56+
}
57+
58+
.btn-ghost:disabled {
59+
@apply text-slate-400 cursor-not-allowed opacity-60 hover:bg-transparent;
60+
}
61+
62+
.btn-ghost:focus-visible {
63+
@apply outline-none ring-2 ring-slate-300 ring-offset-2;
64+
}
65+
66+
.btn-ghost:active:not(:disabled) {
67+
@apply scale-95 bg-slate-100;
1968
}
2069

2170
:root {
@@ -88,10 +137,6 @@
88137
border: 1px solid var(--color-gray-200) !important;
89138
}
90139

91-
body {
92-
background-color: var(--color-primary);
93-
}
94-
95140
#root {
96141
background-color: white;
97142
}

0 commit comments

Comments
 (0)