Merge pull request #169 from pathirny/develop

Develop

harvesthub/app/globals.css

@@ -670,17 +670,26 @@ hr {
 .fc-button.fc-button-primary {
   background: var(--light-green-color);
   background-image: none;
-  height: 15vw;
+  height: 10vw;
   width: 15vw;
+  border-color: var(--light-green-color);
 }
 
 .fc-day {
   background-color: var(--light-green-color);
   border: 3vw solid var(--dark-green-color);
+  border-radius: 1vw;
+  color: var(--dark-green-color);
+}
+
+.fc-daygrid-day-frame{
+  border-radius: 1vw;
+
 }
 
 .fc-day-sun,
 .fc-day-sat {
+
   background-color: var(--brown-color);
   border: 1vw solid var(--dark-green-color);
 }
@@ -719,6 +728,15 @@ hr {
   background-color: var(--light-green-color);
 }
 
+.fc-button-group {
+gap: 1vw
+}
+
+.fc-direction-ltr{
+  border: none;
+  border-radius: 2vw;
+}
+
 #delete-event-button {
   z-index: 5;
   margin: auto;
@@ -1243,22 +1261,22 @@ hr {
 
 /* calendar list view */
 
-#calendar-list-container {
+#calendar-list-container{
   display: flex;
   flex-direction: row;
   justify-content: space-evenly;
   gap: 3vw;
   color: var(--white-cream-color);
 }
 
-.calendar-list {
+.calendar-list{
   display: flex;
   flex-direction: column;
   gap: 3vw;
   text-align: center;
 }
 
-.calendar-list-item {
+.calendar-list-item{
   color: var(--dark-green-color);
   border-radius: 3vw;
   padding: 2vw;
@@ -1270,25 +1288,101 @@ hr {
   flex-direction: column;
 }
 
-.calendar-list-itme-container {
+.calendar-list-itme-container{
   display: flex;
   flex-direction: row;
-  gap: 1vw;
+  gap: 1vw
 }
-.calendar-list-item p {
+.calendar-list-item p{
   margin: 0;
 }
 
-.delete-list-item {
+.delete-list-item{
+ color: var(--dark-green-color);
+ background-color: var(--white-cream-color);
+ height: 100%;
+ margin: 0;
+ width: 10vw;
+ border-radius: 3vw;
+}
+
+.calendar-event-container button{
+  color: var(--orange-color);
+  font-weight: 700;
+}
+
+#myGarden-introduction{
+  background-color: var(--white-cream-color);
   color: var(--dark-green-color);
+  padding: 0 3vw 0 3vw;
+  text-align: center;
+  margin: 0;
+  padding-top: 4vw;
+  padding-bottom: 4vw;
+  border: none
+}
+
+#myGarden-introduction h3{
+margin: 0;
+}
+
+#view-options-container{
+  display: flex;
+  flex-direction: row;
+  justify-content: start;
+  height: fit-content;
+  align-items: center;
   background-color: var(--white-cream-color);
-  height: 100%;
+  width: 100vw;
+  border: none;
+  margin-left: -5vw;
+  margin-right: -5vw
+}
+
+#view-options-container button{
   margin: 0;
-  width: 10vw;
-  border-radius: 3vw;
+  border-radius: 0;
+border: none;
+  border-top-right-radius: 2vw;
+  border-top-left-radius: 2vw;
+  background-color: #47594e;
+  border-bottom: none;
+  color: var(--white-cream-color);
+  width: 40vw;
 }
 
-.calendar-event-container button {
-  color: var(--orange-color);
-  font-weight: 700;
+
+
+.key-color{
+  height: 7vw;
+  width: 7vw;
+  border-radius: 50%;
+  background-color: var(--dark-green-color);
+  border: 1px solid var(--dark-green-color)
 }
+
+
+
+#key-colors-container{
+  position: absolute;
+  bottom: 0;
+  height: 10vw;
+  width: fit-content;
+  display: flex;
+  flex-direction: row;
+  gap: 1vw;
+  padding: 5vw;
+  align-items: center;
+  justify-content: center;
+  z-index: 10000;
+}
+
+.harvest-item{
+color: var(--white-cream-color);
+background-color: var(--dark-green-color);
+border: 1px solid #f3ebe4;
+}
+
+.calendar-list button{
+
+}

harvesthub/app/my-garden/page.tsx

@@ -1,53 +1,33 @@
 "use client";
-// importing dependency's
+// importing dependency's 
 import Header from "@/components/Header";
 import FullCalendar from "../../components/calendar.jsx";
 import { Flex, Button } from "@chakra-ui/react";
 import Link from "next/link.js";
 import useCheckSignedIn from "@/components/hooks/useCheckSignedIn.js";
-import BackButton from "@/components/BackButton";
+
 // function to use the imported dependency's
 export default function Home() {
   // rendering the components
 
-  const [signedIn] = useCheckSignedIn();
-  console.log(signedIn);
+  const [signedIn] = useCheckSignedIn()
+  console.log(signedIn)
 
   return (
     <>
       <Header title="My Garden" />
-      {signedIn ? (
-        <>
-          {" "}
-          <div id="calendar-container">
-            <FullCalendar initialView="dayGridMonth" />
-
-            {/* <Flex
-          width="100vw"
-          justifyContent="center"
-          position="fixed"
-          bottom="-10px"
-        >
-        </Flex> */}
-          </div>
-        </>
-      ) : (
-        <>
-          <div className="calendar-event-background "></div>
-          <div className="calendar-event-container">
-            <h3 style={{ margin: "0" }}>
-              You need to have an account to use this feature.
-            </h3>{" "}
-            <br></br> <br></br>{" "}
-            <Link href="./login">
-              {" "}
-              <button style={{ margin: "0" }}>
-                Click to log in or sign up
-              </button>
-            </Link>
-          </div>
-        </>
-      )}
+      <div id="myGarden-introduction">
+    <h3>Click on days to track what you've planted and when to harvest!</h3>
+    <div style={{display: "flex", flexDirection: "row", justifyContent: "center", alignItems: "center", gap: "2vw"}}>
+    <p>Plant: </p><div className="key-color" style={{backgroundColor: "var(--white-cream-color)"}}></div><p> Harvest:</p><div className="key-color" ></div></div>
+  </div>
+      {signedIn ? 
+     <> <div id="calendar-container">
+        <FullCalendar initialView="dayGridMonth" />
+      </div>
+          <Link href="/">
+            <Button className="addButton">Back</Button>
+          </Link></> : <><div className="calendar-event-background "></div><div className="calendar-event-container" ><h3 style={{margin: "0"}}>You need to have an account to use this feature.</h3> <br></br>  <br></br> <Link href="./login" > <button style={{margin: "0"}}>Click to log in or sign up</button></Link></div></>}
     </>
   );
 }