LabeledInput.css

@import '../../theme/colors.css';
.inputFields{
	width: 90%;
	max-width: none;
	height: 30px;
	border:none;
	padding-left: 20px;
	margin-top: -5px;
}
.inputHolder{
	border: thin solid $colorLightGrey;
	margin-bottom: 10px;
}

LabeledInput.js

import React from 'react';
import styles from './LabeledInput.css'
import TextInput from '../TextInput'


const LabeledInput = (props) => {
  return (
    <div className={styles.inputHolder}>
		<label>{props.label}</label>
		<TextInput placeholder={props.placeholder} value={props.value} maxlength={props.maxlength} type={props.type} onChange={props.handleChange} name={props.name} customStyles={styles.inputFields} />
	</div>
  );
};

export default LabeledInput;

Login.css

@import '../../theme/colors.css';
@import url("https://fonts.googleapis.com/css?family=Poiret+One");
.form{
	font-family: 'Poiret One', cursive, Helvetica, Helvetica Neue;
	position: relative;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 90%;
	max-width: 450px;	
	background-color: $colorWhite;
}
.submitButton{	
	background-color: $colorGreenButton;
	border: none;
}
.submitButton:hover{
	background-color: $colorGreenButton;
	border: none;	
}
label{
	width: 100%;
	padding-top: 10px;
    height: 30px;
    padding-left: 20px;
}
html{
	height: 100%
}
body{
	background-color: $colorCloud;
	height: 100%
}
.container{
	height: 100%;
	width: 100%;
}
.formHeader{
	.logo{
		height: 55px;
	}
	.heading{
		font-size: 2.5em;
		margin: 10px 0;	
		display: inline-block;
		vertical-align: top;
		height: 55px;
		width: calc(100% - 75px);
    	text-align: left;
	}
	.headerImage{
		width: 75px;
		display: inline-block;
		vertical-align: top;
		height: 55px;
	}
}
.formWrapper{
	
}
.imageContainer{
	background: url("https://files.slack.com/files-tmb/T5DUAJUMC-F8LH247QV-8be5628356/graphic-01_1024.png");
	height: 100%;
	width: 60%;
	display: inline-block;
	vertical-align: top;
	background-position: center;
}
.loginContainer{
	height: 100%;
	width: 40%;
	display: inline-block;
	background-color: $colorWhite;
	vertical-align: top;
}
.wrapper{
	height: 100%;
}
.centerText{
	position: relative;
	top:50%;
	left:50%;
	transform: translate(-50%, -50%);
	color: $colorWhite;
	width: 80%;
}
.heading{
	font-size: 2.5em;
}
.text{
	font-size: 1em;
}

Login.jsx

import React, { Component } from 'react';
import LabeledInput from '../../components/LabeledInput';
import SubmitButton from '../../components/SubmitButton';

import { connect } from 'react-redux';
import {login} from '../../reducers/auth';

import styles from './Login.css';

@connect((state) => {
  /* this function should return a black object */
  return {
    loaded: state.auth.loaded,
  };
},{
  login
})

export default class Login extends Component {
	constructor(props){
		super(props)
		this.state = {
			email : '',
			password: ''
		}
		console.log(props)
	}

	handleChange = (event) => {
		var name = event.target.name;
		var value = event.target.value;
		this.setState({[name]: value})
	}

	loginIt = (email, password) => {
		this.props.login(email, password);
	}

	handleClick = () => {
		var email = this.state.email;
		var password = this.state.password;
		this.props.login(email, password)
	}

	render(){
		const mod = this.props.route;
		var formHeaderText  = "Sign in to your NanoStack account";
		var formNameElement =  <LabeledInput placeholder="email" value={this.state.username} maxlength="30" handleChange={this.handleChange} name='email' />
		var formEmailElement = <LabeledInput placeholder="email" value={this.state.username} maxlength="30" handleChange={this.handleChange} name='email' label='Email' />
		var formPasswordElement = <LabeledInput placeholder="enter password" value={this.state.password} handleChange={this.handleChange} name='password' type='password' label='Password' />

		
		return (
				<div className = {styles.wrapper}>
					<div className = {styles.container}>
						<div className ={styles.imageContainer}>
							<div className={styles.centerText}>
								<div className={styles.heading}>NanoStack</div>
								<div className={styles.text}>We are to disrupt!</div>
							</div>
						</div>
						<div className = {styles.loginContainer}>
							<div className = {styles.form}>
								<div className={styles.formHeader}>
									<div className={styles.headerImage}><img className={styles.logo} src="https://nanostack.io/static/img/logo.png"></img></div>
									<div className={styles.heading}>NanoStack</div>
								</div>
								<div className={styles.formLabel}>{formHeaderText}</div>
								<div className={styles.formWrapper}>
									{formEmailElement}
									{formPasswordElement}
									<div className={styles.exrtraButton}>
										<div><a href=''></a></div>
									</div>
									
									 <SubmitButton text="Login" onClick={this.handleClick} customStyles={styles.submitButton} />
								</div>
							</div>
						</div>
					</div>
				</div>
			)
	}
}

Login.propTypes = {
}

TextInput.css

@import '../../theme/input.css';
@import '../../theme/typography.css';
@import '../../theme/colors.css';

.textInput{
	@extend .input;
	height: 30px;
	line-height: 30px;
	padding: 2px;
	border-radius: 2px; 
}

TextInput.jsx

import React from 'react';
import styles from './TextInput.css'


const TextInput = (props) => {
  return (
    <input placeholder={props.placeholder} maxLength={props.maxlength} type={props.type} className={styles.textInput +' '+props.customStyles} onChange={props.onChange} name={props.name}></input>
  );
};

export default TextInput;