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