From 647be874e532d0937b75b7a01ca615981756311c Mon Sep 17 00:00:00 2001
From: KS Jannette <kjannette@KSs-MacBook-Air.local>
Date: Mon, 2 Mar 2026 00:09:01 -0500
Subject: [PATCH] m

---
 frontend/src/pages/Login.css |  88 ++++++++++++++++++
 frontend/src/pages/Login.jsx | 167 ++++++++++++-----------------------
 2 files changed, 146 insertions(+), 109 deletions(-)
 create mode 100644 frontend/src/pages/Login.css

diff --git a/frontend/src/pages/Login.css b/frontend/src/pages/Login.css
new file mode 100644
index 0000000..d580a2d
--- /dev/null
+++ b/frontend/src/pages/Login.css
@@ -0,0 +1,88 @@
+.login-page {
+  min-height: 100vh;
+  background-image: url(/ping.png);
+  background-size: 67%;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+.login-card {
+  max-width: 400px;
+  margin: 20px auto;
+  padding: 2rem;
+  padding-top: 8rem;
+  border: 1px solid #333;
+  border-radius: 8px;
+  background-color: rgba(0, 0, 0, 0.75);
+}
+
+.login-heading {
+  margin-bottom: 2rem;
+  text-align: center;
+}
+
+.login-brand {
+  color: #e62525;
+}
+
+.login-error {
+  padding: 0.75rem;
+  margin-bottom: 1rem;
+  background-color: #ff000020;
+  border: 1px solid #ff0000;
+  border-radius: 4px;
+  color: #ff6666;
+}
+
+.login-field {
+  margin-bottom: 1rem;
+}
+
+.login-field-last {
+  margin-bottom: 1.5rem;
+}
+
+.login-label {
+  display: block;
+  margin-bottom: 0.5rem;
+}
+
+.login-input {
+  width: 100%;
+  padding: 0.5rem;
+  font-size: 1.2rem;
+  background-color: #242424;
+  border: 1px solid #444;
+  border-radius: 4px;
+  color: white;
+}
+
+.login-button {
+  width: 100%;
+  padding: 0.75rem;
+  font-size: 1.2rem;
+  background-color: #0066cc;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.login-button:disabled {
+  background-color: #333;
+  cursor: not-allowed;
+}
+
+.login-footer {
+  margin-top: 1.5rem;
+  text-align: center;
+}
+
+.login-footer-text {
+  color: #b3b3b3;
+}
+
+.login-signup-link {
+  color: #0066cc;
+  text-decoration: none;
+}
diff --git a/frontend/src/pages/Login.jsx b/frontend/src/pages/Login.jsx
index 981f2dd..b1905ae 100644
--- a/frontend/src/pages/Login.jsx
+++ b/frontend/src/pages/Login.jsx
@@ -1,6 +1,7 @@
 import { useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
 import { useAuth } from "../contexts/AuthContext";
+import "./Login.css";
 
 export default function Login() {
   const [email, setEmail] = useState("");
@@ -33,120 +34,68 @@ export default function Login() {
   }
 
   return (
-    <div
-      style={{
-        minHeight: "100vh",
-        backgroundImage: "url(/ping.png)",
-        backgroundSize: "67%",
-        backgroundPosition: "center",
-        backgroundRepeat: "no-repeat",
-      }}
-    >
-    <div
-      style={{
-        maxWidth: "400px",
-        margin: "0 auto",
-        padding: "2rem",
-        paddingTop: "8rem",
-        border: "1px solid #333",
-        borderRadius: "8px",
-        backgroundColor: "rgba(0, 0, 0, 0.75)",
-      }}
-    >
-      <h1 style={{ marginBottom: "2rem", textAlign: "center" }}>
-        Koin Ping - Login
-      </h1>
+    <div className="login-page">
+      <div className="login-card">
+        <h1 className="login-heading">
+          <span className="login-brand">Koin Ping</span> - Login
+        </h1>
 
-      {error && (
-        <div
-          style={{
-            padding: "0.75rem",
-            marginBottom: "1rem",
-            backgroundColor: "#ff000020",
-            border: "1px solid #ff0000",
-            borderRadius: "4px",
-            color: "#ff6666",
-          }}
-        >
-          {error}
-        </div>
-      )}
+        {error && (
+          <div className="login-error">
+            {error}
+          </div>
+        )}
 
-      <form onSubmit={handleSubmit}>
-        <div style={{ marginBottom: "1rem" }}>
-          <label style={{ display: "block", marginBottom: "0.5rem" }}>
-            Email
-          </label>
-          <input
-            type="email"
-            value={email}
-            onChange={(e) => setEmail(e.target.value)}
+        <form onSubmit={handleSubmit}>
+          <div className="login-field">
+            <label className="login-label">
+              Email
+            </label>
+            <input
+              type="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              disabled={loading}
+              className="login-input"
+              required
+            />
+          </div>
+
+          <div className="login-field-last">
+            <label className="login-label">
+              Password
+            </label>
+            <input
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              disabled={loading}
+              className="login-input"
+              required
+            />
+          </div>
+
+          <button
+            type="submit"
             disabled={loading}
-            style={{
-              width: "100%",
-              padding: "0.5rem",
-              fontSize: "1.2rem",
-              backgroundColor: "#242424",
-              border: "1px solid #444",
-              borderRadius: "4px",
-              color: "white",
-            }}
-            required
-          />
-        </div>
-
-        <div style={{ marginBottom: "1.5rem" }}>
-          <label style={{ display: "block", marginBottom: "0.5rem" }}>
-            Password
-          </label>
-          <input
-            type="password"
-            value={password}
-            onChange={(e) => setPassword(e.target.value)}
-            disabled={loading}
-            style={{
-              width: "100%",
-              padding: "0.5rem",
-              fontSize: "1.2rem",
-              backgroundColor: "#242424",
-              border: "1px solid #444",
-              borderRadius: "4px",
-              color: "white",
-            }}
-            required
-          />
-        </div>
-
-        <button
-          type="submit"
-          disabled={loading}
-          style={{
-            width: "100%",
-            padding: "0.75rem",
-            fontSize: "1.2rem",
-            backgroundColor: loading ? "#333" : "#0066cc",
-            color: "white",
-            border: "none",
-            borderRadius: "4px",
-            cursor: loading ? "not-allowed" : "pointer",
-          }}
-        >
-          {loading ? "Logging in..." : "Log In"}
-        </button>
-      </form>
-
-      <div style={{ marginTop: "1.5rem", textAlign: "center" }}>
-        <p style={{ color: "#b3b3b3" }}>
-          Don't have an account?{" "}
-          <Link
-            to="/signup"
-            style={{ color: "#0066cc", textDecoration: "none" }}
+            className="login-button"
           >
-            Sign up here
-          </Link>
-        </p>
+            {loading ? "Logging in..." : "Log In"}
+          </button>
+        </form>
+
+        <div className="login-footer">
+          <p className="login-footer-text">
+            Don't have an account?{" "}
+            <Link
+              to="/signup"
+              className="login-signup-link"
+            >
+              Sign up here
+            </Link>
+          </p>
+        </div>
       </div>
     </div>
-    </div>
   );
 }