Add Bulma styles

package.json

@@ -9,6 +9,7 @@
   "license": "MIT",
   "author": "Stuart 'Stevie' Leitch",
   "dependencies": {
+    "bulma": "^0.7.1",
     "enzyme": "^3.3.0",
     "enzyme-adapter-react-16": "^1.1.1",
     "react": "^16.4.1",

src/App.css

@@ -11,6 +11,7 @@
   background-color: #222;
   height: 150px;
   padding: 20px;
+  margin-bottom: 50px;
   color: white;
 }
 

src/App.js

@@ -5,26 +5,26 @@ import {UserRegistration} from "./UserRegistration";
 
 class App extends Component {
 
-    constructor(props) {
-        super(props);
-    }
-
     handleUserRegistration = (username, password) => {
         alert('New user registered: ' + username);
-    }
+    };
 
     render() {
         return (
-            <div className="App">
-                <header className="App-header">
-                    <img src={logo} className="App-logo" alt="logo"/>
-                    <h1 className="App-title">Welcome to React</h1>
-                </header>
-                <p className="App-intro">
-                    To get started, edit <code>src/App.js</code> and save to reload.
-                </p>
-                <UserRegistration onSubmit={this.handleUserRegistration}/>
+            <div>
+                <div className="App">
+                    <header className="App-header">
+                        <img src={logo} className="App-logo" alt="logo"/>
+                        <h1 className="App-title">Welcome to React</h1>
+                    </header>
+                </div>
+                <div className="columns">
+                    <div className="column box is-one-third is-offset-one-third">
+                        <UserRegistration onSubmit={this.handleUserRegistration}/>
+                    </div>
+                </div>
             </div>
+
         );
     }
 }

src/UserRegistration.js

@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import 'bulma/css/bulma.css'
 
 export class UserRegistration extends Component {
 
@@ -25,9 +26,20 @@ export class UserRegistration extends Component {
     render() {
         return (
             <div>
-                <input name="username" type={'text'} className={'username'} onChange={this.handleInputChange}/>
-                <input name="password" type={'password'} className={'password'} onChange={this.handleInputChange}/>
-                <button onClick={this.handleSubmit}>Submit</button>
+                <h1 className="title">Create an account</h1>
+                <div className="field">
+                    <label className="label">Username</label>
+                    <div className="control">
+                        <input name="username" type={'text'} className="input username" onChange={this.handleInputChange}/>
+                    </div>
+                </div>
+                <div className="field">
+                    <label className="label">Password</label>
+                    <div className="control">
+                        <input name="password" type={'password'} className="input password" onChange={this.handleInputChange}/>
+                    </div>
+                </div>
+                <button className="button is-primary" onClick={this.handleSubmit}>Submit</button>
             </div>
         );
     }