Style FoodButtons for Setup

client/src/App.css

@@ -86,12 +86,23 @@ h4 {
   display: flex;
 }
 
+.food-button {
+  margin-left: 5px;
+  margin-right: 5px;
+  background-color: black;
+  width: 75px;
+  height: 75px;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
 .food-button img {
-  width: 100px; /* Or any size you prefer */
-  height: 100px; /* Ensure this is the same as the width for a perfect circle */
-  border-radius: 50%; /* This makes the image round */
-  object-fit: cover; /* This ensures the image covers the area nicely */
-  cursor: pointer; /* Optional: Changes the cursor to indicate it's clickable */
+  width: 80%;
+  height: 80%;
+  object-fit: cover;
+  cursor: pointer;
 }
 
 @media (prefers-reduced-motion: no-preference) {

client/src/App.js

@@ -5,7 +5,7 @@ import Welcome from "./components/Welcome";
 import Setup from "./components/Setup";
 
 function App() {
-  const [currentView, setCurrentView] = useState("welcome"); // "welcome" or "setup"
+  const [currentView, setCurrentView] = useState("welcome");
 
   const backgroundStyle = {
     // backgroundImage: `url(${backgroundImage})`,

client/src/components/FoodButton.jsx

@@ -1,14 +1,47 @@
-import React from "react";
+import React, { useState } from "react";
 
 function FoodButton({ name }) {
+  const [isSelected, setIsSelected] = useState(false);
+
   const imageUrl = `/images/foods/${name}.png`;
 
+  function selectFood() {
+    console.log("Food selected!");
+    setIsSelected(!isSelected); // Toggle the isSelected state
+  }
+
+  const buttonStyle = {
+    marginLeft: "5px",
+    marginRight: "5px",
+    backgroundColor: "black",
+    width: "75px",
+    height: "75px",
+    borderRadius: "50%",
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+
+    border: isSelected ? "2px solid white" : "2px solid transparent", // Apply a white border if selected
+  };
+
+  const imageStyle = {
+    width: "80%",
+    height: "80%",
+    objectFit: "cover",
+    cursor: "pointer",
+    borderRadius: "50%",
+  };
+
   return (
-    <div className="food-button">
+    <div
+      className="food-button"
+      style={buttonStyle}
+    >
       <img
         src={imageUrl}
         alt={name}
-        style={{ borderRadius: "50%" }}
+        style={imageStyle}
+        onClick={selectFood}
       />
     </div>
   );