Fix login styling and add email/password fields

Author: pmoharana-cmd

apps/frontend/app/components/SignUpForm.tsx

@@ -2,27 +2,33 @@ import Link from "next/link";
 
 export default function SignupForm({ onSignupSuccess }: { onSignupSuccess: () => void }) {
   return (
-    <div className="w-full max-w-md space-y-6 rounded-lg border border-black p-8">
-      <h1 className="mb-8 text-center text-4xl">Register</h1>
+    <div className="w-full max-w-md space-y-6 rounded-lg border border-slate-300 bg-white p-8 text-slate-900 shadow-lg">
+      <h1 className="mb-8 text-center text-4xl font-semibold text-slate-900">Register</h1>
       <div className="space-y-4">
         <div>
-          <label className="mb-1 block text-sm font-medium">Email</label>
-          <input type="email" className="w-full rounded-sm border border-black p-2" />
+          <label className="mb-1 block text-sm font-medium text-slate-800">Email</label>
+          <input
+            type="email"
+            className="w-full rounded-sm border border-slate-300 bg-white p-2 text-slate-900 placeholder:text-slate-400"
+          />
         </div>
         <div>
-          <label className="mb-1 block text-sm font-medium">Password</label>
-          <input type="password" className="w-full rounded-sm border border-black p-2" />
+          <label className="mb-1 block text-sm font-medium text-slate-800">Password</label>
+          <input
+            type="password"
+            className="w-full rounded-sm border border-slate-300 bg-white p-2 text-slate-900 placeholder:text-slate-400"
+          />
         </div>
       </div>
       <button
         onClick={onSignupSuccess}
-        className="w-full rounded bg-gray-200 py-3 text-lg transition-colors hover:bg-gray-300"
+        className="w-full rounded bg-slate-200 py-3 text-lg font-medium text-slate-900 transition-colors hover:bg-slate-300"
       >
         Register
       </button>
-      <p className="mt-4 text-center text-sm">
+      <p className="mt-4 text-center text-sm text-slate-700">
         Have an account?{" "}
-        <Link href="/login" className="font-semibold hover:underline">
+        <Link href="/login" className="font-semibold text-slate-900 hover:underline">
           Login
         </Link>
       </p>

apps/frontend/app/login/page.tsx

@@ -1,27 +1,66 @@
 "use client";
+import { useState } from "react";
 import Link from "next/link";
 
 export default function LoginPage() {
-  const handleLogin = () => console.log("Standard login triggered");
-  const handleGithubLogin = () => console.log("Github OAuth triggered");
-  const handleGoogleLogin = () => console.log("Google OAuth triggered");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+
+  const logLoginAttempt = (method: "standard" | "github" | "google") => {
+    console.log("Login attempt", {
+      method,
+      email,
+      password,
+    });
+  };
+
+  const handleLogin = () => logLoginAttempt("standard");
+  const handleGithubLogin = () => logLoginAttempt("github");
+  const handleGoogleLogin = () => logLoginAttempt("google");
 
   return (
-    <div className="flex min-h-screen items-center justify-center bg-white p-4">
-      <div className="w-full max-w-md space-y-6 rounded-lg border border-black p-8">
-        <h1 className="mb-8 text-center text-4xl">Login</h1>
-        {/* ... Email/Password inputs ... */}
+    <div className="flex min-h-screen items-center justify-center bg-white p-4 text-slate-900">
+      <div className="w-full max-w-md space-y-6 rounded-lg border border-slate-300 bg-white p-8 shadow-lg">
+        <h1 className="mb-8 text-center text-4xl font-semibold text-slate-900">Login</h1>
+        <div className="space-y-4">
+          <div>
+            <label htmlFor="email" className="mb-1 block text-sm font-medium text-slate-800">
+              Email
+            </label>
+            <input
+              id="email"
+              type="email"
+              value={email}
+              onChange={(event) => setEmail(event.target.value)}
+              className="w-full rounded border border-slate-300 bg-white px-3 py-2 text-slate-900 placeholder:text-slate-400"
+              placeholder="you@example.com"
+            />
+          </div>
+          <div>
+            <label htmlFor="password" className="mb-1 block text-sm font-medium text-slate-800">
+              Password
+            </label>
+            <input
+              id="password"
+              type="password"
+              value={password}
+              onChange={(event) => setPassword(event.target.value)}
+              className="w-full rounded border border-slate-300 bg-white px-3 py-2 text-slate-900 placeholder:text-slate-400"
+              placeholder="Enter your password"
+            />
+          </div>
+        </div>
         <button
           onClick={handleLogin}
-          className="w-full rounded bg-gray-200 py-3 text-lg hover:bg-gray-300"
+          className="w-full rounded bg-slate-200 py-3 text-lg font-medium text-slate-900 transition hover:bg-slate-300"
         >
           Login
         </button>
         <div className="text-right">
           <Link
             href="/forgot-password"
             title="Forgot Password?"
-            className="text-xs hover:underline"
+            className="text-xs text-slate-700 hover:text-slate-900 hover:underline"
           >
             Forgot Password?
           </Link>
@@ -30,20 +69,20 @@ export default function LoginPage() {
         <div className="space-y-3">
           <button
             onClick={handleGithubLogin}
-            className="w-full rounded bg-gray-200 py-3 hover:bg-gray-300"
+            className="w-full rounded bg-slate-200 py-3 font-medium text-slate-900 transition hover:bg-slate-300"
           >
             Login with Github
           </button>
           <button
             onClick={handleGoogleLogin}
-            className="w-full rounded bg-gray-200 py-3 hover:bg-gray-300"
+            className="w-full rounded bg-slate-200 py-3 font-medium text-slate-900 transition hover:bg-slate-300"
           >
             Login with Google
           </button>
         </div>
-        <p className="mt-4 text-center text-sm">
+        <p className="mt-4 text-center text-sm text-slate-700">
           Don&apos;t have an account?{" "}
-          <Link href="/signup" className="font-semibold hover:underline">
+          <Link href="/signup" className="font-semibold text-slate-900 hover:underline">
             Register
           </Link>
         </p>

apps/frontend/app/signup/page.tsx

@@ -7,7 +7,7 @@ export default function SignupPage() {
   const [isSignedUp, setIsSignedUp] = useState(false);
 
   return (
-    <div className="flex min-h-screen items-center justify-center bg-white p-4">
+    <div className="flex min-h-screen items-center justify-center bg-white p-4 text-slate-900">
       {isSignedUp ? (
         <Onboarding onBack={() => setIsSignedUp(false)} />
       ) : (