Login workflow (#137)

* Use collection label instead of name on the CollectionPage

* Added Avatar and logout menu item

* [feat](login) Added userpic with a logout action in the dropdown.

- Display logged in user in the AppHeader
- Implemented logout action and store + tests
- Better styles for GitHub sign in screen

Closes #100

* Better styles for the AppHeader

src/backends/github/AuthenticationPage.css

@@ -0,0 +1,11 @@
+.root {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+
+.button {
+  padding: .25em 1em;
+  height: auto;
+}

src/backends/github/AuthenticationPage.js

@@ -1,14 +1,17 @@
 import React from 'react';
+import Button from 'react-toolbox/lib/button';
 import Authenticator from '../../lib/netlify-auth';
+import { Icon } from '../../components/UI';
+import styles from './AuthenticationPage.css';
 
 export default class AuthenticationPage extends React.Component {
   static propTypes = {
-    onLogin: React.PropTypes.func.isRequired
+    onLogin: React.PropTypes.func.isRequired,
   };
 
   state = {};
 
-  handleLogin = e => {
+  handleLogin = (e) => {
     e.preventDefault();
     let auth;
     if (document.location.host.split(':')[0] === 'localhost') {
@@ -29,9 +32,17 @@ export default class AuthenticationPage extends React.Component {
   render() {
     const { loginError } = this.state;
 
-    return <div>
-      {loginError && <p>{loginError}</p>}
-      <p><a href="#" onClick={this.handleLogin}>Login with GitHub</a></p>
-    </div>;
+    return (
+      <section className={styles.root}>
+        {loginError && <p>{loginError}</p>}
+        <Button
+          className={styles.button}
+          raised
+          onClick={this.handleLogin}
+        >
+          <Icon type="github" /> Login with GitHub
+        </Button>
+      </section>
+    );
   }
 }