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",
-          color: "#fff",
+          fontSize: "1.4rem",
+          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,48 +35,25 @@ export default function Login() {
   }
 
   return (
+    <div className="login-page">
       <div
-      style={{
-        minHeight: "100vh",
-        backgroundImage: "url(/ping.png)",
-        backgroundSize: "67%",
-        backgroundPosition: "center",
-        backgroundRepeat: "no-repeat",
-      }}
+        className="login-card"
+        onMouseEnter={() => setIsVisible(true)}
       >
-    <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 className="login-heading">
+          <span className="login-brand">Koin Ping</span> - Login
         </h1>
 
+        <div style={{ visibility: isVisible ? 'visible' : 'hidden' }}>
           {error && (
-        <div
-          style={{
-            padding: "0.75rem",
-            marginBottom: "1rem",
-            backgroundColor: "#ff000020",
-            border: "1px solid #ff0000",
-            borderRadius: "4px",
-            color: "#ff6666",
-          }}
-        >
+            <div className="login-error">
               {error}
             </div>
           )}
 
           <form onSubmit={handleSubmit}>
-        <div style={{ marginBottom: "1rem" }}>
-          <label style={{ display: "block", marginBottom: "0.5rem" }}>
+            <div className="login-field">
+              <label className="login-label">
                 Email
               </label>
               <input
@@ -82,21 +61,13 @@ export default function Login() {
                 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",
-            }}
+                className="login-input"
                 required
               />
             </div>
 
-        <div style={{ marginBottom: "1.5rem" }}>
-          <label style={{ display: "block", marginBottom: "0.5rem" }}>
+            <div className="login-field-last">
+              <label className="login-label">
                 Password
               </label>
               <input
@@ -104,15 +75,7 @@ export default function Login() {
                 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",
-            }}
+                className="login-input"
                 required
               />
             </div>
@@ -120,27 +83,18 @@ export default function Login() {
             <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",
-          }}
+              className="login-button"
             >
               {loading ? "Logging in..." : "Log In"}
             </button>
           </form>
 
-      <div style={{ marginTop: "1.5rem", textAlign: "center" }}>
-        <p style={{ color: "#b3b3b3" }}>
+          <div className="login-footer">
+            <p className="login-footer-text">
               Don't have an account?{" "}
               <Link
                 to="/signup"
-            style={{ color: "#0066cc", textDecoration: "none" }}
+                className="login-signup-link"
               >
                 Sign up here
               </Link>
@@ -148,5 +102,6 @@ export default function Login() {
           </div>
         </div>
       </div>
+    </div>
   );
 }