I've been struggling to position these items on the modal and could use some advice. I'm aiming to include the item counter as text and stars below it, with the unassigned text at the bottom. Despite trying various layouts, I can't seem to get it right. Here's my current code:
const styles = theme => ({
root: {
flexGrow: 1,
overflow: 'hidden',
padding: theme.spacing(0, 3),
},
paper: {
maxWidth: 800,
margin: `${theme.spacing(2)}px auto`,
padding: theme.spacing(2),
},
textField: {
marginLeft: theme.spacing(1),
marginRight: theme.spacing(1),
width: 200,
},
playButton: {
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
"& .rating": {
flex: 1
},
}
});
function Tasks(props) {
const { classes } = props;
return (
<div className={classes.root}>
<Paper className={classes.paper}>
<Grid container spacing={2}>
<Grid item xs={12} sm container>
<Grid item xs container direction="column" spacing={2}>
<Grid item xs>
<div className="name-label">
Name
</div>
<Typography variant="h6">
Order coffee beans
</Typography>
<div className="form-divider"></div>
<Typography variant="body2" color="textSecondary">
Process Description
</Typography>
</Grid>
</Grid>
<Grid item classes={{ root: props.classes.playButton}}>
<Grid item xs={3} className="playButton">
<i class="far fa-play-circle fa-2x"></i>
</Grid>
<div className="workers-assigned-label">
Workers Assigned
</div>
<div>
count / total
</div>
<div className="rating">
Stars go here
</div>
<div>
unassigned
</div>
</Grid>
</Grid>
</Grid>
</Paper>
</div>
);
}
export default withStyles(styles)(Tasks);
To provide clarity on what I'm attempting to achieve, I have attached a screenshot of the design.
Image: view screenshot here