1import React from 'react';
 2import CardContent from '@material-ui/core/CardContent';
 3import {useTranslation} from 'react-i18next';
 4import {makeStyles} from '@material-ui/core/styles';
 5import Button from '@material-ui/core/Button';
 6import {ReactComponent as GoogleIcon} from '../../assets/google-icon.svg';
 7const LoginGoogle = () => {
 8  const {t} = useTranslation();
 9  const classes = useStyles();
10
11  return (
12    <CardContent className={classes.content}>
13      <Button
14        variant="outlined"
15        color="primary"
16        href="/connect/google"
17        startIcon={<GoogleIcon className={classes.googleIcon} />}
18      >
19        {t('signin.withGoogle')}
20      </Button>
21    </CardContent>
22  );
23};
24
25const useStyles = makeStyles(theme => ({
26  content: {
27    display: 'flex',
28    flexDirection: 'column',
29    alignItems: 'center',
30    padding: theme.spacing(4, 0),
31  },
32  googleIcon: {
33    height: 32,
34    width: 32,
35  },
36}));
37
38export default LoginGoogle;