From dd475450b317ecf3cdbffec326e11c350fd83b54 Mon Sep 17 00:00:00 2001
From: ravi-p-k1 <ravipkakadia1@gmail.com>
Date: Mon, 17 Feb 2025 22:52:22 -0800
Subject: [PATCH] Added AddNewPlantCard Component and it's CSS. Added Dry/Good
 CSS design to PlantCard Component. Added PlantCard image and PlantCard
 details CSS design. Populated home page design with plant cards and added
 grid to display plant cards properly. Added overflow: scroll to body tag.

---
 .../src/Components/AddNewPlantCard.tsx        | 17 ++++++
 frontend/web-app/src/Components/PlantCard.tsx | 19 +++++--
 frontend/web-app/src/Pages/HomePage.tsx       | 10 +++-
 .../src/Styles/custom/addNewPlantCard.css     | 27 ++++++++++
 .../web-app/src/Styles/custom/homePage.css    |  7 ++-
 .../web-app/src/Styles/custom/plantCard.css   | 52 ++++++++++++++++++-
 frontend/web-app/src/Styles/global.css        |  4 ++
 7 files changed, 130 insertions(+), 6 deletions(-)
 create mode 100644 frontend/web-app/src/Components/AddNewPlantCard.tsx
 create mode 100644 frontend/web-app/src/Styles/custom/addNewPlantCard.css

diff --git a/frontend/web-app/src/Components/AddNewPlantCard.tsx b/frontend/web-app/src/Components/AddNewPlantCard.tsx
new file mode 100644
index 0000000..d5762f9
--- /dev/null
+++ 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
\ No newline at end of file
diff --git a/frontend/web-app/src/Components/PlantCard.tsx b/frontend/web-app/src/Components/PlantCard.tsx
index 23c7dcc..b43d915 100644
--- a/frontend/web-app/src/Components/PlantCard.tsx
+++ b/frontend/web-app/src/Components/PlantCard.tsx
@@ -1,10 +1,23 @@
 import React from 'react'
 import '../Styles/custom/plantCard.css'
+import dummyImage from '../Images/dummy-image.png'
 
-function PlantCard() {
+function PlantCard({status}: {status: string}) {
   return (
-    <div className='plantCard'>
-        
+    <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>
   )
 }
diff --git a/frontend/web-app/src/Pages/HomePage.tsx b/frontend/web-app/src/Pages/HomePage.tsx
index 03c9a0a..9e3dc36 100644
--- a/frontend/web-app/src/Pages/HomePage.tsx
+++ b/frontend/web-app/src/Pages/HomePage.tsx
@@ -2,6 +2,7 @@ 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
@@ -22,7 +23,14 @@ function HomePage() {
     <div className='homePage'>
       <div className='nameBar'>Vy's Plants</div>
       <div className='plantViewer'>
-        <PlantCard />
+        <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
new file mode 100644
index 0000000..04a8ce5
--- /dev/null
+++ 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
index f4cca6f..b478d47 100644
--- a/frontend/web-app/src/Styles/custom/homePage.css
+++ b/frontend/web-app/src/Styles/custom/homePage.css
@@ -3,7 +3,7 @@
 .homePage{
     display: flex;
     flex-direction: column;
-    padding: 44px 82px 0px 82px;
+    padding: 44px 82px 94px 82px;
 }
 
 .nameBar{
@@ -15,4 +15,9 @@
 
 .plantViewer{
     padding-top: 31px;
+    display: grid;
+    justify-content: center;
+    grid-template-columns: auto auto auto auto;
+    row-gap: 30px;
+    column-gap: 24px;
 }
\ No newline at end of file
diff --git a/frontend/web-app/src/Styles/custom/plantCard.css b/frontend/web-app/src/Styles/custom/plantCard.css
index a2e915e..667d539 100644
--- a/frontend/web-app/src/Styles/custom/plantCard.css
+++ b/frontend/web-app/src/Styles/custom/plantCard.css
@@ -3,6 +3,56 @@
 .plantCard{
     height: 532px;
     width: 356px;
-    background-color: #E6F2D7;
     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
index 95475e1..7e91d1c 100644
--- 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;
 }