feat(frontend): improve dashboard styling

3 files changed, 56 insertions, 44 deletions

diff --git a/frontend/app/components/NavigateLink.tsx b/frontend/app/components/NavigateLink.tsx
new file mode 100644
index 0000000..a94d774
--- /dev/null
+++ b/frontend/app/components/NavigateLink.tsx
@@ -0,0 +1,10 @@
+import { Link, LinkProps } from "@remix-run/react";
+
+export default function NavigateLink(props: LinkProps) {
+	return (
+		<Link
+			{...props}
+			className="text-lg text-white bg-pink-600 px-4 py-2 rounded transition duration-300 hover:bg-pink-500"
+		/>
+	);
+}
diff --git a/frontend/app/routes/_index.tsx b/frontend/app/routes/_index.tsx
index 9f9c2bb..9be594f 100644
--- a/frontend/app/routes/_index.tsx
+++ b/frontend/app/routes/_index.tsx
@@ -1,8 +1,8 @@
 import type { LoaderFunctionArgs, MetaFunction } from "@remix-run/node";
-import { Link } from "@remix-run/react";
 import "@fortawesome/fontawesome-svg-core/styles.css";
 import { ensureUserNotLoggedIn } from "../.server/auth";
 import BorderedContainer from "../components/BorderedContainer";
+import NavigateLink from "../components/NavigateLink";
 
 export const meta: MetaFunction = () => [
 	{ title: "iOSDC Japan 2024 Albatross.swift" },
@@ -40,12 +40,7 @@ export default function Index() {
 				</BorderedContainer>
 			</div>
 			<div>
-				<Link
-					to="/login"
-					className="text-lg text-white bg-pink-600 px-4 py-2 rounded transition duration-300 hover:bg-pink-500"
-				>
-					ログイン
-				</Link>
+				<NavigateLink to="/login">ログイン</NavigateLink>
 			</div>
 		</div>
 	);
diff --git a/frontend/app/routes/dashboard.tsx b/frontend/app/routes/dashboard.tsx
index 37dafff..6b242c4 100644
--- a/frontend/app/routes/dashboard.tsx
+++ b/frontend/app/routes/dashboard.tsx
@@ -1,8 +1,10 @@
 import type { LoaderFunctionArgs, MetaFunction } from "@remix-run/node";
 import { redirect } from "@remix-run/node";
-import { Form, Link, useLoaderData } from "@remix-run/react";
+import { Form, useLoaderData } from "@remix-run/react";
 import { apiGetGames } from "../.server/api/client";
 import { ensureUserLoggedIn } from "../.server/auth";
+import BorderedContainer from "../components/BorderedContainer";
+import NavigateLink from "../components/NavigateLink";
 
 export const meta: MetaFunction = () => [
 	{ title: "Dashboard | iOSDC Japan 2024 Albatross.swift" },
@@ -28,48 +30,53 @@ export default function Dashboard() {
 	const { user, games } = useLoaderData<typeof loader>()!;
 
 	return (
-		<div className="min-h-screen p-8">
-			<div className="p-6 rounded shadow-md max-w-4xl mx-auto">
-				<h1 className="text-3xl font-bold mb-4">{user.username}</h1>
-				<h2 className="text-2xl font-semibold mb-2">User</h2>
-				<div className="mb-6">
-					<ul className="list-disc list-inside">
-						<li>Name: {user.display_name}</li>
-					</ul>
-				</div>
-				<h2 className="text-2xl font-semibold mb-2">Games</h2>
-				<div>
-					<ul className="list-disc list-inside">
+		<div className="p-6 bg-gray-100 min-h-screen flex flex-col items-center">
+			<h1 className="text-2xl font-bold mb-4 text-gray-800">
+				<span>{user.display_name}</span>
+				<span className="text-gray-500 ml-2">@{user.username}</span>
+			</h1>
+			<h2 className="text-xl font-semibold mb-4 text-gray-700">試合</h2>
+			<BorderedContainer>
+				<div className="px-4">
+					<ul className="divide-y">
 						{games.map((game) => (
-							<li key={game.game_id}>
-								{game.display_name}
-								{game.game_type === "multiplayer" ? " (Multiplayer)" : " (1v1)"}
-								{game.state === "closed" || game.state === "finished" ? (
-									<span className="inline-block px-6 py-2 text-gray-400 bg-gray-200 cursor-not-allowed rounded">
-										Entry
+							<li
+								key={game.game_id}
+								className="flex justify-between items-center py-3 gap-3"
+							>
+								<div>
+									<span className="font-medium text-gray-800">
+										{game.display_name}
 									</span>
-								) : (
-									<Link
-										to={`/golf/${game.game_id}/play`}
-										className="inline-block px-6 py-2 text-white bg-blue-500 hover:bg-blue-700 rounded"
-									>
-										Entry
-									</Link>
-								)}
+									<span className="text-sm text-gray-500 ml-2">
+										{game.game_type === "multiplayer" ? " (マルチ)" : " (1v1)"}
+									</span>
+								</div>
+								<span>
+									{game.state === "closed" || game.state === "finished" ? (
+										<span className="text-lg text-gray-400 bg-gray-200 px-4 py-2 rounded">
+											入室
+										</span>
+									) : (
+										<NavigateLink to={`/golf/${game.game_id}/play`}>
+											入室
+										</NavigateLink>
+									)}
+								</span>
 							</li>
 						))}
 					</ul>
 				</div>
-				<div>
-					<Form method="post" action="/logout">
-						<button
-							className="mt-6 px-6 py-2 text-white bg-red-500 hover:bg-red-700 rounded"
-							type="submit"
-						>
-							Logout
-						</button>
-					</Form>
-				</div>
+			</BorderedContainer>
+			<div className="mt-6">
+				<Form method="post" action="/logout">
+					<button
+						type="submit"
+						className="px-4 py-2 bg-red-500 text-white rounded transition duration-300 hover:bg-red-700 focus:ring focus:ring-red-400 focus:outline-none"
+					>
+						ログアウト
+					</button>
+				</Form>
 			</div>
 		</div>
 	);