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

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>