UI リニューアル

client/src/components/Footer.tsx

@@ -0,0 +1,47 @@
+import { EXTERNAL_LINKS } from "../constants/links";
+
+export default function Footer() {
+  return (
+    <footer className="bg-slate-900 py-12 text-slate-300">
+      <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">
+              <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>
+          </div>
+          <div>
+            <h3 className="font-bold text-sm text-white">サポート</h3>
+            <ul className="mt-4 text-sm">
+              <li>
+                <a
+                  href={EXTERNAL_LINKS.GUIDE}
+                  target="_blank"
+                  rel="noreferrer noopener"
+                  className="hover:text-slate-400"
+                >
+                  使い方
+                </a>
+              </li>
+              <li className="mt-3">
+                <a
+                  href={EXTERNAL_LINKS.FEEDBACK}
+                  target="_blank"
+                  rel="noreferrer noopener"
+                  className="hover:text-slate-400"
+                >
+                  ご意見・バグ報告
+                </a>
+              </li>
+            </ul>
+          </div>
+        </div>
+        <div className="mt-12 border-slate-800 border-t pt-8 text-center text-slate-500 text-xs">
+          <p>&copy; {new Date().getFullYear()} イツヒマ All rights reserved.</p>
+        </div>
+      </div>
+    </footer>
+  );
+}

client/src/components/Header.tsx

@@ -1,47 +1,76 @@
-import { HiOutlineHome, HiOutlineQuestionMarkCircle } from "react-icons/hi";
+import { useState } from "react";
+import { LuMenu, LuX } from "react-icons/lu";
 import { NavLink } from "react-router";
+import { EXTERNAL_LINKS } from "../constants/links";
 
 export default function Header() {
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+
   return (
-    <div className="navbar sticky top-0 left-0 z-50 bg-primary shadow-sm">
-      <div className="px-2 font-mplus text-2xl text-white">
-        <NavLink className="flex items-center gap-1" to="/">
-          <img src="/logo-white.svg" alt="logo" width={24} />
-          <span className="px-2">イツヒマ</span>
-          <span className="text-xs">(アルファ版)</span>
+    <header className="sticky top-0 z-50 w-full border-slate-200 border-b bg-white">
+      <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>
         </NavLink>
-      </div>
-      <div>
-        <div className="dropdown dropdown-end -translate-y-1/2 absolute top-1/2 right-3 transform text-gray-600">
-          <NavLink className="btn btn-primary" to="/home">
-            <HiOutlineHome size={24} className="text-white" />
-            <span className="hidden md:block">ホーム</span>
+
+        <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>
-          <button tabIndex={0} className="btn btn-circle btn-primary" type="button">
-            <HiOutlineQuestionMarkCircle size={28} className="text-white" />
+          <a
+            href={EXTERNAL_LINKS.GUIDE}
+            target="_blank"
+            rel="noreferrer noopener"
+            className="font-medium text-slate-600 text-sm transition-colors hover:text-primary"
+          >
+            使い方
+          </a>
+        </nav>
+
+        <div className="flex items-center md:hidden">
+          <button
+            type="button"
+            className="rounded-lg p-2 text-slate-600 hover:bg-slate-100"
+            onClick={() => setIsMenuOpen(!isMenuOpen)}
+          >
+            {isMenuOpen ? <LuX className="h-6 w-6" /> : <LuMenu className="h-6 w-6" />}
           </button>
-          <div className="dropdown-content z-[1] w-56 rounded-box bg-base-100 p-2 shadow">
-            <p className="p-2 text-xs">イツヒマは現在アルファ版です。</p>
-            {/* biome-ignore lint/a11y/noNoninteractiveTabindex: daisyUI の仕様。tabIndex を消すとモバイルで開かないなどの問題が起こる */}
-            <ul tabIndex={0} className="menu p-0">
-              <li>
-                <a
-                  href="https://utcode.notion.site/1e4ca5f557bc80f2b697ca7b9342dc89?pvs=4"
-                  target="_blank"
-                  rel="noreferrer noopener"
-                >
-                  使い方ページ (臨時)
-                </a>
-              </li>
-              <li>
-                <a href="https://forms.gle/AB6xbgKjnDv5m1nm6" target="_blank" rel="noreferrer noopener">
-                  ご意見・バグ報告
-                </a>
-              </li>
-            </ul>
-          </div>
         </div>
       </div>
-    </div>
+
+      {isMenuOpen && (
+        <div className="absolute top-16 left-0 w-full border-slate-100 border-b bg-white 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"
+              onClick={() => setIsMenuOpen(false)}
+            >
+              ホーム
+            </NavLink>
+            <a
+              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"
+            >
+              使い方ページ
+            </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"
+            >
+              ご意見・バグ報告
+            </a>
+          </div>
+        </div>
+      )}
+    </header>
   );
 }

client/src/constants/links.ts

@@ -0,0 +1,4 @@
+export const EXTERNAL_LINKS = {
+  GUIDE: "https://utcode.notion.site/1e4ca5f557bc80f2b697ca7b9342dc89?pvs=4",
+  FEEDBACK: "https://forms.gle/AB6xbgKjnDv5m1nm6",
+} as const;

client/src/index.css

@@ -15,7 +15,56 @@
 }
 
 .btn {
-  font-weight: normal;
+  font-weight: bold;
+  @apply rounded-lg transition-all;
+}
+
+.btn-primary {
+  @apply bg-primary text-white shadow-sm hover:bg-primary/90 hover:shadow-md;
+}
+
+.btn-primary:disabled {
+  @apply bg-slate-300 text-slate-500 cursor-not-allowed opacity-60 hover:bg-slate-300 hover:shadow-sm;
+}
+
+.btn-primary:focus-visible {
+  @apply outline-none ring-2 ring-primary ring-offset-2;
+}
+
+.btn-primary:active:not(:disabled) {
+  @apply scale-95 shadow-none;
+}
+
+.btn-outline {
+  @apply border-2 border-slate-200 bg-white text-slate-700 hover:border-slate-300 hover:bg-slate-50;
+}
+
+.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;
+}
+
+.btn-outline:focus-visible {
+  @apply outline-none ring-2 ring-slate-400 ring-offset-2;
+}
+
+.btn-outline:active:not(:disabled) {
+  @apply scale-95 bg-slate-100;
+}
+
+.btn-ghost {
+  @apply bg-transparent hover:bg-slate-50;
+}
+
+.btn-ghost:disabled {
+  @apply text-slate-400 cursor-not-allowed opacity-60 hover:bg-transparent;
+}
+
+.btn-ghost:focus-visible {
+  @apply outline-none ring-2 ring-slate-300 ring-offset-2;
+}
+
+.btn-ghost:active:not(:disabled) {
+  @apply scale-95 bg-slate-100;
 }
 
 :root {
@@ -88,10 +137,6 @@
   border: 1px solid var(--color-gray-200) !important;
 }
 
-body {
-  background-color: var(--color-primary);
-}
-
 #root {
   background-color: white;
 }