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.
SE4CPS · Feb 18, 2025 · 7c70f63 · 7c70f63
1 parent a18d323
commit 7c70f63
Show file tree

Hide file tree

Showing 7 changed files with 130 additions and 6 deletions.
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
@@ -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
@@ -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
@@ -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
@@ -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;
 }
diff --git 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
@@ -6,6 +6,10 @@ html, body, #root, .App {
     margin: 0px;
 }
 
+body{
+    overflow: scroll;
+}
+
 .text-white{
     color: #FFFFFF;
 }