feat: Add 'Would Play' and 'Would Not Play' buttons to game list items and update button styling.

frontend/src/GameList.tsx

@@ -5,6 +5,7 @@ import {
   GameList as GameListProto,
   Person as PersonProto,
   Opinion,
+  AddOpinionRequest,
 } from "../items";
 import { Link } from "react-router-dom";
 import { apiFetch, get_auth_status } from "./api";
@@ -457,7 +458,34 @@ export function GameList() {
         <ul className="grid-container">
           {games.map((game) => {
             const opinion = opinions.find((op) => op.title === game.title);
+            function handleOpinion(title: string, wouldPlay: boolean): void {
+              apiFetch(`/api/opinion`, {
+                method: "POST",
+                headers: {
+                  "Content-Type": "application/octet-stream",
+                },
+                body: AddOpinionRequest.encode(
+                  AddOpinionRequest.create({
+                    gameTitle: title,
+                    wouldPlay,
+                  })
+                ).finish(),
+              })
+                .then((res) => res.arrayBuffer())
+                .then((resBuffer) => {
+                  const response = PersonProto.decode(
+                    new Uint8Array(resBuffer)
+                  );
+
+                  setOpinions(response.opinion);
+                })
+                .catch((err) => {
+                  console.error(err);
+                });
+            }
+
             return (
+              <div>
                 <Link
                   to={`/game/${encodeURIComponent(game.title)}`}
                   key={game.title}
@@ -478,6 +506,34 @@ export function GameList() {
                   <strong>{game.title}</strong>
                   <GameImage game={game.title} />
                 </Link>
+                <div
+                  style={{
+                    display: "flex",
+                    gap: "1rem",
+                    marginTop: "1rem",
+                    width: "100%",
+                  }}
+                >
+                  <button
+                    onClick={() => handleOpinion(game.title, true)}
+                    style={{
+                      width: "50%",
+                      borderColor: "#4caf50",
+                    }}
+                  >
+                    Would Play
+                  </button>
+                  <button
+                    onClick={() => handleOpinion(game.title, false)}
+                    style={{
+                      width: "50%",
+                      borderColor: "#f44336",
+                    }}
+                  >
+                    Would Not Play
+                  </button>
+                </div>
+              </div>
             );
           })}
         </ul>

frontend/src/PersonDetails.tsx

@@ -167,7 +167,13 @@ export const PersonDetails = () => {
                 Would Play
               </label>
             </div>
-            <button onClick={handleAddOpinion} style={{ marginBottom: "2px" }}>
+            <button
+              onClick={handleAddOpinion}
+              style={{
+                marginBottom: "2px",
+                backgroundColor: "var(--accent-color)",
+              }}
+            >
               Add
             </button>
           </div>

frontend/src/index.css

@@ -54,14 +54,14 @@ button {
   font-size: 1em;
   font-weight: 500;
   font-family: inherit;
-  background-color: var(--accent-color);
+  background-color: var(--secondary-bg);
   color: white;
   cursor: pointer;
   transition: background-color 0.25s, transform 0.1s;
 }
 
 button:hover {
-  background-color: #0b7dda;
+  background-color: var(--tertiary-bg);
 }
 
 button:active {