Merge branch 'main' of github.com:SE4CPS/PlantWaterSystem into backen…

…d_code2
SE4CPS · Feb 22, 2025 · 0185205 · 0185205
2 parents 07c825b + 07632ec
commit 0185205
Show file tree

Hide file tree

Showing 8 changed files with 170 additions and 1 deletion.
diff --git a/frontend/web-app/src/Components/AddNewPlantCard.tsx b/frontend/web-app/src/Components/AddNewPlantCard.tsx
@@ -0,0 +1,17 @@
+import React from 'react'
+import '../Styles/custom/addNewPlantCard.css'
+
+function AddNewPlantCard() {
+  return (
+    <div className='addNewPlantCard'>
+        <div className='addNewPlantCard-text'>
+            Add a new plant
+        </div>
+        <div className='addNewPlantCard-icon'>
+            +
+        </div>
+    </div>
+  )
+}
+
+export default AddNewPlantCard
diff --git a/frontend/web-app/src/Components/PlantCard.tsx b/frontend/web-app/src/Components/PlantCard.tsx
@@ -0,0 +1,25 @@
+import React from 'react'
+import '../Styles/custom/plantCard.css'
+import dummyImage from '../Images/rose.png'
+
+function PlantCard({status}: {status: string}) {
+  return (
+    <div className={`plantCard ${status}`}>
+      {status==='dry'? <div className='plantCard-dry-status-indicator'><b>Water Me!</b></div> : null}
+      <img className='plantCard-image' src={dummyImage} alt='Error Img'/>
+      <div className='plantCard-detail'>
+        <div>
+          Name: <b>Red Rose</b>
+        </div>
+        <div>
+          Status: <b>Good</b>
+        </div>
+        <div>
+          Last Watered: <b>3:15 pm</b> on <b>2/6/2025</b>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default PlantCard
diff --git a/frontend/web-app/src/Images/dummy-image.png b/frontend/web-app/src/Images/dummy-image.png
diff --git a/frontend/web-app/src/Pages/HomePage.tsx b/frontend/web-app/src/Pages/HomePage.tsx
@@ -1,5 +1,8 @@
 import React, { useEffect } from 'react'
 import authController from '../Controller/AuthController'
+import '../Styles/custom/homePage.css'
+import PlantCard from '../Components/PlantCard'
+import AddNewPlantCard from '../Components/AddNewPlantCard'
 
 function HomePage() {
 // example of using APIs
@@ -17,7 +20,19 @@ function HomePage() {
   }, [])
 
   return (
-    <div>HomePage</div>
+    <div className='homePage'>
+      <div className='nameBar'>Vy's Plants</div>
+      <div className='plantViewer'>
+        <PlantCard status='dry'/>
+        <PlantCard status='good'/>
+        <PlantCard status='dry'/>
+        <PlantCard status='good'/>
+        <PlantCard status='good'/>
+        <PlantCard status='dry'/>
+        <PlantCard status='good'/>
+        <AddNewPlantCard />
+      </div>
+    </div>
   )
 }
 

diff --git a/frontend/web-app/src/Styles/custom/addNewPlantCard.css b/frontend/web-app/src/Styles/custom/addNewPlantCard.css
@@ -0,0 +1,27 @@
+.addNewPlantCard{
+    height: 532px;
+    width: 356px;
+    border-radius: 18px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    background-color: #E6F2D7;
+}
+
+
+.addNewPlantCard-text{
+    font-family: 'Poppins', sans-serif;
+    font-weight: 700;
+    font-size: 25px;
+    line-height: 37px;
+    margin-bottom: 22px;
+}
+
+.addNewPlantCard-icon{
+    font-family: 'Poppins', sans-serif;
+    font-weight: 700;
+    font-size: 100px;
+    line-height: 100px;
+}
+
diff --git a/frontend/web-app/src/Styles/custom/homePage.css b/frontend/web-app/src/Styles/custom/homePage.css
@@ -0,0 +1,23 @@
+/* Home Page CSS */
+
+.homePage{
+    display: flex;
+    flex-direction: column;
+    padding: 44px 82px 94px 82px;
+}
+
+.nameBar{
+    font-family: "Poppins", serif;
+    font-size: 42px;
+    font-weight: 800;
+    color: #4C5740;
+}
+
+.plantViewer{
+    padding-top: 31px;
+    display: grid;
+    justify-content: center;
+    grid-template-columns: auto auto auto auto;
+    row-gap: 30px;
+    column-gap: 24px;
+}
diff --git a/frontend/web-app/src/Styles/custom/plantCard.css b/frontend/web-app/src/Styles/custom/plantCard.css
@@ -0,0 +1,58 @@
+/* Plant Card CSS */
+
+.plantCard{
+    height: 532px;
+    width: 356px;
+    border-radius: 18px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.good{
+    background-color: #E6F2D7;
+}
+
+.dry{
+    background-color: #F2DDD7;
+}
+
+.plantCard-image{
+    height: 326px;
+    width: 302px;
+    border-radius: 15px;
+    margin-top: 23px;
+}
+
+.plantCard-detail{
+    width: 302px;
+    height: 133px;
+    margin-top: 15px;
+}
+
+.plantCard-detail > *{
+    font-family: 'Poppins', sans-serif;
+    font-weight: 400;
+    font-size: 23px;
+    line-height: 34px;
+}
+
+.plantCard-dry-status-indicator{
+    background-color: #7CD1F0;
+    width: 150px;
+    height: 47px;
+    border-radius: 23px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    margin-top: 11px;
+    margin-left: 192px;
+}
+
+.plantCard-dry-status-indicator > * {
+    font-family: 'Poppins', sans-serif;
+    font-weight: 700;
+    font-size: 23px;
+    line-height: 34px;
+}
diff --git a/frontend/web-app/src/Styles/global.css b/frontend/web-app/src/Styles/global.css
@@ -6,6 +6,10 @@ html, body, #root, .App {
     margin: 0px;
 }
 
+body{
+    overflow: scroll;
+}
+
 .text-white{
     color: #FFFFFF;
 }