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

frontend/src/App.css

@@ -2,41 +2,79 @@
   max-width: 1280px;
   margin: 0 auto;
   padding: 2rem;
-  text-align: center;
-}
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
+  width: 100%;
 }
 
 .card {
-  padding: 2em;
+  background-color: var(--secondary-bg);
+  padding: 2rem;
+  border-radius: 16px;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  border: 1px solid var(--border-color);
 }
 
-.read-the-docs {
-  color: #888;
+.navbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 2rem;
+  padding-bottom: 1rem;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.nav-links {
+  display: flex;
+  gap: 1.5rem;
+}
+
+.nav-link {
+  font-size: 1.2rem;
+  font-weight: 600;
+  color: var(--text-muted);
+  transition: color 0.2s;
+}
+
+.nav-link:hover, .nav-link.active {
+  color: var(--accent-color);
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+}
+
+.form-group label {
+  font-size: 0.9rem;
+  color: var(--text-muted);
+}
+
+.btn-secondary {
+  background-color: var(--secondary-alt-bg);
+  border: 1px solid var(--border-color);
+}
+
+.btn-secondary:hover {
+  background-color: var(--border-color);
+}
+
+.list-item {
+  background-color: var(--secondary-alt-bg);
+  padding: 1rem;
+  border-radius: 8px;
+  margin-bottom: 1rem;
+  border: 1px solid var(--border-color);
+  transition: transform 0.2s;
+}
+
+.list-item:hover {
+  transform: translateY(-2px);
+  border-color: var(--accent-color);
+}
+
+.grid-container {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: 1.5rem;
 }

frontend/src/App.tsx

@@ -44,33 +44,18 @@ function App() {
   return (
     <BrowserRouter>
       <div className="card">
-        <div
-          style={{
-            display: "flex",
-            justifyContent: "space-between",
-            alignItems: "center",
-            marginBottom: "1rem",
-          }}
-        >
-          <h2>
-            <Link
-              to="/"
-              style={{
-                textDecoration: "none",
-                color: "inherit",
-                marginRight: "1rem",
-              }}
-            >
+        <div className="navbar">
+          <div className="nav-links">
+            <Link to="/" className="nav-link">
               People List
             </Link>
-            <Link
-              to="/games"
-              style={{ textDecoration: "none", color: "inherit" }}
-            >
+            <Link to="/games" className="nav-link">
               Games
             </Link>
-          </h2>
-          <button onClick={handleLogout}>Logout</button>
+          </div>
+          <button onClick={handleLogout} className="btn-secondary">
+            Logout
+          </button>
         </div>
         <Routes>
           <Route path="/" element={<PersonList people={people} />} />

frontend/src/GameList.tsx

@@ -70,27 +70,30 @@ export function GameList() {
   return (
     <div>
       <h2>Add New Game</h2>
-      {message && <p>{message}</p>}
+      {message && (
+        <p
+          style={{ color: message.includes("success") ? "#4caf50" : "#f44336" }}
+        >
+          {message}
+        </p>
+      )}
       <form
         onSubmit={handleSubmit}
-        style={{
-          display: "flex",
-          flexDirection: "column",
-          gap: "1rem",
-          maxWidth: "400px",
-        }}
+        className="form-group"
+        style={{ maxWidth: "500px" }}
       >
-        <label>
-          Title:
+        <div className="form-group">
+          <label>Title</label>
           <input
             type="text"
             value={title}
             onChange={(e) => setTitle(e.target.value)}
             required
+            placeholder="Game Title"
           />
-        </label>
-        <label>
-          Source:
+        </div>
+        <div className="form-group">
+          <label>Source</label>
           <select
             value={source}
             onChange={(e) => setSource(Number(e.target.value))}
@@ -98,56 +101,92 @@ export function GameList() {
             <option value={Source.STEAM}>Steam</option>
             <option value={Source.ROBLOX}>Roblox</option>
           </select>
-        </label>
-        <label>
-          Multiplayer:
+        </div>
+        <div
+          className="form-group"
+          style={{ flexDirection: "row", alignItems: "center" }}
+        >
           <input
             type="checkbox"
             checked={multiplayer}
             onChange={(e) => setMultiplayer(e.target.checked)}
+            id="multiplayer"
           />
-        </label>
-        <label>
-          Min Players:
-          <input
-            type="number"
-            value={minPlayers}
-            onChange={(e) => setMinPlayers(Number(e.target.value))}
-          />
-        </label>
-        <label>
-          Max Players:
-          <input
-            type="number"
-            value={maxPlayers}
-            onChange={(e) => setMaxPlayers(Number(e.target.value))}
-          />
-        </label>
-        <label>
-          Price:
-          <input
-            type="number"
-            value={price}
-            onChange={(e) => setPrice(Number(e.target.value))}
-          />
-        </label>
-        <label>
-          Remote ID:
-          <input
-            type="number"
-            value={remoteId}
-            onChange={(e) => setRemoteId(Number(e.target.value))}
-          />
-        </label>
-        <button type="submit">Add Game</button>
+          <label
+            htmlFor="multiplayer"
+            style={{ marginBottom: 0, cursor: "pointer" }}
+          >
+            Multiplayer
+          </label>
+        </div>
+        <div
+          style={{
+            display: "grid",
+            gridTemplateColumns: "1fr 1fr",
+            gap: "1rem",
+          }}
+        >
+          <div className="form-group">
+            <label>Min Players</label>
+            <input
+              type="number"
+              value={minPlayers}
+              onChange={(e) => setMinPlayers(Number(e.target.value))}
+            />
+          </div>
+          <div className="form-group">
+            <label>Max Players</label>
+            <input
+              type="number"
+              value={maxPlayers}
+              onChange={(e) => setMaxPlayers(Number(e.target.value))}
+            />
+          </div>
+        </div>
+        <div
+          style={{
+            display: "grid",
+            gridTemplateColumns: "1fr 1fr",
+            gap: "1rem",
+          }}
+        >
+          <div className="form-group">
+            <label>Price</label>
+            <input
+              type="number"
+              value={price}
+              onChange={(e) => setPrice(Number(e.target.value))}
+            />
+          </div>
+          <div className="form-group">
+            <label>Remote ID</label>
+            <input
+              type="number"
+              value={remoteId}
+              onChange={(e) => setRemoteId(Number(e.target.value))}
+            />
+          </div>
+        </div>
+        <button type="submit" style={{ marginTop: "1rem" }}>
+          Add Game
+        </button>
       </form>
 
-      <div style={{ marginTop: "2rem" }}>
+      <div style={{ marginTop: "3rem" }}>
         <h3>Existing Games</h3>
-        <ul>
+        <ul className="grid-container">
           {games.map((game) => (
-            <li key={game.title}>
-              {game.title} ({game.source === Source.STEAM ? "Steam" : "Roblox"})
+            <li key={game.title} className="list-item">
+              <strong>{game.title}</strong>
+              <div
+                style={{
+                  fontSize: "0.9em",
+                  color: "var(--text-muted)",
+                  marginTop: "0.5rem",
+                }}
+              >
+                {game.source === Source.STEAM ? "Steam" : "Roblox"}
+              </div>
             </li>
           ))}
         </ul>

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

frontend/src/PersonDetails.tsx

@@ -75,44 +75,85 @@ export const PersonDetails = () => {
   if (!person) return <div>Loading...</div>;
 
   return (
-    <div className="card">
-      <h2>{person.name}</h2>
-      <ul>
-        {person.opinion.map((op, i) => (
-          <li key={i}>
-            {op.title} - {op.wouldPlay ? "Would Play" : "Would Not Play"}
-          </li>
-        ))}
-      </ul>
+    <div>
+      <div style={{ marginBottom: "2rem" }}>
+        <h2>{person.name}</h2>
+        <ul className="grid-container">
+          {person.opinion.map((op, i) => (
+            <li
+              key={i}
+              className="list-item"
+              style={{ borderColor: op.wouldPlay ? "#4caf50" : "#f44336" }}
+            >
+              <strong>{op.title}</strong>
+              <div
+                style={{
+                  color: op.wouldPlay ? "#4caf50" : "#f44336",
+                  marginTop: "0.5rem",
+                }}
+              >
+                {op.wouldPlay ? "Would Play" : "Would Not Play"}
+              </div>
+            </li>
+          ))}
+        </ul>
+      </div>
 
       <div
         style={{
           marginTop: "2rem",
-          borderTop: "1px solid #ccc",
-          paddingTop: "1rem",
+          borderTop: "1px solid var(--border-color)",
+          paddingTop: "2rem",
         }}
       >
         <h3>Add Opinion</h3>
-        <div style={{ display: "flex", gap: "1rem", alignItems: "center" }}>
-          <select
-            value={gameTitle}
-            onChange={(e) => setGameTitle(e.target.value)}
+        <div
+          style={{
+            display: "flex",
+            gap: "1rem",
+            alignItems: "flex-end",
+            flexWrap: "wrap",
+          }}
+        >
+          <div className="form-group" style={{ marginBottom: 0, flex: 1 }}>
+            <label>Game</label>
+            <select
+              value={gameTitle}
+              onChange={(e) => setGameTitle(e.target.value)}
+              style={{ width: "100%" }}
+            >
+              {games.map((g) => (
+                <option key={g.title} value={g.title}>
+                  {g.title}
+                </option>
+              ))}
+            </select>
+          </div>
+          <div
+            className="form-group"
+            style={{
+              marginBottom: 0,
+              flexDirection: "row",
+              alignItems: "center",
+              paddingBottom: "0.5rem",
+            }}
           >
-            {games.map((g) => (
-              <option key={g.title} value={g.title}>
-                {g.title}
-              </option>
-            ))}
-          </select>
-          <label>
             <input
               type="checkbox"
               checked={wouldPlay}
               onChange={(e) => setWouldPlay(e.target.checked)}
+              id="wouldPlay"
             />
-            Would Play
-          </label>
-          <button onClick={handleAddOpinion}>Add</button>
+            <label
+              htmlFor="wouldPlay"
+              style={{ marginBottom: 0, cursor: "pointer" }}
+            >
+              Would Play
+            </label>
+          </div>
+          <button onClick={handleAddOpinion} style={{ marginBottom: "2px" }}>
+            Add
+          </button>
         </div>
       </div>
     </div>

frontend/src/PersonList.tsx

@@ -7,23 +7,18 @@ interface Props {
 
 export const PersonList = ({ people }: Props) => {
   return (
-    <div>
+    <div className="grid-container">
       {people.map((person, index) => (
-        <div
-          key={index}
-          style={{
-            marginBottom: "1rem",
-            padding: "1rem",
-            border: "1px solid #ccc",
-            borderRadius: "8px",
-          }}
-        >
+        <div key={index} className="list-item">
           <h3>
             <Link to={`/person/${person.name}`}>{person.name}</Link>
           </h3>
           <ul>
             {person.opinion.map((op, i) => (
-              <li key={i}>
+              <li
+                key={i}
+                style={{ color: op.wouldPlay ? "#4caf50" : "#f44336" }}
+              >
                 {op.title} - {op.wouldPlay ? "Would Play" : "Would Not Play"}
               </li>
             ))}

frontend/src/index.css

@@ -1,11 +1,20 @@
 :root {
-  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
+  --primary-bg: #23283d;
+  --secondary-bg: #1e2233;
+  --secondary-alt-bg: #191f2e;
+  --tertiary-bg: #101320;
+  --accent-color: #096dc0;
+  --text-color: #ffffff;
+  --text-muted: #a0a0a0;
+  --border-color: #2a3045;
+
+  font-family: 'Inter', system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.6;
   font-weight: 400;
 
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
+  color-scheme: dark;
+  color: var(--text-color);
+  background-color: var(--primary-bg);
 
   font-synthesis: none;
   text-rendering: optimizeLegibility;
@@ -13,26 +22,29 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
 body {
   margin: 0;
   display: flex;
   place-items: center;
   min-width: 320px;
   min-height: 100vh;
+  background-color: var(--primary-bg);
 }
 
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
+h1, h2, h3, h4, h5, h6 {
+  color: var(--text-color);
+  margin-top: 0;
+}
+
+a {
+  font-weight: 500;
+  color: var(--accent-color);
+  text-decoration: inherit;
+  transition: color 0.2s;
+}
+
+a:hover {
+  color: #4da3ff;
 }
 
 button {
@@ -42,27 +54,41 @@ button {
   font-size: 1em;
   font-weight: 500;
   font-family: inherit;
-  background-color: #1a1a1a;
+  background-color: var(--accent-color);
+  color: white;
   cursor: pointer;
-  transition: border-color 0.25s;
+  transition: background-color 0.25s, transform 0.1s;
 }
+
 button:hover {
-  border-color: #646cff;
+  background-color: #0b7dda;
 }
+
+button:active {
+  transform: scale(0.98);
+}
+
 button:focus,
 button:focus-visible {
   outline: 4px auto -webkit-focus-ring-color;
 }
 
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
+input, select {
+  background-color: var(--secondary-alt-bg);
+  border: 1px solid var(--border-color);
+  color: var(--text-color);
+  padding: 0.6em;
+  border-radius: 6px;
+  font-size: 1em;
+  font-family: inherit;
+}
+
+input:focus, select:focus {
+  outline: 2px solid var(--accent-color);
+  border-color: transparent;
+}
+
+ul {
+  list-style: none;
+  padding: 0;
 }

state.json

@@ -17,7 +17,7 @@
         "opinion": [
           {
             "title": "Naramo Nuclear Plant V2",
-            "would_play": true
+            "would_play": false
           },
           {
             "title": "Test2",