clicking outside about etc. closes it + some refactor

client/src/App.css

@@ -15,6 +15,7 @@ html,
   font-weight: 400;
   font-style: normal;
   text-align: center;
+  color: white;
   position: relative;
   height: 100vh;
   width: 100vw;
@@ -49,6 +50,13 @@ h3 {
 }
 
 h4 {
+  font-size: 28px;
+  margin-top: 18px;
+  margin-bottom: 18px;
+  font-weight: normal;
+}
+
+p {
   font-size: 24px;
   margin-top: 18px;
   margin-bottom: 18px;
@@ -65,7 +73,6 @@ h4 {
 
 .text-container {
   z-index: 10;
-  color: white;
   text-align: center;
   height: 80%;
   display: flex;

client/src/components/About.jsx

@@ -2,9 +2,8 @@ import React from "react";
 
 function About() {
   return (
-    <div className="wrapper">
-      <div className="text-container" style={{ justifyContent: "center" }}>
-        <h4>
+      <div>
+        <p>
           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
@@ -13,8 +12,8 @@ function About() {
           <br /> discuss together what actions need to be taken to form a
           locally
           <br /> and globally sustainable food system.
-        </h4>
-        <h4>
+        </p>
+        <p>
           Each food has different backgrounds, the mass produced, the
           <br /> locally grown, the genetically modified, the processed, the
           fair
@@ -23,8 +22,8 @@ function About() {
           <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>
-        <h4>
+        </p>
+        <p>
           Some more information about the AI LLM, the idea behind the
           <br /> project, the process of talking with food system experts and
           how
@@ -37,9 +36,8 @@ function About() {
           <br /> their opinions and perspectives got turned into prompts for
           food
           <br /> AIs.
-        </h4>
+        </p>
       </div>
-    </div>
   );
 }
 

client/src/components/Contact.jsx

@@ -2,18 +2,14 @@ import React from "react";
 
 function Contact() {
   return (
-    <div className="wrapper">
-      <div
-        className="text-container"
-        style={{ justifyContent: "center" }}
-      >
-        <h4>
+      <div>
+        <p>
           The project is an initiative by art & design
           <br /> collective Nonhuman Nonsense developed in
           <br /> collaboration with Studio Other Spaces,
           <br /> In4Art, Elliot, Albin and others.
-        </h4>
-        <h4>
+        </p>
+        <p>
           <a
             className="link"
             href="https://www.instagram.com/nonhuman-nonsense/"
@@ -34,9 +30,8 @@ function Contact() {
           >
             hello@nonhuman-nonsense.com
           </a>
-        </h4>
+        </p>
       </div>
-    </div>
   );
 }
 

client/src/components/Council.jsx

@@ -3,11 +3,7 @@ import io from "socket.io-client";
 import globalOptions from "../global-options.json";
 import FoodItem from "./FoodItem";
 import Overlay from "./Overlay";
-import About from "./About";
-import Topics from "./Topics";
-import Contact from "./Contact";
-import Share from "./Share";
-import ResetWarning from "./ResetWarning";
+import CouncilOverlays from "./CouncilOverlays";
 import Navbar from "./Navbar";
 import Output from "./Output";
 import useWindowSize from "../hooks/useWindowSize";
@@ -79,38 +75,9 @@ function Council({ options }) {
     setActiveOverlay("");
   }
 
-  // Conditional rendering of overlay content based on activeOverlay state
-  const renderOverlayContent = () => {
-    switch (activeOverlay) {
-      case "about":
-        return <About />;
-      case "settings":
-        return (
-          <Topics
-            currentTopic={options.topic}
-            onReset={options.onReset}
-            onCancel={removeOverlay}
-          />
-        );
-      case "contact":
-        return <Contact />;
-      case "share":
-        return <Share />;
-      case "reset":
-        return (
-          <ResetWarning
-            onReset={() => options.onReset()}
-            onCancel={removeOverlay}
-          />
-        );
-      default:
-        return null; // No overlay content if no section is active
-    }
-  };
-
   return (
     <div style={{ height: "100%", width: "100%" }}>
-      <div className="wrapper">
+      <div className="council wrapper">
         {activeOverlay === "" && (
           <div
             className="text-container"
@@ -134,7 +101,7 @@ function Council({ options }) {
           ))}
         </div>
         <Overlay isActive={activeOverlay !== ""}>
-          {renderOverlayContent()}
+          <CouncilOverlays activeOverlay={activeOverlay} options={options} removeOverlay={removeOverlay} />
         </Overlay>
         <Navbar
           topic={options.topic}

client/src/components/CouncilOverlays.jsx

@@ -0,0 +1,78 @@
+import React from "react";
+import About from "./About";
+import Topics from "./Topics";
+import Contact from "./Contact";
+import Share from "./Share";
+import ResetWarning from "./ResetWarning";
+
+function CouncilOverlays({ activeOverlay, options, removeOverlay }) {
+
+  const closeWrapperStyle = {
+    height: "100%",
+    width: "100%",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+  };
+
+  const closeInnerStyle = {
+    height: "calc(100% - 110px)",
+    width: "100%",
+    display: "flex",
+    marginTop: "110px",
+  };
+
+  const clickerStyle = {
+    flex: 1,
+  };
+
+  const middleColumn = {
+    display: "flex",
+    flexDirection: "column",
+  };
+
+  // Conditional rendering of overlay content based on activeOverlay state
+  const renderOverlayContent = () => {
+    switch (activeOverlay) {
+      case "about":
+        return <About />;
+      case "settings":
+        return (
+          <Topics
+            currentTopic={options.topic}
+            onReset={options.onReset}
+            onCancel={removeOverlay}
+          />
+        );
+      case "contact":
+        return <Contact />;
+      case "share":
+        return <Share />;
+      case "reset":
+        return (
+          <ResetWarning
+            onReset={() => options.onReset()}
+            onCancel={removeOverlay}
+          />
+        );
+      default:
+        return null; // No overlay content if no section is active
+      };
+    };
+
+  return (
+    <div style={closeWrapperStyle}>
+      <div style={closeInnerStyle}>
+        <div style={clickerStyle} onClick={removeOverlay} />
+        <div style={middleColumn}>
+          <div style={clickerStyle} onClick={removeOverlay}/>
+          {renderOverlayContent()}
+          <div style={clickerStyle} onClick={removeOverlay}/>
+        </div>
+        <div style={clickerStyle} onClick={removeOverlay}/>
+      </div>
+    </div>
+  );
+}
+
+export default CouncilOverlays;

client/src/components/Landing.jsx

@@ -2,16 +2,22 @@ import React from "react";
 import HumanNameInput from "./HumanNameInput";
 
 function Welcome({ onContinueForward }) {
+
+  const welcomeStyle = {
+    display: "flex",
+    flexDirection: "column",
+    height: "80%",
+    justifyContent: "space-between",
+  };
+
   return (
-    <div className="wrapper">
-      <div className="text-container">
+      <div style={welcomeStyle}>
         <div>
           <h2>welcome to</h2>
           <h1>COUNCIL OF FOODS</h1>
         </div>
         <HumanNameInput onContinueForward={onContinueForward} />
       </div>
-    </div>
   );
 }
 

client/src/components/Overlay.jsx

@@ -3,24 +3,25 @@ import React, { useState, useEffect } from "react";
 function Overlay({ isActive, children }) {
   const [overlayStyle, setOverlayStyle] = useState({});
 
+  const sharedOverlayStyle ={
+    position: "fixed",
+    top: 0,
+    left: 0,
+    height: "100%",
+    width: "100%",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+  };
+
   useEffect(() => {
     if (isActive) {
-      setOverlayStyle({
-        position: "fixed",
-        top: 0,
-        left: 0,
-        height: "100%",
-        width: "100%",
+      setOverlayStyle({...sharedOverlayStyle,
         backgroundColor: "rgba(0, 0, 0, 0.7)",
         pointerEvents: "auto",
       });
     } else {
-      setOverlayStyle({
-        position: "fixed",
-        top: 0,
-        left: 0,
-        height: "100%",
-        width: "100%",
+      setOverlayStyle({...sharedOverlayStyle,
         pointerEvents: "none",
       });
     }

client/src/components/ResetWarning.jsx

@@ -3,8 +3,7 @@ import { capitalizeFirstLetter } from "../utils";
 
 function ResetWarning({ message, onReset, onCancel }) {
   return (
-    <div className="wrapper">
-      <div className="text-container" style={{ justifyContent: "center" }}>
+      <div>
         <h4>
           {message
             ? capitalizeFirstLetter(message)
@@ -26,7 +25,6 @@ function ResetWarning({ message, onReset, onCancel }) {
           >
             Cancel
           </button>
-        </div>
       </div>
     </div>
   );

client/src/components/Share.jsx

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

client/src/components/Topics.jsx

@@ -98,7 +98,6 @@ function Topics(props) {
           onCancel={props.onCancel}
         />
       ) : (
-        <div className="wrapper">
           <div className="text-container">
             <h1>THE ISSUE:</h1>
             <div
@@ -140,7 +139,6 @@ function Topics(props) {
               Next
             </button>
           </div>
-        </div>
       )}
     </>
   );