update horizontalCard

This commit is contained in:
Ruidy Nemausat 2020-04-03 11:59:14 +02:00
parent 05660e55aa
commit 6d5aedd499
2 changed files with 71 additions and 54 deletions

View file

@ -1,5 +1,11 @@
import React, { FC, MouseEvent } from "react"; import React, { FC, MouseEvent } from "react";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import { makeStyles } from "@material-ui/core/styles";
import Card from "@material-ui/core/Card";
import CardActions from "@material-ui/core/CardActions";
import CardContent from "@material-ui/core/CardContent";
import Button from "@material-ui/core/Button";
import Typography from "@material-ui/core/Typography";
import { getRemainingdays } from "../utils/methods"; import { getRemainingdays } from "../utils/methods";
interface IProps { interface IProps {
@ -9,25 +15,42 @@ interface IProps {
link?: string; link?: string;
} }
const useStyles = makeStyles({
root: {
minWidth: 275
},
bullet: {
display: "inline-block",
margin: "0 2px",
transform: "scale(0.8)"
},
title: {
fontSize: 14
},
pos: {
marginBottom: 12
}
});
export const HorizontalCard: FC<IProps> = ({ export const HorizontalCard: FC<IProps> = ({
title, title,
remainingDays, remainingDays,
link = "#", link = "#",
validateTicket validateTicket
}) => { }) => {
const classes = useStyles();
const bull = <span className={classes.bullet}></span>;
return ( return (
<li> <Card className={classes.root}>
<div className="card horizontal"> <CardContent>
<div className="card-stacked"> <Typography variant="h5" component="h2">
<div className="card-content">
<div className="row">
<div className="card-title">
<h6>
<Link to={link}> <Link to={link}>
<b>{title ?? "Nothing to do"}</b> <b>{title ?? "Nothing to do"}</b>
</Link> </Link>
</h6> </Typography>
</div>
<Typography variant="body2" component="p">
<span> <span>
Due{" "} Due{" "}
{remainingDays ? ( {remainingDays ? (
@ -39,17 +62,13 @@ export const HorizontalCard: FC<IProps> = ({
)}{" "} )}{" "}
days days
</span> </span>
<div className="right"> </Typography>
<Link to="#"> </CardContent>
<i className="material-icons" onClick={validateTicket}> <CardActions>
check <Button size="small" onClick={validateTicket}>
</i> Mark as done
</Link> </Button>
</div> </CardActions>
</div> </Card>
</div>
</div>
</div>
</li>
); );
}; };

View file

@ -44,7 +44,6 @@ export const ProjectList: FC<IProps> = ({ projects }) => {
</Grid> </Grid>
</Grid> </Grid>
<div className="col s12 grey lighten-1"> <div className="col s12 grey lighten-1">
<ul>
{filteredTickets.length === 0 ? ( {filteredTickets.length === 0 ? (
<HorizontalCard /> <HorizontalCard />
) : ( ) : (
@ -64,7 +63,6 @@ export const ProjectList: FC<IProps> = ({ projects }) => {
/> />
)) ))
)} )}
</ul>
</div> </div>
</> </>
); );