From 58d132139ba8d5fa17c8681a0275047ce4cca809 Mon Sep 17 00:00:00 2001
From: nsfisis <nsfisis@gmail.com>
Date: Wed, 3 Dec 2025 03:51:29 +0900
Subject: feat(frontend): design update

---
 frontend/src/pages/Login.tsx | 101 ++++++++++++++++++++++++-------------------
 1 file changed, 57 insertions(+), 44 deletions(-)

(limited to 'frontend/src/pages/Login.tsx')

diff --git a/frontend/src/pages/Login.tsx b/frontend/src/pages/Login.tsx
index 4d81234..76a775a 100644
--- a/frontend/src/pages/Login.tsx
+++ b/frontend/src/pages/Login.tsx
@@ -25,51 +25,64 @@ export function Login() {
 	};
 
 	return (
-		<div className="flex justify-center items-center min-h-screen bg-gray-100">
-			<div className="bg-white p-8 rounded-lg shadow w-full max-w-md">
-				<h1 className="mb-6 text-center text-2xl font-bold">Feedaka Login</h1>
-				<form onSubmit={handleSubmit}>
-					<div className="mb-4">
-						<label htmlFor="username" className="block mb-2">
-							Username
-						</label>
-						<input
-							id="username"
-							type="text"
-							value={username}
-							onChange={(e) => setUsername(e.target.value)}
-							required
-							className="w-full p-2 border border-gray-300 rounded disabled:opacity-70 disabled:cursor-not-allowed"
-							disabled={isLoading}
-						/>
-					</div>
-					<div className="mb-4">
-						<label htmlFor="password" className="block mb-2">
-							Password
-						</label>
-						<input
-							id="password"
-							type="password"
-							value={password}
-							onChange={(e) => setPassword(e.target.value)}
-							required
-							className="w-full p-2 border border-gray-300 rounded disabled:opacity-70 disabled:cursor-not-allowed"
-							disabled={isLoading}
-						/>
-					</div>
-					{error && (
-						<div className="text-red-600 mb-4 p-2 bg-red-50 rounded">
-							{error}
+		<div className="flex min-h-screen items-center justify-center bg-gradient-to-br from-stone-100 to-stone-50 px-4">
+			<div className="w-full max-w-sm">
+				<div className="mb-8 text-center">
+					<h1 className="text-2xl font-semibold tracking-tight text-stone-900">
+						feedaka
+					</h1>
+					<p className="mt-2 text-sm text-stone-500">Sign in to your account</p>
+				</div>
+				<div className="rounded-xl border border-stone-200 bg-white p-6 shadow-sm">
+					<form onSubmit={handleSubmit} className="space-y-5">
+						<div>
+							<label
+								htmlFor="username"
+								className="mb-1.5 block text-sm font-medium text-stone-700"
+							>
+								Username
+							</label>
+							<input
+								id="username"
+								type="text"
+								value={username}
+								onChange={(e) => setUsername(e.target.value)}
+								required
+								className="w-full rounded-lg border border-stone-200 bg-white px-4 py-2.5 text-sm text-stone-900 transition-all duration-200 placeholder:text-stone-400 focus:border-sky-500 focus:outline-none focus:ring-2 focus:ring-sky-500/20 disabled:cursor-not-allowed disabled:opacity-70"
+								disabled={isLoading}
+							/>
 						</div>
-					)}
-					<button
-						type="submit"
-						disabled={isLoading}
-						className="w-full p-3 bg-blue-500 text-white rounded cursor-pointer hover:bg-blue-600 disabled:opacity-70 disabled:cursor-not-allowed"
-					>
-						{isLoading ? "Logging in..." : "Login"}
-					</button>
-				</form>
+						<div>
+							<label
+								htmlFor="password"
+								className="mb-1.5 block text-sm font-medium text-stone-700"
+							>
+								Password
+							</label>
+							<input
+								id="password"
+								type="password"
+								value={password}
+								onChange={(e) => setPassword(e.target.value)}
+								required
+								className="w-full rounded-lg border border-stone-200 bg-white px-4 py-2.5 text-sm text-stone-900 transition-all duration-200 placeholder:text-stone-400 focus:border-sky-500 focus:outline-none focus:ring-2 focus:ring-sky-500/20 disabled:cursor-not-allowed disabled:opacity-70"
+								disabled={isLoading}
+							/>
+						</div>
+						{error && (
+							<div className="rounded-lg bg-red-50 p-3 text-sm text-red-600">
+								{error}
+							</div>
+						)}
+						<button
+							type="submit"
+							disabled={isLoading}
+							className="w-full rounded-lg bg-sky-600 px-4 py-2.5 text-sm font-medium text-white transition-all duration-200 hover:bg-sky-700 focus:outline-none focus:ring-2 focus:ring-sky-500 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-70"
+						>
+							{isLoading ? "Signing in..." : "Sign in"}
+						</button>
+					</form>
+				</div>
 			</div>
 		</div>
 	);
-- 
cgit v1.2.3-70-g09d2