fix: migrate inline styles to CSS modules per review feedback

web/src/pages/LoginPage.tsx

@@ -1,6 +1,7 @@
 import { useState, type FormEvent, type ChangeEvent } from "react";
 import { useNavigate, useLocation, Link } from "react-router-dom";
 import { useAuth } from "../contexts/AuthContext";
+import styles from "./LoginPage.module.css";
 
 export default function LoginPage() {
   const navigate = useNavigate();
@@ -33,17 +34,17 @@ export default function LoginPage() {
   };
 
   return (
-    <div style={styles.container}>
-      <div style={styles.card}>
-        <h1 style={styles.title}>Sign In</h1>
-        <p style={styles.subtitle}>Welcome back to Job Tracker</p>
+    <div className={styles.container}>
+      <div className={styles.card}>
+        <h1 className={styles.title}>Sign In</h1>
+        <p className={styles.subtitle}>Welcome back to Job Tracker</p>
 
-        {state.error && <div style={styles.error}>{state.error}</div>}
-        {successMessage && <div style={styles.success}>{successMessage}</div>}
+        {state.error && <div className={styles.error}>{state.error}</div>}
+        {successMessage && <div className={styles.success}>{successMessage}</div>}
 
-        <form onSubmit={handleSubmit} style={styles.form}>
-          <div style={styles.field}>
-            <label htmlFor="email" style={styles.label}>
+        <form onSubmit={handleSubmit} className={styles.form}>
+          <div className={styles.field}>
+            <label htmlFor="email" className={styles.label}>
               Email
             </label>
             <input
@@ -51,14 +52,14 @@ export default function LoginPage() {
               type="email"
               value={email}
               onChange={handleEmailChange}
-              style={styles.input}
+              className={styles.input}
               placeholder="you@example.com"
               required
             />
           </div>
 
-          <div style={styles.field}>
-            <label htmlFor="password" style={styles.label}>
+          <div className={styles.field}>
+            <label htmlFor="password" className={styles.label}>
               Password
             </label>
             <input
@@ -66,8 +67,8 @@ export default function LoginPage() {
               type="password"
               value={password}
               onChange={handlePasswordChange}
-              style={styles.input}
-              placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;"
+              className={styles.input}
+              placeholder="\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7"
               required
             />
           </div>
@@ -75,119 +76,19 @@ export default function LoginPage() {
           <button
             type="submit"
             disabled={state.isLoading}
-            style={{
-              ...styles.button,
-              ...(state.isLoading ? styles.buttonDisabled : {}),
-            }}
+            className={styles.button}
           >
             {state.isLoading ? "Signing in..." : "Sign In"}
           </button>
         </form>
 
-        <p style={styles.footer}>
+        <p className={styles.footer}>
           Don't have an account?{" "}
-          <Link to="/register" style={styles.link}>
+          <Link to="/register" className={styles.link}>
             Create one
           </Link>
         </p>
       </div>
     </div>
   );
-}
-
-const styles: Record<string, React.CSSProperties> = {
-  container: {
-    minHeight: "100vh",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    backgroundColor: "#f5f5f5",
-    fontFamily:
-      '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
-  },
-  card: {
-    backgroundColor: "#fff",
-    padding: "2rem",
-    borderRadius: "8px",
-    boxShadow: "0 2px 8px rgba(0,0,0,0.1)",
-    width: "100%",
-    maxWidth: "400px",
-  },
-  title: {
-    margin: "0 0 0.25rem",
-    fontSize: "1.5rem",
-    fontWeight: 600,
-  },
-  subtitle: {
-    margin: "0 0 1.5rem",
-    color: "#666",
-    fontSize: "0.9rem",
-  },
-  form: {
-    display: "flex",
-    flexDirection: "column",
-    gap: "1rem",
-  },
-  field: {
-    display: "flex",
-    flexDirection: "column",
-    gap: "0.35rem",
-  },
-  label: {
-    fontSize: "0.85rem",
-    fontWeight: 500,
-    color: "#333",
-  },
-  input: {
-    padding: "0.6rem 0.75rem",
-    border: "1px solid #ccc",
-    borderRadius: "6px",
-    fontSize: "0.95rem",
-    outline: "none",
-    transition: "border-color 0.15s",
-  },
-  button: {
-    padding: "0.65rem",
-    backgroundColor: "#1a73e8",
-    color: "#fff",
-    border: "none",
-    borderRadius: "6px",
-    fontSize: "1rem",
-    fontWeight: 500,
-    cursor: "pointer",
-    marginTop: "0.5rem",
-  },
-  buttonDisabled: {
-    opacity: 0.6,
-    cursor: "not-allowed",
-  },
-  error: {
-    backgroundColor: "#fef2f2",
-    color: "#b91c1c",
-    border: "1px solid #fecaca",
-    borderRadius: "6px",
-    padding: "0.5rem 0.75rem",
-    fontSize: "0.85rem",
-    marginBottom: "0.5rem",
-  },
-  success: {
-    backgroundColor: "#f0fdf4",
-    color: "#166534",
-    border: "1px solid #bbf7d0",
-    borderRadius: "6px",
-    padding: "0.5rem 0.75rem",
-    fontSize: "0.85rem",
-    marginBottom: "0.5rem",
-  },
-  footer: {
-    marginTop: "1.25rem",
-    textAlign: "center",
-    fontSize: "0.85rem",
-    color: "#666",
-  },
-  link: {
-    color: "#1a73e8",
-    textDecoration: "none",
-    fontWeight: 500,
-  },
-};
+}