import React, { Fragment } from 'react';
import { withStyles } from '@material-ui/core/styles';
import { Typography } from '@material-ui/core';

const styles = theme => ({
  h1: {
    paddingTop: theme.spacing.unit * 5,
    paddingBottom: theme.spacing.unit * 1,
    textAlign: 'center'
  },
  h2: {
    paddingTop: theme.spacing.unit * 1,
    paddingBottom: theme.spacing.unit * 2,
    textAlign: 'center'
  }
});

const LoginHeader = ({ classes }) => (
  <Fragment>
    <Typography
      variant="display3"
      component="h1"
      className={classes.h1}
    >
elephant
    </Typography>

    <Typography
      variant="headline"
      component="h2"
      className={classes.h2}
    >
Log in
    </Typography>
  </Fragment>

);

export default withStyles(styles)(LoginHeader);