add action button to project page

This commit is contained in:
Barry Gitarts 2019-02-12 08:48:49 -05:00 committed by Barry G
parent f31664997d
commit 397749b552

View File

@ -1,12 +1,13 @@
import React from 'react' import React from 'react'
import Typography from '@material-ui/core/Typography' import Typography from '@material-ui/core/Typography'
import Card from '@material-ui/core/Card'; import Button from '@material-ui/core/Button'
import CardHeader from '@material-ui/core/CardHeader'; import Card from '@material-ui/core/Card'
import CardMedia from '@material-ui/core/CardMedia'; import CardHeader from '@material-ui/core/CardHeader'
import CardContent from '@material-ui/core/CardContent'; import CardMedia from '@material-ui/core/CardMedia'
import CardActions from '@material-ui/core/CardActions'; import CardContent from '@material-ui/core/CardContent'
import CardActionArea from '@material-ui/core/CardActionArea'; import CardActions from '@material-ui/core/CardActions'
import Avatar from '@material-ui/core/Avatar'; import CardActionArea from '@material-ui/core/CardActionArea'
import Avatar from '@material-ui/core/Avatar'
import { withStyles } from '@material-ui/core/styles' import { withStyles } from '@material-ui/core/styles'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
@ -52,7 +53,12 @@ const styles = theme => ({
}, },
infoBox: { infoBox: {
display: 'grid', display: 'grid',
gridTemplateRows: '2.5rem' gridTemplateRows: '2.5rem 2.5rem 2.5rem 2.5rem',
gridRowGap: '2rem'
},
infoBoxSection: {
display: 'flex',
flexDirection: 'column'
}, },
infoText: { infoText: {
fontSize: '2rem' fontSize: '2rem'
@ -102,11 +108,23 @@ function Project({ classes }) {
</CardContent> </CardContent>
</CardActionArea> </CardActionArea>
</Card> </Card>
<div className={classes.infoBox}> <div className={classes.infoBox}>
<span className={classes.infoText}> <div className={classes.infoBoxSection}>
$13,412 <span className={classes.infoText}>
</span> $13,412
<span className={classes.subtext}>pledged of $48,894 goal</span> </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> </div>
</div> </div>