Grid API

<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=""
                    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>
                  <InputBase
                    id="bootstrap-input"
                    defaultValue=""
                    classes={{
                      root: classes.bootstrapRoot,
                      input: classes.bootstrapInput,
                    }}
                    onChange={evt => this.setState({ password: evt.target.value })}
                    onKeyPress={(evt) => {
                      if (evt.key === 'Enter') {
                        this.setState({ password: evt.target.value })
                        authenticate({ variables: { username, password } })
                      }
                    }}
                  />
                  <Button
                    size="large"
                    color="primary"
                    onClick={() => authenticate({ variables: { username, password } })}
                    className={classNames(classes.button, classes.mT10)}
                  >
                    Sign in
                  </Button>

                  <Link href="#" className={classes.link}>Forgot Password</Link>
        
                  

                  
                </Grid>

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',
        width: '643px',
      },
  },