diff options
Diffstat (limited to 'makima/frontend/src')
| -rw-r--r-- | makima/frontend/src/routes/login.tsx | 34 |
1 files changed, 17 insertions, 17 deletions
diff --git a/makima/frontend/src/routes/login.tsx b/makima/frontend/src/routes/login.tsx index 63b3af3..ca1ebd0 100644 --- a/makima/frontend/src/routes/login.tsx +++ b/makima/frontend/src/routes/login.tsx @@ -55,12 +55,12 @@ export default function LoginPage() { <div className="relative z-10 min-h-screen flex flex-col"> <Masthead /> <main className="flex-1 flex items-center justify-center p-4"> - <div className="w-full max-w-md text-center"> - <h1 className="text-2xl font-bold mb-4">Authentication Required</h1> - <p className="text-zinc-400 mb-4"> + <div className="w-full max-w-md text-center panel p-6"> + <h1 className="text-2xl font-bold mb-4 text-[#f0f5ff]">Authentication Required</h1> + <p className="text-[#9bc3ff] mb-4"> Authentication is not configured. Please configure Supabase authentication to use this application. </p> - <p className="text-zinc-500 text-sm"> + <p className="text-[#597aaa] text-sm"> For API access, use an API key in request headers instead. </p> </div> @@ -73,23 +73,23 @@ export default function LoginPage() { <div className="relative z-10 min-h-screen flex flex-col"> <Masthead /> <main className="flex-1 flex items-center justify-center p-4"> - <div className="w-full max-w-md"> + <div className="w-full max-w-md panel p-6"> <div className="text-center mb-8"> - <h1 className="text-2xl font-bold mb-2">Sign In</h1> - <p className="text-zinc-400"> + <h1 className="text-2xl font-bold mb-2 text-[#f0f5ff]">Sign In</h1> + <p className="text-[#9bc3ff]"> {mode === "signin" && "Sign in to your account"} {mode === "signup" && "Create a new account"} </p> </div> {/* Mode switcher */} - <div className="flex border-b border-zinc-800 mb-6"> + <div className="flex border-b border-[#2f476d] mb-6"> <button onClick={() => setMode("signin")} className={`flex-1 py-2 text-sm transition-colors ${ mode === "signin" - ? "text-white border-b-2 border-white" - : "text-zinc-500 hover:text-zinc-300" + ? "text-[#dbe7ff] border-b-2 border-[#3f6fb3]" + : "text-[#597aaa] hover:text-[#9bc3ff]" }`} > Sign In @@ -98,8 +98,8 @@ export default function LoginPage() { onClick={() => setMode("signup")} className={`flex-1 py-2 text-sm transition-colors ${ mode === "signup" - ? "text-white border-b-2 border-white" - : "text-zinc-500 hover:text-zinc-300" + ? "text-[#dbe7ff] border-b-2 border-[#3f6fb3]" + : "text-[#597aaa] hover:text-[#9bc3ff]" }`} > Sign Up @@ -109,24 +109,24 @@ export default function LoginPage() { {/* Email/password form */} <form onSubmit={handleEmailAuth} className="space-y-4"> <div> - <label className="block text-sm text-zinc-400 mb-1">Email</label> + <label className="block text-sm text-[#9bc3ff] mb-1">Email</label> <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="you@example.com" - className="w-full px-3 py-2 bg-zinc-900 border border-zinc-800 rounded text-white placeholder-zinc-600 focus:outline-none focus:border-zinc-600" + className="w-full px-3 py-2 bg-[#0f1c2f] border border-[#2f476d] rounded text-[#dbe7ff] placeholder-[#597aaa] focus:outline-none focus:border-[#3f6fb3]" required /> </div> <div> - <label className="block text-sm text-zinc-400 mb-1">Password</label> + <label className="block text-sm text-[#9bc3ff] mb-1">Password</label> <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} placeholder="********" - className="w-full px-3 py-2 bg-zinc-900 border border-zinc-800 rounded text-white placeholder-zinc-600 focus:outline-none focus:border-zinc-600" + className="w-full px-3 py-2 bg-[#0f1c2f] border border-[#2f476d] rounded text-[#dbe7ff] placeholder-[#597aaa] focus:outline-none focus:border-[#3f6fb3]" required minLength={6} /> @@ -138,7 +138,7 @@ export default function LoginPage() { <button type="submit" disabled={loading} - className="w-full py-2 bg-white text-black rounded font-medium hover:bg-zinc-200 transition-colors disabled:opacity-50" + className="w-full py-2 bg-[#0f3c78] text-[#dbe7ff] border border-[#3f6fb3] rounded font-medium hover:bg-[#1a4c8a] transition-colors disabled:opacity-50" > {loading ? "Loading..." : mode === "signin" ? "Sign In" : "Sign Up"} </button> |