Merge pull request #180 from pathirny/develop

Develop
pathirny · Dec 21, 2023 · 481d6d6 · 481d6d6
2 parents e6ab807 + 2063741
commit 481d6d6
Show file tree

Hide file tree

Showing 3 changed files with 111 additions and 74 deletions.
diff --git a/harvesthub/app/globals.css b/harvesthub/app/globals.css
@@ -460,7 +460,9 @@ hr {
       transparent 100%
     );
   }
-
+  .flexContainer {
+    top: 50vw;
+  }
   .addButton {
     margin-top: 3rem;
   }
@@ -835,6 +837,11 @@ hr {
   height: 25vw;
   opacity: 0.6;
 }
+.formButtonBox {
+  display: flex;
+  justify-content: space-around;
+  width: 80vw;
+}
 /* Media Queries */
 @media only screen and (min-width: 1000px) {
   #nav-body {
@@ -939,9 +946,10 @@ hr {
   }
 
   .flexContainer {
+    top: 20vw;
     max-width: 60vw;
     left: 20%;
-    border-radius: 0 0 25px 25px;
+    border-radius: 10px;
   }
 
   .input {
@@ -950,8 +958,8 @@ hr {
 
   .formButtonBox {
     display: flex;
-    justify-content: space-around;
-    width: 60%;
+    justify-content: center;
+    align-items: center;
   }
   hr {
     width: 50vw;
@@ -1181,11 +1189,17 @@ hr {
     background-color: var(--brown-color);
     cursor: pointer;
   }
-
-  #home-button {
+  #user-button {
+    border-radius: 70%;
+    height: 9vw;
+    width: 10vw;
+  }
+  #home-button,
+  #user-button {
     transition: 0.7s;
   }
-  #home-button:hover {
+  #home-button:hover,
+  #user-button:hover {
     cursor: pointer;
     background-color: var(--brown-color);
   }

diff --git a/harvesthub/app/tips-and-tricks/page.tsx b/harvesthub/app/tips-and-tricks/page.tsx
@@ -28,6 +28,7 @@ export default function TipsnTricks() {
   const [description, setDescription] = useState("");
   const [image, setImage] = useState("");
   const [signedIn] = useCheckSignedIn();
+  const [addTipForm, setAddTipForm] = useState(false);
   //use supabase
   const supabase = createBrowserClient(
     process.env.NEXT_PUBLIC_SUPABASE_URL!,
@@ -114,70 +115,6 @@ export default function TipsnTricks() {
     <div>
       <Header title="Tips and Tricks" />
 
-      <Flex
-        position="absolute"
-        zIndex="2"
-        justifyContent="center"
-        bgColor="#47594e"
-        width="100%"
-        color="#f3ebe4"
-        className="flexContainer"
-      >
-        <FormControl
-          display={display}
-          flexDirection="column"
-          justifyContent="center"
-          alignItems="center"
-          className="forms"
-        >
-          <Input
-            placeholder="Title ✍"
-            width="90vw"
-            required
-            className="input"
-            value={title}
-            onChange={(event) => setTitle(event.target.value)}
-          />
-          <Input
-            placeholder="Description ✍"
-            width="90vw"
-            height="25vh"
-            className="input"
-            required
-            value={description}
-            onChange={(event) => setDescription(event.target.value)}
-          />
-          {/* <Input
-            placeholder="Image ✍"
-            width="90vw"
-            value={image}
-            onChange={(event) => setImage(event.target.value)}
-          /> */}
-          <hr />
-          <div className="formButtonBox">
-            <Button
-              type="submit"
-              border="solid 1px black"
-              className="formButton"
-              boxShadow="10px 9px 30px 1px rgba(0,0,0,0.75)"
-              onClick={(event) => {
-                addTip(event);
-                toggleForm();
-              }}
-            >
-              Submit
-            </Button>
-            <Button
-              onClick={toggleForm}
-              className="formButton"
-              border="solid 1px black"
-              boxShadow="10px 9px 30px 1px rgba(0,0,0,0.75)"
-            >
-              Cancel
-            </Button>
-          </div>
-        </FormControl>
-      </Flex>
       <SearchBar
         value={searchTerm}
         onChange={(e) => setSearchTerm(e.target.value)}
@@ -195,13 +132,99 @@ export default function TipsnTricks() {
           <Button className="addButton">Back</Button>
         </Link>
         {signedIn ? (
-          <Button className="addButton" onClick={toggleForm}>
+          <Button
+            className="addButton"
+            onClick={() => {
+              setAddTipForm(!addTipForm);
+            }}
+          >
             Add Tip +
           </Button>
         ) : (
           <></>
         )}
       </Flex>
+      {addTipForm ? (
+        <>
+          {" "}
+          <div
+            style={{
+              position: "fixed",
+              top: "0",
+              height: "100vh",
+              width: "100vw",
+              backgroundColor: "rgba(243, 235, 228, 0.8)",
+            }}
+          >
+            {" "}
+          </div>{" "}
+          <Flex
+            position="fixed"
+            zIndex="1000"
+            justifyContent="center"
+            alignContent="center"
+            bgColor="#47594e"
+            width="100%"
+            color="#f3ebe4"
+            className="flexContainer"
+          >
+            <FormControl
+              display="flex"
+              flexDirection="column"
+              justifyContent="center"
+              alignItems="center"
+              className="forms"
+            >
+              <Input
+                alignSelf="center"
+                justifySelf="center"
+                placeholder="Title ✍"
+                width="90vw"
+                required
+                className="input"
+                value={title}
+                onChange={(event) => setTitle(event.target.value)}
+              />
+              <Input
+                placeholder="Description ✍"
+                width="90vw"
+                height="25vh"
+                className="input"
+                required
+                value={description}
+                onChange={(event) => setDescription(event.target.value)}
+              />
+              <hr />
+              <div className="formButtonBox">
+                <Button
+                  type="submit"
+                  border="solid 1px black"
+                  className="formButton"
+                  boxShadow="10px 9px 30px 1px rgba(0,0,0,0.75)"
+                  onClick={(event) => {
+                    setAddTipForm(false);
+                    addTip(event);
+                  }}
+                >
+                  Submit
+                </Button>
+                <Button
+                  onClick={() => {
+                    setAddTipForm(false);
+                  }}
+                  className="formButton"
+                  border="solid 1px black"
+                  boxShadow="10px 9px 30px 1px rgba(0,0,0,0.75)"
+                >
+                  Cancel
+                </Button>
+              </div>
+            </FormControl>
+          </Flex>
+        </>
+      ) : (
+        <></>
+      )}
     </div>
   );
 }
diff --git a/harvesthub/app/veggies/[veggie]/page.tsx b/harvesthub/app/veggies/[veggie]/page.tsx
@@ -135,13 +135,13 @@ export default function Veggies({ params }: any) {
               <h2>Plant:</h2>
             </div>
             <div className="brown">
-              <h2>{vegHarv}</h2>
+              <h2>{vegPlant}</h2>
             </div>
             <div className="cream">
               <h2>Harvest:</h2>
             </div>
             <div className="brown">
-              <h2>{vegPlant}</h2>
+              <h2>{vegHarv}</h2>
             </div>
           </div>
         </div>