Style Foods page

client/src/App.css

@@ -55,14 +55,22 @@ h4 {
   font-weight: normal;
 }
 
+.wrapper {
+  min-height: 100vh;
+  min-width: 100vw;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
 .text-container {
   z-index: 10;
   color: white;
   text-align: center;
-  min-height: 100vh;
+  min-height: 80vh;
   display: flex;
   flex-direction: column;
-  justify-content: space-around;
+  justify-content: space-between;
   align-items: center;
 }
 

client/src/components/ContentSection.jsx

@@ -0,0 +1,19 @@
+import React from "react";
+
+function ContentSection({ isVisible, children }) {
+  const sectionStyle = {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    visibility: isVisible ? "visible" : "hidden",
+    opacity: isVisible ? 1 : 0,
+    transition: "opacity 0.3s",
+    transitionDelay: isVisible ? "0s" : "0.3s",
+  };
+
+  return <div style={sectionStyle}>{children}</div>;
+}
+
+export default ContentSection;

client/src/components/FoodButton.jsx

@@ -4,6 +4,8 @@ function FoodButton({
   name,
   onSelectFood,
   onDeselectFood,
+  onMouseEnter,
+  onMouseLeave,
   isSelected,
   selectLimitReached,
 }) {
@@ -31,7 +33,7 @@ function FoodButton({
     display: "flex",
     justifyContent: "center",
     alignItems: "center",
-    border: isModerator // Use isModerator to determine border style
+    border: isModerator
       ? "4px solid white"
       : isSelected
       ? "2px solid white"
@@ -52,7 +54,13 @@ function FoodButton({
   };
 
   return (
-    <div className="food-button" style={buttonStyle} onClick={handleClickFood}>
+    <div
+      className="food-button"
+      onMouseEnter={() => onMouseEnter(name)}
+      onMouseLeave={onMouseLeave}
+      style={buttonStyle}
+      onClick={handleClickFood}
+    >
       <img src={imageUrl} alt={name} style={imageStyle} />
     </div>
   );

client/src/components/FoodInfo.jsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+function FoodInfo() {
+  return <div></div>;
+}
+
+export default FoodInfo;

client/src/components/Foods.jsx

@@ -1,69 +1,97 @@
-// Import statements are consolidated at the top.
 import React, { useState } from "react";
+import ContentSection from "./ContentSection";
 import FoodButton from "./FoodButton";
+import FoodInfo from "./FoodInfo";
 
 function Foods({ topic, onContinueForward }) {
-  // State and variables declaration section.
   const [selectedFoods, setSelectedFoods] = useState([]);
+  const [currentFood, setCurrentFood] = useState("");
+
   const moderator = "water";
   const foods = ["banana", "bratwurst", "lollipop", "meat", "potato", "tomato"];
   const minFoods = 2;
   const maxFoods = 5;
-  // Function to handle proceeding forward if the conditions are met.
+
   function continueForward() {
     if (selectedFoods.length >= minFoods && selectedFoods.length <= maxFoods) {
       onContinueForward({ foods: selectedFoods });
     }
   }
 
-  // Function to handle the selection of a food item.
+  function handleOnMouseEnter(foodName) {
+    setCurrentFood(foodName);
+  }
+
+  function handleOnMouseLeave() {
+    setCurrentFood("");
+  }
+
   function selectFood(foodName) {
     if (selectedFoods.length < maxFoods && !selectedFoods.includes(foodName)) {
       setSelectedFoods((prevFoods) => [...prevFoods, foodName]);
     }
   }
 
-  // Function to handle the deselection of a food item.
   function deselectFood(foodName) {
     setSelectedFoods((prevFoods) =>
       prevFoods.filter((food) => food !== foodName)
     );
   }
 
-  // JSX structure of the component.
   return (
-    <div className="text-container">
-      <div>
-        <h1>THE FOODS:</h1>
-        <h4>
-          Please select 2-5 foods
-          <br /> to participate in the discussion about:
-        </h4>
-        <h4>{topic}</h4>
-      </div>
-      <div className="food-buttons">
-        <FoodButton name={moderator} />
-        {foods.map((food) => (
-          <FoodButton
-            key={food}
-            name={food}
-            onSelectFood={selectFood}
-            onDeselectFood={deselectFood}
-            isSelected={selectedFoods.includes(food)}
-            selectLimitReached={selectedFoods.length >= maxFoods}
-          />
-        ))}
+    <div className="wrapper">
+      <div className="text-container">
+        <div>
+          <h1>THE FOODS:</h1>
+          <div style={{ position: "relative" }}>
+            <ContentSection isVisible={currentFood === ""}>
+              <h4>
+                Please select 2-5 foods
+                <br /> to participate in the discussion about:
+              </h4>
+              <h4>{topic}</h4>
+            </ContentSection>
+            <ContentSection isVisible={currentFood !== ""}>
+              <FoodInfo food={currentFood} />
+            </ContentSection>
+          </div>
+        </div>
+        <div>
+          <div className="food-buttons">
+            <FoodButton
+              name={moderator}
+              onMouseEnter={handleOnMouseEnter}
+              onMouseLeave={handleOnMouseLeave}
+            />
+            {foods.map((food) => (
+              <FoodButton
+                key={food}
+                name={food}
+                onSelectFood={selectFood}
+                onDeselectFood={deselectFood}
+                onMouseEnter={handleOnMouseEnter}
+                onMouseLeave={handleOnMouseLeave}
+                isSelected={selectedFoods.includes(food)}
+                selectLimitReached={selectedFoods.length >= maxFoods}
+              />
+            ))}
+          </div>
+          <h4 className={`${currentFood === "" ? "hidden" : ""}`}>
+            please select 2-5 foods for the discussion
+          </h4>
+          <button
+            className={`${
+              selectedFoods.length >= minFoods &&
+              selectedFoods.length <= maxFoods
+                ? ""
+                : "hidden"
+            } outline-button`}
+            onClick={continueForward}
+          >
+            Start
+          </button>
+        </div>
       </div>
-      <button
-        className={`${
-          selectedFoods.length >= minFoods && selectedFoods.length <= maxFoods
-            ? ""
-            : "hidden"
-        } outline-button`}
-        onClick={continueForward}
-      >
-        Start
-      </button>
     </div>
   );
 }

client/src/components/Landing.jsx

@@ -3,12 +3,14 @@ import NameInput from "./NameInput";
 
 function Welcome({ onContinueForward }) {
   return (
-    <div className="text-container">
-      <div>
-        <h2>welcome to</h2>
-        <h1>COUNCIL OF FOODS</h1>
+    <div className="wrapper">
+      <div className="text-container">
+        <div>
+          <h2>welcome to</h2>
+          <h1>COUNCIL OF FOODS</h1>
+        </div>
+        <NameInput onContinueForward={onContinueForward} />
       </div>
-      <NameInput onContinueForward={onContinueForward} />
     </div>
   );
 }

client/src/components/Topics.jsx

@@ -54,54 +54,56 @@ function Topics(props) {
   }
 
   return (
-    <div className="text-container">
-      <h1>THE ISSUE:</h1>
-      <div
-        style={{
-          display: "flex",
-          flexDirection: "column",
-          justifyContent: "start",
-        }}
-      >
-        {topics.map((topic, index) => (
+    <div className="wrapper">
+      <div className="text-container">
+        <h1>THE ISSUE:</h1>
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "start",
+          }}
+        >
+          {topics.map((topic, index) => (
+            <button
+              key={index}
+              className="outline-button wide-button"
+              onClick={() => selectTopic(topic)}
+              style={topicButtonStyle(topic)}
+            >
+              {topic}
+            </button>
+          ))}
           <button
-            key={index}
             className="outline-button wide-button"
-            onClick={() => selectTopic(topic)}
-            style={topicButtonStyle(topic)}
+            onClick={() => selectTopic("choose your own")}
+            style={{
+              ...topicButtonStyle("choose your own"),
+              opacity: selectedTopic === "choose your own" ? "1" : "0.5",
+            }}
           >
-            {topic}
+            choose your own
           </button>
-        ))}
+          <h4>please select an issue for the discussion</h4>
+        </div>
+        <textarea
+          ref={topicTextareaRef}
+          className={`${
+            selectedTopic === "choose your own" ? "" : "hidden"
+          } text-input`}
+          rows="2"
+          cols="30"
+          value={customTopic}
+          placeholder="your topic"
+          onChange={handleInputTopic}
+        />
         <button
-          className="outline-button wide-button"
-          onClick={() => selectTopic("choose your own")}
-          style={{
-            ...topicButtonStyle("choose your own"),
-            opacity: selectedTopic === "choose your own" ? "1" : "0.5",
-          }}
+          className={`${shouldShowNextButton ? "" : "hidden"} outline-button`}
+          onClick={onContinueForward}
         >
-          choose your own
+          Next
         </button>
-        <h4>please select an issue for the discussion</h4>
       </div>
-      <textarea
-        ref={topicTextareaRef}
-        className={`${
-          selectedTopic === "choose your own" ? "" : "hidden"
-        } text-input`}
-        rows="2"
-        cols="30"
-        value={customTopic}
-        placeholder="your topic"
-        onChange={handleInputTopic}
-      />
-      <button
-        className={`${shouldShowNextButton ? "" : "hidden"} outline-button`}
-        onClick={onContinueForward}
-      >
-        Next
-      </button>
     </div>
   );
 }

client/src/components/Welcome.jsx

@@ -1,29 +1,34 @@
 import React from "react";
 function Welcome({ name, onContinueForward }) {
   return (
-    <div className="text-container">
-      <h4>Dear {name}</h4>
-      <br />
-      <h4>
-        Welcome to the Council of Foods! Here you can listen to foods
-        <br /> discussing the broken food system, and even take part in the
-        <br /> conversation. You will hear, from the foods themselves, what
-        <br /> their eco-social influence and guiding ethical principles are and
-        <br /> discuss together what actions need to be taken to form a locally
-        <br /> and globally sustainable food system.
-      </h4>
-      <h4>
-        Each food has a different background the mass produced, the
-        <br /> locally grown, the genetically modified, the processed, the fair
-        <br /> trade, the affordable and the biological. All the foods are
-        <br /> assigned an AI language model, each prompted on different
-        <br /> knowledges and ethical guidelines. Therefore, the members have
-        <br /> divergent ethical positions and agendas, voicing a variety of
-        <br /> perspectives in the Council of Foods.
-      </h4>
-      <button className="outline-button" onClick={() => onContinueForward()}>
-        Next
-      </button>
+    <div className="wrapper">
+      <div className="text-container">
+        <h4>Dear {name}</h4>
+        <br />
+        <h4>
+          Welcome to the Council of Foods! Here you can listen to foods
+          <br /> discussing the broken food system, and even take part in the
+          <br /> conversation. You will hear, from the foods themselves, what
+          <br /> their eco-social influence and guiding ethical principles are
+          and
+          <br /> discuss together what actions need to be taken to form a
+          locally
+          <br /> and globally sustainable food system.
+        </h4>
+        <h4>
+          Each food has a different background the mass produced, the
+          <br /> locally grown, the genetically modified, the processed, the
+          fair
+          <br /> trade, the affordable and the biological. All the foods are
+          <br /> assigned an AI language model, each prompted on different
+          <br /> knowledges and ethical guidelines. Therefore, the members have
+          <br /> divergent ethical positions and agendas, voicing a variety of
+          <br /> perspectives in the Council of Foods.
+        </h4>
+        <button className="outline-button" onClick={() => onContinueForward()}>
+          Next
+        </button>
+      </div>
     </div>
   );
 }