From e2bc6d19d0350e32dbbab9f52f268749bac77ea0 Mon Sep 17 00:00:00 2001
From: Stuart 'Stevie' Leitch <hotblack@disasterarea.org.uk>
Date: Sun, 29 Jul 2018 16:43:33 +0100
Subject: [PATCH] Add Bulma styles

---
 package-lock.json       |  5 +++++
 package.json            |  1 +
 src/App.css             |  1 +
 src/App.js              | 28 ++++++++++++++--------------
 src/UserRegistration.js | 18 +++++++++++++++---
 5 files changed, 36 insertions(+), 17 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index c992bb9..fee34df 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1609,6 +1609,11 @@
       "resolved": "https://registry.npmjs.org/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz",
       "integrity": "sha1-hZgoeOIbmOHGZCXgPQF0eI9Wnug="
     },
+    "bulma": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/bulma/-/bulma-0.7.1.tgz",
+      "integrity": "sha512-wRSO2LXB+qI9Pyz2id+uZr4quz5aftSN7Ay1ysr1+krzVp3utD+Ci4CeKuZdrYGc800t65b7heXBL6qw2Wo/lQ=="
+    },
     "bytes": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz",
diff --git a/package.json b/package.json
index 54e1791..167877d 100644
--- a/package.json
+++ b/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",
diff --git a/src/App.css b/src/App.css
index c5c6e8a..f1f88c8 100644
--- a/src/App.css
+++ b/src/App.css
@@ -11,6 +11,7 @@
   background-color: #222;
   height: 150px;
   padding: 20px;
+  margin-bottom: 50px;
   color: white;
 }
 
diff --git a/src/App.js b/src/App.js
index b9bc581..ef40f33 100644
--- a/src/App.js
+++ b/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>
+
         );
     }
 }
diff --git a/src/UserRegistration.js b/src/UserRegistration.js
index 5a5d2ef..0191cc5 100644
--- a/src/UserRegistration.js
+++ b/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>
         );
     }