Merge pull request #8 from Nonhuman-Nonsense/Leo

Scaling 75%, some refactoring etc

.gitignore

@@ -1,6 +1,7 @@
 .env
 node_modules
 build
+.vscode
 
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 

Dockerfile

@@ -3,7 +3,7 @@ FROM node:lts-alpine as client-builder
 
 WORKDIR /usr/src/client
 COPY client/package*.json ./
-RUN npm ci --only=production
+RUN npm ci --only=production --no-audit
 COPY client/ .
 RUN npm run build
 

client/package.json

@@ -13,7 +13,8 @@
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
     "socket.io-client": "^4.7.5",
-    "web-vitals": "^2.1.4"
+    "web-vitals": "^2.1.4",
+    "@babel/plugin-transform-private-property-in-object": "^7.24.1"
   },
   "proxy": "http://localhost:3001",
   "scripts": {

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;
@@ -30,28 +31,35 @@ html,
 }
 
 h1 {
-  font-size: 80px;
-  margin: 8px;
+  font-size: 60px;
+  margin: 6px;
   font-weight: normal;
 }
 
 h2 {
-  font-size: 52px;
-  margin: 8px;
+  font-size: 39px;
+  margin: 6px;
   font-weight: normal;
 }
 
 h3 {
-  font-size: 34px;
-  margin-top: 18px;
-  margin-bottom: 18px;
+  font-size: 25px;
+  margin-top: 13px;
+  margin-bottom: 13px;
   font-weight: normal;
 }
 
 h4 {
-  font-size: 24px;
-  margin-top: 18px;
-  margin-bottom: 18px;
+  font-size: 18px;
+  margin-top: 13px;
+  margin-bottom: 13px;
+  font-weight: normal;
+}
+
+p {
+  font-size: 18px;
+  margin-top: 13px;
+  margin-bottom: 13px;
   font-weight: normal;
 }
 
@@ -65,7 +73,6 @@ h4 {
 
 .text-container {
   z-index: 10;
-  color: white;
   text-align: center;
   height: 80%;
   display: flex;
@@ -90,50 +97,45 @@ h4 {
   align-items: center;
 }
 
-.text-input {
+input[type=text], textarea {
   background-color: white;
-  border-radius: 12px;
+  border-radius: 9px;
   border: none;
-  padding-left: 20px;
-  padding-right: 20px;
-  padding-top: 10px;
-  padding-bottom: 10px;
-  font-size: 25px;
+  padding-left: 15px;
+  padding-right: 15px;
+  padding-top: 7px;
+  padding-bottom: 7px;
+  font-size: 19px;
   font-family: Arial, Helvetica, sans-serif;
   line-height: 1.5;
 }
 
-.name-input {
-  width: 400px;
-  height: 30px;
-  padding-right: 40px; /* Make room for the arrow */
-}
-
 .input-arrow {
   position: absolute;
   right: 10px;
   color: black; /* Adjust arrow color as needed */
 }
 
-.food-buttons {
-  display: flex;
-}
-
-.outline-button {
+button {
   font-family: "Tinos", serif;
   font-style: normal;
-  font-size: 34px;
+  font-size: 25px;
   font-weight: normal;
   color: white;
   background-color: transparent;
-  border: 2px solid white;
-  border-radius: 25px;
-  padding: 0px 22px 0px 22px;
+  border: 1.5px solid white;
+  border-radius: 19px;
+  padding: 0px 16px 0px 16px;
   cursor: pointer;
 }
 
+button:hover {
+  background-color: white;
+  color: rgba(0, 0, 0, 1);
+}
+
 .wide-button {
-  padding: 8px 100px 8px 100px !important;
+  padding: 6px 75px 6px 75px;
 }
 
 @media (prefers-reduced-motion: no-preference) {

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() {
           >
             [email protected]
           </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}