Merge pull request #173 from pathirny/develop

style fixes
pathirny · Dec 21, 2023 · e8e5153 · e8e5153
2 parents 0394137 + 10a3312
commit e8e5153
Show file tree

Hide file tree

Showing 4 changed files with 118 additions and 71 deletions.
diff --git a/harvesthub/app/favourites/page.jsx b/harvesthub/app/favourites/page.jsx
@@ -113,11 +113,13 @@ export default function Favourites() {
  ) : (
  <>
  <p className="favsMissing">You have not saved any favourites</p>
- <img
- className="sad-pumpkin"
- src="/assets/sadPumpkin.png"
- alt="sad pumpkin"
- ></img>
+ <div className="pumpkinContainer">
+ <img
+ className="sad-pumpkin"
+ src="/assets/sadPumpkin.png"
+ alt="sad pumpkin"
+ ></img>
+ </div>
  </>
  )}
  </div>

diff --git a/harvesthub/app/globals.css b/harvesthub/app/globals.css
@@ -377,7 +377,7 @@ hr {
  height: 9vw;
  text-align: center;
  font-size: 5vw;
- padding-top: 1vw
+ padding-top: 1vw;
 }
 
 #veggie-container {
@@ -682,14 +682,12 @@ hr {
  color: var(--dark-green-color);
 }
 
-.fc-daygrid-day-frame{
+.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);
 }
@@ -729,10 +727,10 @@ hr {
 }
 
 .fc-button-group {
-gap: 1vw
+ gap: 1vw;
 }
 
-.fc-direction-ltr{
+.fc-direction-ltr {
  border: none;
  border-radius: 2vw;
 }
@@ -1176,9 +1174,18 @@ gap: 1vw
  max-width: 10vw;
  }
  .sad-pumpkin {
- max-width: 40vw;
+ max-width: 30vw;
  height: auto;
- align-self: center;
+ }
+ .pumpkinContainer {
+ width: 100vw;
+ display: flex;
+ justify-content: center;
+ }
+ .backButtonContainer {
+ width: 100vw;
+ margin-top: 2vw;
+ margin-bottom: 2vw;
  }
  #fav-card-container {
  max-width: 90vw;
@@ -1191,6 +1198,7 @@ gap: 1vw
  height: 10vw;
  max-width: 10vw;
  }
+
  .calendar-event-container {
  top: 40vh;
  }
@@ -1261,22 +1269,22 @@ gap: 1vw
 
 /* 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;
@@ -1288,45 +1296,45 @@ gap: 1vw
  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{
- color: var(--dark-green-color);
- background-color: var(--white-cream-color);
- height: 100%;
- margin: 0;
- width: 10vw;
- border-radius: 3vw;
+.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{
+.calendar-event-container button {
  color: var(--orange-color);
  font-weight: 700;
 }
 
-#myGarden-introduction{
+#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
+ border: none;
 }
 
-#myGarden-introduction h3{
-margin: 0;
+#myGarden-introduction h3 {
+ margin: 0;
 }
 
-#view-options-container{
+#view-options-container {
  display: flex;
  flex-direction: row;
  justify-content: start;
@@ -1336,34 +1344,33 @@ margin: 0;
  width: 100vw;
  border: none;
  margin-left: -5vw;
- margin-right: -5vw
+ margin-right: -5vw;
 }
 
-#view-options-container button{
+#view-options-container button {
  margin: 0;
  border-radius: 0;
-border: none;
+ 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;
 }
-
-
-
-.key-color{
- height: 7vw;
- width: 7vw;
- border-radius: 50%;
+.backButtonContainer {
+ display: flex;
+ justify-content: center;
+}
+.key-color {
+ height: 6vw;
+ width: 6vw;
+ border-radius: 10px;
  background-color: var(--dark-green-color);
- border: 1px solid var(--dark-green-color)
+ border: 1px solid var(--dark-green-color);
 }
 
-
-
-#key-colors-container{
+#key-colors-container {
  position: absolute;
  bottom: 0;
  height: 10vw;
@@ -1377,12 +1384,11 @@ border: none;
  z-index: 10000;
 }
 
-.harvest-item{
-color: var(--white-cream-color);
-background-color: var(--dark-green-color);
-border: 1px solid #f3ebe4;
+.harvest-item {
+ color: var(--white-cream-color);
+ background-color: var(--dark-green-color);
+ border: 1px solid #f3ebe4;
 }
 
-.calendar-list button{
-
-}
+.calendar-list button {
+}
diff --git a/harvesthub/app/my-garden/page.tsx b/harvesthub/app/my-garden/page.tsx
@@ -1,5 +1,5 @@
 "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";
@@ -10,24 +10,61 @@ import useCheckSignedIn from "@/components/hooks/useCheckSignedIn.js";
 export default function Home() {
  // rendering the components
 
- const [signedIn] = useCheckSignedIn()
- console.log(signedIn)
+ const [signedIn] = useCheckSignedIn();
+ console.log(signedIn);
 
  return (
  <>
  <Header title="My Garden" />
  <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" />
+ <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>
- <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></>}
+ {signedIn ? (
+ <>
+ {" "}
+ <div id="calendar-container">
+ <FullCalendar initialView="dayGridMonth" />
+ </div>
+ <div className="backButtonContainer">
+ <Link href="/">
+ <Button className="addButton">Back</Button>
+ </Link>
+ </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>
+ </>
+ )}
  </>
  );
 }
diff --git a/harvesthub/app/yourTips/page.jsx b/harvesthub/app/yourTips/page.jsx
@@ -125,11 +125,13 @@ export default function YourTips() {
  <>
  <>
  <p className="favsMissing">You have not added any tips</p>
- <img
- className="sad-pumpkin"
- src="/assets/sadPumpkin.png"
- alt="sad pumpkin"
- ></img>
+ <div className="pumpkinContainer">
+ <img
+ className="sad-pumpkin"
+ src="/assets/sadPumpkin.png"
+ alt="sad pumpkin"
+ ></img>
+ </div>
  </>
  </>
  )}