Deleted addNewPlantCard CSS and merged it with plantCard.css.

Removed good and dry background color CSS from plantCard CSS and put it into the global CSS file. Created Design for PlantDetailPage and added Plant Detail Card Component. Added Information section of the Plant Detail Card alongwith CSS.
SE4CPS · Feb 20, 2025 · bdd8d96 · bdd8d96
1 parent 07632ec
commit bdd8d96
Show file tree

Hide file tree

Showing 7 changed files with 173 additions and 37 deletions.
diff --git a/frontend/web-app/src/Components/AddNewPlantCard.tsx b/frontend/web-app/src/Components/AddNewPlantCard.tsx
@@ -1,5 +1,4 @@
 import React from 'react'
-import '../Styles/custom/addNewPlantCard.css'
 
 function AddNewPlantCard() {
   return (

diff --git a/frontend/web-app/src/Components/PlantDetailCard.tsx b/frontend/web-app/src/Components/PlantDetailCard.tsx
@@ -0,0 +1,38 @@
+import React from 'react'
+import dummyImage from '../Images/rose.png'
+
+function PlantDetailCard({status}: {status: string}) {
+  return (
+    <div className={`plant-detail-card font-poppins ${status}`}>
+        <div className='plant-detail-card-information'>
+            <div className='detail-and-image-container'>
+                <img className='plant-detail-card-image' src={dummyImage} alt='error img'/>
+                <div className='plant-detail-card-details'>
+                    <div>
+                        Name: <b>Red Rose</b>
+                    </div>
+                    <div>
+                        Status: <b>Good</b>
+                    </div>
+                    <div>
+                        Last Watered: <b>3:15pm</b> on <b>2/6/2025</b>
+                    </div>
+                    <div>
+                        Note: <b>Place this plant near the window</b>
+                    </div>
+                </div>
+            </div>
+            <div className='plant-detail-card-button-container'>
+                <img className='plant-detail-card-close-button' src='' alt='error img'/>
+                <button className='plant-detail-card-edit-button'>Edit</button>
+                <button className='plant-detail-card-delete-button'>Delete</button>
+            </div>
+        </div>
+        <div className='plant-detail-card-history'>
+
+        </div>
+    </div>
+  )
+}
+
+export default PlantDetailCard
diff --git a/frontend/web-app/src/Pages/PlantDetailPage.tsx b/frontend/web-app/src/Pages/PlantDetailPage.tsx
@@ -1,8 +1,12 @@
 import React from 'react'
+import '../Styles/custom/plantDetailPage.css'
+import PlantDetailCard from '../Components/PlantDetailCard'
 
 function PlantDetailPage() {
   return (
-    <div>PlantDetailPage</div>
+    <div className='plant-detail-page'>
+      <PlantDetailCard status='good' />
+    </div>
   )
 }
 

diff --git a/frontend/web-app/src/Styles/custom/addNewPlantCard.css b/frontend/web-app/src/Styles/custom/addNewPlantCard.css
diff --git a/frontend/web-app/src/Styles/custom/plantCard.css b/frontend/web-app/src/Styles/custom/plantCard.css
@@ -9,14 +9,6 @@
     align-items: center;
 }
 
-.good{
-    background-color: #E6F2D7;
-}
-
-.dry{
-    background-color: #F2DDD7;
-}
-
 .plantCard-image{
     height: 326px;
     width: 302px;
@@ -56,3 +48,30 @@
     font-size: 23px;
     line-height: 34px;
 }
+
+.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/plantDetailPage.css b/frontend/web-app/src/Styles/custom/plantDetailPage.css
@@ -0,0 +1,95 @@
+/* Plant Detail Page CSS */
+
+.plant-detail-page{
+    display: flex;
+    flex-direction: column;
+    padding: 41px 82px 34px 82px;
+    justify-content: center;
+    align-items: center;
+}
+
+.plant-detail-card{
+    width: 100%;
+    height: 800px;
+    border-radius: 37px;
+}
+
+.plant-detail-card-information{
+    display: flex;
+    flex-direction: row;
+    padding: 27px 100px 27px 100px;
+    justify-content: space-between;
+}
+
+.plant-detail-card-information > .detail-and-image-container{
+    display: flex;
+    flex-direction: row;
+}
+
+.plant-detail-card-details{
+    display: flex;
+    flex-direction: column;
+    margin-left: 41px;
+    font-weight: 400;
+    font-size: 25px;
+    line-height: 37px;
+    justify-content: space-between;
+}
+
+.plant-detail-card-details b{
+    font-weight: 700;
+}
+
+.plant-detail-card-image{
+    width: 196px;
+    height: 196px;
+}
+
+.plant-detail-card-button-container{
+    display: flex;
+    flex-direction: column;
+}
+
+.plant-detail-card-close-button{
+    margin-bottom: 31px;
+    width: 29px;
+    height: 29px;
+    align-self: flex-end;
+}
+
+.plant-detail-card-edit-button{
+    all: unset;
+    margin-bottom: 20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 123px;
+    height: 47px;
+    background-color: #AFD582;
+    border-radius: 15px;
+    font-weight: 700;
+    font-size: 25px;
+    transition: 0.4s;
+}
+
+.plant-detail-card-edit-button:hover{
+    background-color: #77B42D;
+}
+
+.plant-detail-card-delete-button{
+    all: unset;
+    width: 123px;
+    height: 47px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #EDAC9A;
+    border-radius: 15px;
+    font-weight: 700;
+    font-size: 25px;
+    transition: 0.4s;
+}
+
+.plant-detail-card-delete-button:hover{
+    background-color: red;
+}
diff --git a/frontend/web-app/src/Styles/global.css b/frontend/web-app/src/Styles/global.css
@@ -13,3 +13,11 @@ body{
 .text-white{
     color: #FFFFFF;
 }
+
+.good{
+    background-color: #E6F2D7;
+}
+
+.dry{
+    background-color: #F2DDD7;
+}