From 397749b5524182357ba7a032ce79e484cc7144ac Mon Sep 17 00:00:00 2001
From: Barry Gitarts <bgitarts@gmail.com>
Date: Tue, 12 Feb 2019 08:48:49 -0500
Subject: [PATCH] add action button to project page

---
 app/components/projects/Project.jsx | 42 ++++++++++++++++++++---------
 1 file changed, 30 insertions(+), 12 deletions(-)

diff --git a/app/components/projects/Project.jsx b/app/components/projects/Project.jsx
index e923cb7..d155390 100644
--- a/app/components/projects/Project.jsx
+++ b/app/components/projects/Project.jsx
@@ -1,12 +1,13 @@
 import React from 'react'
 import Typography from '@material-ui/core/Typography'
-import Card from '@material-ui/core/Card';
-import CardHeader from '@material-ui/core/CardHeader';
-import CardMedia from '@material-ui/core/CardMedia';
-import CardContent from '@material-ui/core/CardContent';
-import CardActions from '@material-ui/core/CardActions';
-import CardActionArea from '@material-ui/core/CardActionArea';
-import Avatar from '@material-ui/core/Avatar';
+import Button from '@material-ui/core/Button'
+import Card from '@material-ui/core/Card'
+import CardHeader from '@material-ui/core/CardHeader'
+import CardMedia from '@material-ui/core/CardMedia'
+import CardContent from '@material-ui/core/CardContent'
+import CardActions from '@material-ui/core/CardActions'
+import CardActionArea from '@material-ui/core/CardActionArea'
+import Avatar from '@material-ui/core/Avatar'
 import { withStyles } from '@material-ui/core/styles'
 import PropTypes from 'prop-types'
 
@@ -52,7 +53,12 @@ const styles = theme => ({
   },
   infoBox: {
     display: 'grid',
-    gridTemplateRows: '2.5rem'
+    gridTemplateRows: '2.5rem 2.5rem 2.5rem 2.5rem',
+    gridRowGap: '2rem'
+  },
+  infoBoxSection: {
+    display: 'flex',
+    flexDirection: 'column'
   },
   infoText: {
     fontSize: '2rem'
@@ -102,11 +108,23 @@ function Project({ classes }) {
             </CardContent>
           </CardActionArea>
         </Card>
+
         <div className={classes.infoBox}>
-          <span className={classes.infoText}>
-            $13,412
-          </span>
-          <span className={classes.subtext}>pledged of $48,894 goal</span>
+          <div className={classes.infoBoxSection}>
+            <span className={classes.infoText}>
+              $13,412
+            </span>
+            <span className={classes.subtext}>pledged of $48,894 goal</span>
+          </div>
+          <div className={classes.infoBoxSection}>
+            <span className={classes.infoText}>475</span>
+            <span className={classes.subtext}>backers</span>
+          </div>
+          <div className={classes.infoBoxSection}>
+            <span className={classes.infoText}>19</span>
+            <span className={classes.subtext}>days active</span>
+          </div>
+          <Button color="primary" variant="contained" style={{ height: '50px' }}>Back this project</Button>
         </div>
       </div>
     </div>