Add some basic styles

src/app.css

@@ -1,6 +1,46 @@
+button {
+  background-color: #4b73c8;
+  color: #fff;
+  border-radius: 4px;
+  border: 0px solid transparent;
+  padding: 40px;
+  font-size: 1.25em;
+  cursor: pointer;
+}
+button:hover {
+  background-color: #2e68e5;
+}
+button:focus {
+  background-color: #345bac;
+}
 body {
   margin: 0;
 }
+a {
+  color: unset;
+  text-decoration: unset;
+}
 .app {
   color: #333;
+  font-family: sans-serif;
+  font-size: 1.5em;
+}
+.app .nav {
+  display: flex;
+  direction: flex-row;
+  justify-content: space-between;
+  align-items: center;
+  height: 100px;
+}
+.app .title,
+.app .balance {
+  padding: 20px;
+}
+.app .congratulations,
+.app .home,
+.app .pay,
+.app .prove,
+.app .start {
+  margin-top: 50px;
+  text-align: center;
 }

src/components/App.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import { withBalance } from '../wrappers/web3'
+import { Link } from 'react-router-dom'
 
 class App extends Component {
   render() {
@@ -8,7 +9,10 @@ class App extends Component {
     return (
       <div className="app">
         <div className="nav">
-          <div>Balance (in Wei): {balance}</div>
+          <div className="title">
+            <Link to='/'>tBTC</Link>
+          </div>
+          <div className="balance">Balance (in Wei): {balance}</div>
         </div>
         { children }
       </div>

src/components/Congratulations.js

@@ -1,7 +1,9 @@
 import React from 'react';
 
 const Congratulations = () => (
-  <button>View on Etherscan</button>
+  <div className="congratulations">
+    <button>View on Etherscan</button>
+  </div>
 )
 
 export default Congratulations

src/components/Home.js

@@ -1,7 +1,9 @@
 import React from 'react';
 
 const Home = ({ history }) => (
-  <button onClick={() => {history.push('/start')}}>Make a Deposit</button>
+  <div className="home">
+    <button onClick={() => {history.push('/start')}}>Make a Deposit</button>
+  </div>
 )
 
 export default Home

src/components/Pay.js

@@ -1,15 +1,19 @@
 import React from 'react';
 
 const Pay = ({ confirming, history }) => {
+  let button;
+
   if (confirming) {
-    return (
-      <button onClick={() => {history.push('/prove')}}>Confirming...</button>
-    )
+    button = <button onClick={() => {history.push('/prove')}}>Confirming...</button>
   } else {
-    return (
-      <button onClick={() => {history.push('/pay/confirming')}}>Send BTC "here"</button>
-    )
+      button = <button onClick={() => {history.push('/pay/confirming')}}>Send BTC "here"</button>
   }
+
+  return (
+    <div className="pay">
+      {button}
+    </div>
+  )
 }
 
 export default Pay

src/components/Prove.js

@@ -1,7 +1,9 @@
 import React from 'react';
 
 const Prove = ({ history }) => (
-  <button onClick={() => {history.push('/congratulations')}}>Submit Proof</button>
+  <div className="prove">
+    <button onClick={() => {history.push('/congratulations')}}>Submit Proof</button>
+  </div>
 )
 
 export default Prove

src/components/Start.js

@@ -1,7 +1,9 @@
 import React from 'react';
 
 const Start = ({ history }) => (
-  <button onClick={() => {history.push('/pay')}}>Pay</button>
+  <div className="start">
+    <button onClick={() => {history.push('/pay')}}>Pay</button>
+  </div>
 )
 
 export default Start

src/css/app.less

@@ -1,9 +1,35 @@
 @import 'colors.less';
+@import 'button.less';
+
 
 body {
     margin: 0;
 }
 
+a {
+    color: unset;
+    text-decoration: unset;
+}
+
 .app {
     color: @black;
+    font-family: sans-serif;
+    font-size: 1.5em;
+
+    .nav {
+        display: flex;
+        direction: flex-row;
+        justify-content: space-between;
+        align-items: center;
+        height: 100px;
+    }
+
+    .title, .balance {
+        padding: 20px;
+    }
+
+    .congratulations, .home, .pay, .prove, .start {
+        margin-top: 50px;
+        text-align: center;
+    }
 }

src/css/button.less

@@ -0,0 +1,17 @@
+button {
+    background-color: @blue;
+    color: @white;
+    border-radius: 4px;
+    border: 0px solid transparent;
+    padding: 40px;
+    font-size: 1.25em;
+    cursor: pointer;
+
+    &:hover {
+        background-color: saturate(@blue, 25%);
+    }
+
+    &:focus {
+        background-color: darken(@blue, 10%);
+    }
+}

src/css/colors.less

@@ -1,2 +1,3 @@
 @white: #fff;
-@black: #333;
+@black: #333;
+@blue: rgb(75, 115, 200);