original container

SignInContainer.js

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import { Grid, Link, InputLabel, InputBase, Input, Typography } from '@material-ui/core';
import Button from '@material-ui/core/Button';
import { Redirect } from 'react-router';
import classNames from 'classnames';
import gql from 'graphql-tag';
import { Mutation } from 'react-apollo';

import withRoot from '../withRoot';

const styles = theme => ({
  margin: {
    margin: theme.spacing.unit,
  },
  bootstrapInput: {
      borderRadius: '2px',
      bottom: '0px',
      backgroundColor: theme.palette.common.white,
      border: '1px solid #CCC',
      padding: '22px 16px',
      transition: theme.transitions.create(['border-color', 'box-shadow']),
      '&:focus': {
        borderRadius: 4,
        borderColor: '#000052',
      },
      '@media screen and (max-width: 673px)': {
        flexDirection: 'column-reverse',
        
      },
  },
  bootstrapFormLabel: {
    fontSize: '20px',
    color: '#000000',
    fontFamily: 'Lato',
    fontStyle: 'normal',
    fontWeight: 'normal',
    lineHeight: 'normal',
  },
  bootstrapRoot: {
    'label + &': {
      marginTop: theme.spacing.unit,
      marginBottom: theme.spacing.unit * 2,
    },
  },
  button: {
    background: theme.palette.sunburst,
    width: '100%',
    height: '64px',
    color: theme.palette.black,
    textTransform: 'none',
    fontFamily: 'Work Sans',
    fontStyle: 'normal',
    fontWeight: '500',
    lineHeight: 'normal',
    fontSize: '18px',
    textAlign: 'center',
    color: '#190756',
  },
  mT10: {
    marginTop: 10,
  },
  // content: {
  //   flexGrow: 1,
  //   padding: 24,
  //   height: '100vh',
  //   overflow: 'auto',
  // },

  container: {

    '@media screen and (max-width: 673px)': {
      flexDirection: 'column-reverse',
    },
  },
  gridItem: {
    flexGrow: 1,
    height: '100vh',
    overflow: 'auto',
  },

  leftSide: {
    flex: '0 0 673px',
    paddingTop: '64px',

    '@media screen and (max-width: 673px)': {
    },
  },

  rightSide: {
    backgroundImage: 'url("/images/birdseye-login.jpg")',
    backgroundSize: 'cover',

    '@media screen and (max-width: 673px)': {
      height: '112px',
      width: '414px',
      backgroundPosition: 'center center',
      backgroundSize: '100%',
      backgroundRepeat: 'no-repeat',
    },
  },

  authFields: {
    display: 'flex',
    flexDirection: 'column',
  },

  margin: {
    margin: theme.spacing.unit,
  },
  link: {
    color: '#777',
    fontSize: '18px',
    textAlign: 'center',
    '@media screen and (max-width: 673px)': {
      fontSize: '12px',
    },

  },

  headerText: {
    ...theme.typography.h2,
    marginTop: '185px',
    marginBottom: '12.5%',
    '@media screen and (max-width: 673px)': {
      width: '643px',
      marginTop: '47px',
      height: '64px',
      lineHeight: '28px'
    },
  },
});

const AUTHENTICATE_GQL = gql`
mutation Authenticate($username: String!, $password: String!) {
  authenticate(username: $username, password: $password) {
    token
  }
}
`;
class SignIn extends React.Component {
  state = {
    username: null,
    password: null,
  }

  render() {
    const { classes } = this.props;
    const { username, password } = this.state;

    return (
      <Mutation mutation={AUTHENTICATE_GQL}>

        {(authenticate, { data }) => {
          if (data && data.authenticate) {
            const { token } = data.authenticate;
            localStorage.setItem('token', token);
            return (
              <Redirect to="/dashboard" />
            );
          }

          return (
            <Grid container spacing={40} classes={{ container: classes.container }}>
              <Grid
                item
                container
                justify="center"
                classes={{ item: classNames(classes.gridItem, classes.leftSide) }}
              >
                <Grid item xs={11}>
                  <img src="/images/brand.png" height="75px" width="75px" alt="application icon" />
                  <h2 className={classes.headerText}>
                    Welcome to Birdseye!
                  </h2>

                    <InputLabel shrink htmlFor="bootstrap-input" className={classes.bootstrapFormLabel}>
                    Email Address
                  </InputLabel>
                  <InputBase
                    id="bootstrap-input"
                    defaultValue=""
                    fullWidth={true}
                    classes={{
                      root: classes.bootstrapRoot,
                      input: classes.bootstrapInput
                    }}
                    onChange={evt => this.setState({ username: evt.target.value })}
                    onKeyPress={(evt) => {
                      if (evt.key === 'Enter') {
                        this.setState({ username: evt.target.value })
                        authenticate({ variables: { username, password } })
                      }
                    }}
                  
                  />
                  
                  <InputLabel shrink htmlFor="bootstrap-input" className={classes.bootstrapFormLabel}>
                    Password
                  </InputLabel>
                  <Input 
                    id="adornment-password"
                    fullWidth={true}
                    classes={{
                      root: classes.bootstrapRoot,
                      input: classes.bootstrapInput,
                    }}
                    type="password"
                    onChange={evt => this.setState({ password: evt.target.value })}
                    onKeyPress={(evt) => {
                      if (evt.key === 'Enter') {
                        this.setState({ password: evt.target.value })
                        authenticate({ variables: { username, password } })
                      }
                    }}
                  >
                  </Input>

                 
                  <Button
                    size="large"
                    color="primary"
                    onClick={() => authenticate({ variables: { username, password } })}
                    className={classNames(classes.button, classes.mT10)}
                  >
                    Sign in
                  </Button>
                  <Typography align="center">
                  <Link href="#" className={classes.link}>Forgot Password</Link>
                  </Typography>
            
                </Grid>
              </Grid>
                <Grid item  classes={{ item: classNames(classes.gridItem, classes.rightSide) }}>
                </Grid>
            </Grid>
          );
        }}

      </Mutation>
    );
  }
}

SignIn.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withRoot(withStyles(styles)(SignIn));