Skip to content

全体的なデザイン・UI 修正 #80

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
nakaterm merged 7 commits into from
May 14, 2026
Merged

全体的なデザイン・UI 修正 #80

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
4597ad4
feat: 全体のデザイン改善
nakaterm May 14, 2026
7fa82ee
feat: 参加者タブの UI を整理
nakaterm May 14, 2026
c8f23ad
chore: 表記修正
nakaterm May 14, 2026
bdafb99
feat: 提出を3ステップに分割
nakaterm May 14, 2026
a82c8b4
fix: toast の色を修正
nakaterm May 14, 2026
384ade3
fix: 参加者パネルはデフォルトで閉
nakaterm May 14, 2026
7133186
fix: m plus のジャギー回避
nakaterm May 14, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion client/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<!doctype html>
<html lang="ja" style="height: 100%" prefix="og: http://ogp.me/ns#">
<html lang="ja" data-theme="itsuhima" style="height: 100%" prefix="og: http://ogp.me/ns#">

<head>
<meta charset="UTF-8" />
Expand Down
7 changes: 4 additions & 3 deletions client/src/components/Calendar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -318,14 +318,15 @@ export const Calendar = ({
duration: { days: Math.min(countDays, 7) },
dayHeaderContent: (args: DayHeaderContentArg) => {
return (
<div className="font-normal text-gray-600">
<div className="font-normal text-[13px] text-gray-600">
<div>{dayjs.utc(args.date).tz().format("M/D")}</div>
<div>{dayjs.utc(args.date).tz().format("(ddd)")}</div>
</div>
);
},
slotLabelContent: (args: SlotLabelContentArg) => {
return <div className="text-gray-600">{dayjs.utc(args.date).tz().format("HH:mm")}</div>;
// -translate-y-1/2 で時刻ラベルをグリッド線上に中央揃えする
return <div className="-translate-y-1/2 text-gray-600">{dayjs.utc(args.date).tz().format("HH:mm")}</div>;
},
slotLabelInterval: "00:30:00",
validRange: {
Expand Down Expand Up @@ -459,7 +460,7 @@ export const Calendar = ({
}
if (info.event.classNames.includes(EDITING_EVENT)) {
return (
<div className="h-full w-full overflow-hidden text-gray-600">{`${dayjs.utc(info.event.start).tz().format("HH:mm")} - ${dayjs.utc(info.event.end).tz().format("HH:mm")}`}</div>
<div className="h-full w-full overflow-hidden text-[13px] text-gray-600">{`${dayjs.utc(info.event.start).tz().format("HH:mm")} - ${dayjs.utc(info.event.end).tz().format("HH:mm")}`}</div>
);
}
}, []);
Expand Down
14 changes: 7 additions & 7 deletions client/src/components/Footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,25 +2,25 @@ import { EXTERNAL_LINKS } from "../constants/links";

export default function Footer() {
return (
<footer className="bg-slate-900 py-12 text-slate-300">
<footer className="bg-neutral py-12 text-neutral-content/70">
<div className="mx-auto max-w-7xl px-6 sm:px-8 lg:px-10">
<div className="grid gap-12 md:grid-cols-2 lg:gap-24">
<div>
<div className="flex items-center gap-2 text-white">
<div className="flex items-center gap-2 text-neutral-content">
<img src="/logo-white.svg" alt="イツヒマ" className="h-6 w-6" />
<span className="font-bold font-mplus text-xl tracking-tight">イツヒマ</span>
</div>
<p className="mt-6 max-w-md text-slate-400 text-sm">「いつヒマ？」で日程調整しよう</p>
<p className="mt-6 max-w-md text-neutral-content/50 text-sm">「いつヒマ？」で日程調整しよう</p>
</div>
<div>
<h3 className="font-bold text-sm text-white">サポート</h3>
<h3 className="font-bold text-neutral-content text-sm">サポート</h3>
<ul className="mt-4 text-sm">
<li>
<a
href={EXTERNAL_LINKS.GUIDE}
target="_blank"
rel="noreferrer noopener"
className="hover:text-slate-400"
className="hover:text-neutral-content/50"
>
使い方
</a>
Expand All @@ -30,15 +30,15 @@ export default function Footer() {
href={EXTERNAL_LINKS.FEEDBACK}
target="_blank"
rel="noreferrer noopener"
className="hover:text-slate-400"
className="hover:text-neutral-content/50"
>
ご意見・バグ報告
</a>
</li>
</ul>
</div>
</div>
<div className="mt-12 border-slate-800 border-t pt-8 text-center text-slate-500 text-xs">
<div className="mt-12 border-neutral-content/10 border-t pt-8 text-center text-neutral-content/40 text-xs">
<p>&copy; {new Date().getFullYear()} イツヒマ All rights reserved.</p>
</div>
</div>
Expand Down
28 changes: 17 additions & 11 deletions client/src/components/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,25 +7,25 @@ export default function Header() {
const [isMenuOpen, setIsMenuOpen] = useState(false);

return (
<header className="sticky top-0 z-50 w-full border-slate-200 border-b bg-white">
<header className="sticky top-0 z-50 w-full border-base-300 border-b bg-base-100">
<div className="mx-auto flex h-16 w-full max-w-7xl items-center justify-between px-4 sm:px-6 lg:px-8">
<NavLink to="/" className="flex items-center gap-2 transition-opacity hover:opacity-80">
<img src="/logo.svg" alt="イツヒマ" className="h-6 w-6" />
<span className="font-bold font-mplus text-slate-800 text-xl tracking-tight">イツヒマ</span>
<span className="rounded-full bg-slate-100 px-2 py-0.5 font-medium text-[10px] text-slate-500">
アルファ版
<span className="font-bold font-mplus text-base-content text-xl tracking-tight">イツヒマ</span>
<span className="rounded-full bg-base-200 px-2 py-0.5 font-medium text-[10px] text-base-content/50">
(アルファ版)
</span>
</NavLink>

<nav className="hidden items-center gap-6 md:flex">
<NavLink to="/home" className="font-medium text-slate-600 text-sm transition-colors hover:text-primary">
<NavLink to="/home" className="font-medium text-base-content/70 text-sm transition-colors hover:text-primary">
ホーム
</NavLink>
<a
href={EXTERNAL_LINKS.GUIDE}
target="_blank"
rel="noreferrer noopener"
className="font-medium text-slate-600 text-sm transition-colors hover:text-primary"
className="font-medium text-base-content/70 text-sm transition-colors hover:text-primary"
>
使い方
</a>
Expand All @@ -34,20 +34,26 @@ export default function Header() {
<div className="flex items-center md:hidden">
<button
type="button"
className="rounded-lg p-2 text-slate-600 hover:bg-slate-100"
className="rounded-lg p-2 text-base-content/70 hover:bg-base-200"
onClick={() => setIsMenuOpen(!isMenuOpen)}
aria-label={isMenuOpen ? "メニューを閉じる" : "メニューを開く"}
aria-expanded={isMenuOpen}
aria-controls="mobile-menu"
>
{isMenuOpen ? <LuX className="h-6 w-6" /> : <LuMenu className="h-6 w-6" />}
</button>
</div>
</div>

{isMenuOpen && (
<div className="absolute top-16 left-0 w-full border-slate-100 border-b bg-white shadow-lg md:hidden">
<div
id="mobile-menu"
className="absolute top-16 left-0 w-full border-base-300 border-b bg-base-100 shadow-lg md:hidden"
>
<div className="flex flex-col gap-1 px-4 pt-2 pb-4">
<NavLink
to="/home"
className="block rounded-lg px-3 py-2 font-medium text-base text-slate-600 hover:bg-slate-50 hover:text-primary"
className="block rounded-lg px-3 py-2 font-medium text-base text-base-content/70 hover:bg-base-200 hover:text-primary"
onClick={() => setIsMenuOpen(false)}
>
ホーム
Expand All @@ -56,15 +62,15 @@ export default function Header() {
href={EXTERNAL_LINKS.GUIDE}
target="_blank"
rel="noreferrer noopener"
className="block rounded-lg px-3 py-2 font-medium text-base text-slate-600 hover:bg-slate-50 hover:text-primary"
className="block rounded-lg px-3 py-2 font-medium text-base text-base-content/70 hover:bg-base-200 hover:text-primary"
>
使い方ページ
</a>
<a
href={EXTERNAL_LINKS.FEEDBACK}
target="_blank"
rel="noreferrer noopener"
className="block rounded-lg px-3 py-2 font-medium text-base text-slate-600 hover:bg-slate-50 hover:text-primary"
className="block rounded-lg px-3 py-2 font-medium text-base text-base-content/70 hover:bg-base-200 hover:text-primary"
>
ご意見・バグ報告
</a>
Expand Down
78 changes: 57 additions & 21 deletions client/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,50 @@
@import url("https://fonts.googleapis.com/css2?family=M+PLUS+1:wght@100..900&display=swap");
@import "tailwindcss";

@theme {
--font-mplus: "M PLUS 1", sans-serif;
}

@plugin "daisyui";

@plugin "daisyui/theme" {
name: "light";
name: "itsuhima";
default: true;
prefersdark: true; /* TODO: ダークモード対応 */
prefersdark: false; /* TODO: ダークモード対応時に専用テーマを定義する */

--color-primary: #0f82b1;
--color-primary-content: #ffffff;

--color-secondary: #a6e3d8;
--color-secondary-content: #065f52;

--color-accent: #f59e0b;
--color-accent-content: #ffffff;

--color-neutral: #1e293b;
--color-neutral-content: #f8fafc;

--color-base-100: #ffffff;
--color-base-200: #f8fafc;
--color-base-300: #e2e8f0;
--color-base-content: #0f172a;

--color-info: #3b82f6;
--color-info-content: #ffffff;

--color-success: #10b981;
--color-success-content: #ffffff;

--color-warning: #f59e0b;
--color-warning-content: #ffffff;

--color-error: #ef4444;
--color-error-content: #ffffff;

--radius-selector: 0.5rem;
--radius-field: 0.5rem;
--radius-box: 0.75rem;
--radius-badge: 9999px;
}

.btn {
Expand All @@ -24,7 +57,7 @@
}

.btn-primary:disabled {
@apply bg-slate-300 text-slate-500 cursor-not-allowed opacity-60 hover:bg-slate-300 hover:shadow-sm;
@apply bg-base-300 text-base-content/50 cursor-not-allowed opacity-60 hover:bg-base-300 hover:shadow-sm;
}

.btn-primary:focus-visible {
Expand All @@ -36,40 +69,48 @@
}

.btn-outline {
@apply border-2 border-slate-200 bg-white text-slate-700 hover:border-slate-300 hover:bg-slate-50;
@apply border-2 border-base-300 bg-base-100 text-base-content hover:border-base-content/20 hover:bg-base-200;
}

.btn-outline:disabled {
@apply border-slate-200 bg-slate-50 text-slate-400 cursor-not-allowed opacity-60 hover:border-slate-200 hover:bg-slate-50;
@apply border-base-300 bg-base-200 text-base-content/40 cursor-not-allowed opacity-60 hover:border-base-300 hover:bg-base-200;
}

.btn-outline:focus-visible {
@apply outline-none ring-2 ring-slate-400 ring-offset-2;
@apply outline-none ring-2 ring-base-content/30 ring-offset-2;
}

.btn-outline:active:not(:disabled) {
@apply scale-95 bg-slate-100;
@apply scale-95 bg-base-300;
}

.btn-ghost {
@apply bg-transparent hover:bg-slate-50;
@apply bg-transparent hover:bg-base-200;
}

.btn-ghost:disabled {
@apply text-slate-400 cursor-not-allowed opacity-60 hover:bg-transparent;
@apply text-base-content/40 cursor-not-allowed opacity-60 hover:bg-transparent;
}

.btn-ghost:focus-visible {
@apply outline-none ring-2 ring-slate-300 ring-offset-2;
@apply outline-none ring-2 ring-base-content/20 ring-offset-2;
}

.btn-ghost:active:not(:disabled) {
@apply scale-95 bg-slate-100;
@apply scale-95 bg-base-300;
}

body {
font-family: var(--font-mplus);
/* Windows で M PLUS にジャギーが発生する問題の回避策 */
transform: rotate(0.05deg);
}

:root {
--fc-today-bg-color: inherit; /* 今日の日付のハイライトを削除する https://github.com/fullcalendar/fullcalendar/issues/7150 */
--ih-color-primary-transparent: rgb(15, 130, 177, 0.2);

/* カレンダーイベントの半透明背景（primary の 20% opacity） */
--ih-color-primary-transparent: rgb(15 130 177 / 0.2);

overscroll-behavior: none; /* 引っ張って更新を無効化 */
}
Expand All @@ -87,38 +128,33 @@
opacity: 1 !important; /* デフォルトで透明度を付与されるのを防止 */
}

/* 作成の選択範囲 */
.ih-create-select-event {
z-index: 100 !important;
border-width: 1px !important;
border-style: dashed !important;
}

/* 削除の選択範囲 */
.ih-delete-select-event {
z-index: 100 !important;
border-width: 1px !important;
border-style: dashed !important;
border-color: red !important;
}

/* 編集中のイベント */
.ih-editing-event {
border-width: 1px !important;
border-style: solid !important;
}

/* 閲覧中のイベント */
.ih-viewing-event {
border: 3px solid var(--color-gray-200) !important;
border: 3px solid var(--color-base-300) !important;
/* background-color は重ね合わせ個数分 JS で計算*/
}

#member-info {
z-index: 50;
}

/* ツールバー */
.fc-header-toolbar {
margin-bottom: 8px !important;
}
Expand All @@ -133,10 +169,10 @@

.fc-next-button:disabled,
.fc-prev-button:disabled {
color: var(--color-gray-200) !important;
border: 1px solid var(--color-gray-200) !important;
color: var(--color-base-300) !important;
border: 1px solid var(--color-base-300) !important;
}

#root {
background-color: white;
background-color: var(--color-base-100);
}
Loading
Loading