Style reservation using timeline.

src/components/Dashboard/ReservationPage/Reservation/Reservation.tsx

@@ -4,43 +4,68 @@ import {
   Grid,
   Paper,
   Table,
-  TableBody,
-  TableCell,
   TableContainer,
-  TableHead,
-  TableRow,
+  Typography,
 } from '@material-ui/core';
 import { ReservationType } from 'types/ReservationType';
-
-const useStyles = makeStyles(() => ({
-  noShadow: {
-    border: 'none',
-    boxShadow: 'none',
-    backgroundColor: 'transparent',
-  },
-}));
+import {
+  Timeline,
+  TimelineConnector,
+  TimelineContent,
+  TimelineDot,
+  TimelineItem,
+  TimelineOppositeContent,
+  TimelineSeparator,
+} from '@material-ui/lab';
 
 type PropsType = {
   reservation: ReservationType;
 };
 
+const useStyles = makeStyles((theme) => ({
+  root: {
+    width: '100%',
+    margin: '1em 0',
+  },
+  button: {
+    marginTop: theme.spacing(1),
+    marginRight: theme.spacing(1),
+  },
+  actionsContainer: {
+    marginBottom: theme.spacing(2),
+  },
+  resetContainer: {
+    padding: theme.spacing(3),
+  },
+}));
+
 export const Reservation: FC<PropsType> = ({ reservation }: PropsType) => {
   const classes = useStyles();
 
   return (
-    <Grid item container style={{ paddingTop: '20px' }}>
+    <Grid item container className={classes.root}>
       <TableContainer component={Paper}>
         <Table aria-label="simple table">
-          <TableHead>
+          <Timeline>
             {reservation.tripStages.map((stage, key) => (
-              <TableRow>
-                <TableCell key={stage.number}>
-                  {stage.location.address}
-                </TableCell>
-                <TableCell key={stage.number}>{stage.estimatedBeAt}</TableCell>
-              </TableRow>
+              <TimelineItem key={stage.number}>
+                <TimelineOppositeContent>
+                  <Typography>
+                    {new Date(stage.estimatedBeAt).toLocaleDateString()}
+                  </Typography>
+                </TimelineOppositeContent>
+
+                <TimelineSeparator>
+                  <TimelineDot />
+                  <TimelineConnector />
+                </TimelineSeparator>
+
+                <TimelineContent>
+                  <Typography>{stage.location.address}</Typography>
+                </TimelineContent>
+              </TimelineItem>
             ))}
-          </TableHead>
+          </Timeline>
         </Table>
       </TableContainer>
     </Grid>