update horizontalCard

client/src/components/HorizontalCard.tsx

@@ -1,5 +1,11 @@
 import React, { FC, MouseEvent } from "react";
 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";
 
 interface IProps {
@@ -9,25 +15,42 @@ interface IProps {
   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> = ({
   title,
   remainingDays,
   link = "#",
   validateTicket
 }) => {
+  const classes = useStyles();
+  const bull = <span className={classes.bullet}>•</span>;
+
   return (
-    <li>
-      <div className="card horizontal">
-        <div className="card-stacked">
-          <div className="card-content">
-            <div className="row">
-              <div className="card-title">
-                <h6>
+    <Card className={classes.root}>
+      <CardContent>
+        <Typography variant="h5" component="h2">
           <Link to={link}>
             <b>{title ?? "Nothing to do"}</b>
           </Link>
-                </h6>
-              </div>
+        </Typography>
+
+        <Typography variant="body2" component="p">
           <span>
             Due{" "}
             {remainingDays ? (
@@ -39,17 +62,13 @@ export const HorizontalCard: FC<IProps> = ({
             )}{" "}
             days
           </span>
-              <div className="right">
-                <Link to="#">
-                  <i className="material-icons" onClick={validateTicket}>
-                    check
-                  </i>
-                </Link>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </li>
+        </Typography>
+      </CardContent>
+      <CardActions>
+        <Button size="small" onClick={validateTicket}>
+          Mark as done
+        </Button>
+      </CardActions>
+    </Card>
   );
 };

client/src/components/ProjectList.tsx

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