updated transaction, recipient list & mydonations

package.json

@@ -17,7 +17,8 @@
     "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.1",
     "uuid": "^8.2.0",
-    "web3": "^1.2.9"
+    "web3": "^1.2.9",
+    "yup": "^0.29.3"
   },
   "scripts": {
     "start": "react-scripts start",

src/components/Campaign/Campaign.js

@@ -2,15 +2,22 @@ import React from 'react';
 import classes from './Campaign.module.css'
 import { useHistory } from 'react-router-dom';
 import { FaCalendarAlt } from 'react-icons/fa';
-import { IconContext } from "react-icons"
+import { IconContext } from "react-icons";
+import { Badge } from 'react-bootstrap';
 
 export const Campaign = ({ campaign }) => {
     const history = useHistory();
     return (
         <div className={classes.Card} onClick={() => history.push(`/campaign${campaign.address}`)}>
+            {/* Title */}
             <h2> {campaign.title} </h2>
+
+            {/* Status */}
+            <Badge style={{ marginTop: '10px', marginLeft: '10px' }} variant={campaign.status === 'Closed' ? 'danger' : campaign.status === 'Goal Pending' ? 'warning' : 'success'}>{campaign.status}</Badge>
+
+            {/* Description */}
             <p className={classes.Description} > {campaign.description} </p>
-            {/* <p className={classes.CreatedBy} > Manager: {campaign.manager} </p> */}
+
             <IconContext.Provider value={{ className: classes.DateIcon }}>
                 <FaCalendarAlt />  <p className={classes.DateCreated}>Created at: {campaign.createdAt.toDateString()}</p>
             </IconContext.Provider>

src/components/Campaign/Campaign.module.css

@@ -1,7 +1,7 @@
 .Card {
     cursor: pointer;
     max-width: 400px;
-    height: 240px;
+    height: 260px;
     margin: 15px;
     background-color: #fff;
     border-radius: 10px;

src/components/CampaignDetails/CampaignDetails.js

@@ -91,7 +91,8 @@ export const CampaignDetails = ({ campaign, style, loadCampaignDetails }) => {
                         {/* Status */}
                         <Row>
                             <Col lg='auto' className='ml-auto my-3'>
-                                <FaExclamationCircle className='mb-1' /> Status: {campaign.status}
+                                <FaExclamationCircle className='mb-1' /> Status:
+                                <b style={{ color: campaign.status === 'Closed' ? 'red' : campaign.status === 'Goal Reached' ? 'green' : 'yellow' }} > {campaign.status}</b>
                             </Col>
                         </Row>