feat: Implement a dark theme and modern UI components with improved layout and styling.

frontend/src/Login.tsx

@@ -41,37 +41,36 @@ export function Login({ onLogin }: LoginProps) {
   };
 
   return (
-    <div className="card">
-      <h2>Login</h2>
-      <form
-        onSubmit={handleSubmit}
-        style={{ display: "flex", flexDirection: "column", gap: "1rem" }}
-      >
-        <div>
-          <label style={{ display: "block", marginBottom: "0.5rem" }}>
-            Username:{" "}
-          </label>
+    <div className="card" style={{ maxWidth: "400px", margin: "4rem auto" }}>
+      <h2 style={{ textAlign: "center", marginBottom: "2rem" }}>Login</h2>
+      <form onSubmit={handleSubmit} className="form-group">
+        <div className="form-group">
+          <label>Username</label>
           <input
             type="text"
             value={username}
             onChange={(e) => setUsername(e.target.value)}
-            style={{ padding: "0.5rem" }}
+            placeholder="Enter your username"
           />
         </div>
-        <div>
-          <label style={{ display: "block", marginBottom: "0.5rem" }}>
-            Password:{" "}
-          </label>
+        <div className="form-group">
+          <label>Password</label>
           <input
             type="password"
             value={password}
             onChange={(e) => setPassword(e.target.value)}
-            style={{ padding: "0.5rem" }}
+            placeholder="Enter your password"
           />
         </div>
-        <button type="submit">Login</button>
+        <button type="submit" style={{ marginTop: "1rem" }}>
+          Login
+        </button>
       </form>
-      {error && <p style={{ color: "red", marginTop: "1rem" }}>{error}</p>}
+      {error && (
+        <p style={{ color: "#ff6b6b", marginTop: "1rem", textAlign: "center" }}>
+          {error}
+        </p>
+      )}
     </div>
   );
 }