1import React from 'react';
 2import { Link } from 'react-router-dom';
 3
 4import Button from '@material-ui/core/Button';
 5import { makeStyles } from '@material-ui/core/styles';
 6import ArrowBackIcon from '@material-ui/icons/ArrowBack';
 7
 8const useStyles = makeStyles((theme) => ({
 9  backButton: {
10    position: 'sticky',
11    top: '80px',
12    backgroundColor: theme.palette.primary.dark,
13    color: theme.palette.primary.contrastText,
14    '&:hover': {
15      backgroundColor: theme.palette.primary.main,
16      color: theme.palette.primary.contrastText,
17    },
18  },
19}));
20
21function BackToListButton() {
22  const classes = useStyles();
23
24  return (
25    <Button
26      variant="contained"
27      className={classes.backButton}
28      aria-label="back to issue list"
29      component={Link}
30      to="/"
31    >
32      <ArrowBackIcon />
33      Back to List
34    </Button>
35  );
36}
37
38export default BackToListButton;