1import {useTranslation} from 'react-i18next';
 2import Button from '@material-ui/core/Button';
 3import Icon from '@material-ui/core/Icon';
 4import CardContent from '@material-ui/core/CardContent';
 5import Card from '@material-ui/core/Card';
 6import Typography from '@material-ui/core/Typography';
 7import CardActions from '@material-ui/core/CardActions';
 8import {makeStyles} from '@material-ui/core/styles';
 9import Link from 'next/link';
10
11const Success = ({email}) => {
12  const {t} = useTranslation();
13  const classes = useStyles();
14
15  return (
16    <Card className={classes.successCard}>
17      <CardContent>
18        <Icon size="large" color="primary" className={classes.successIcon}>
19          done
20        </Icon>
21      </CardContent>
22      <CardContent>
23        <Typography variant="body1" gutterBottom>
24          {t('lost_password.sent', {email})}
25        </Typography>
26      </CardContent>
27      <CardActions className={classes.actions}>
28        <Link href="/auth/login" passHref>
29          <Button id="LostPasswordRegister" color="primary" variant="contained">
30            {t('lost_password.actions.login')}
31          </Button>
32        </Link>
33      </CardActions>
34    </Card>
35  );
36};
37
38const useStyles = makeStyles(theme => ({
39  successCard: {
40    textAlign: 'center',
41  },
42  successIcon: {
43    fontSize: theme.spacing(14),
44  },
45  actions: {
46    justifyContent: 'center',
47  },
48}));
49export default Success;