Merge pull request #12 from kjannette/migrate-inline-css

Migrate inline css

frontend/src/components/Navbar.jsx

@@ -26,8 +26,8 @@ export default function Navbar() {
       <div style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
         <span style={{
           fontWeight: 700,
-          fontSize: "1.1rem",
+          fontSize: "1.4rem",
-          color: "#fff",
+          color: "#e62525",
           marginRight: "2rem",
           letterSpacing: "0.5px",
         }}>

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;
+}

frontend/src/pages/Login.jsx

@@ -1,8 +1,10 @@
 import { useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
 import { useAuth } from "../contexts/AuthContext";
+import "./Login.css";
 
 export default function Login() {
+  const [isVisible, setIsVisible] = useState(false);
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
   const [error, setError] = useState("");
@@ -33,120 +35,73 @@ export default function Login() {
   }
 
   return (
-    <div
+    <div className="login-page">
-      style={{
+      <div
-        minHeight: "100vh",
+        className="login-card"
-        backgroundImage: "url(/ping.png)",
+        onMouseEnter={() => setIsVisible(true)}
-        backgroundSize: "67%",
+      >
-        backgroundPosition: "center",
+        <h1 className="login-heading">
-        backgroundRepeat: "no-repeat",
+          <span className="login-brand">Koin Ping</span> - Login
-      }}
+        </h1>
-    >
-    <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>
 
-      {error && (
+        <div style={{ visibility: isVisible ? 'visible' : 'hidden' }}>
-        <div
+          {error && (
-          style={{
+            <div className="login-error">
-            padding: "0.75rem",
+              {error}
-            marginBottom: "1rem",
+            </div>
-            backgroundColor: "#ff000020",
+          )}
-            border: "1px solid #ff0000",
+
-            borderRadius: "4px",
+          <form onSubmit={handleSubmit}>
-            color: "#ff6666",
+            <div className="login-field">
-          }}
+              <label className="login-label">
-        >
+                Email
-          {error}
+              </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}
+              className="login-button"
+            >
+              {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>
-      )}
-
-      <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)}
-            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" }}
-          >
-            Sign up here
-          </Link>
-        </p>
       </div>
     </div>
-    </div>
   );
 }