Create home layout with zeus background

7 files changed, 42 insertions, 17 deletions

diff --git a/frontend/src/containers/home.js b/frontend/src/containers/home.js
index e70fc867..78ff5e6e 100644
--- a/frontend/src/containers/home.js
+++ b/frontend/src/containers/home.js
@@ -1,7 +1,8 @@
 import React, { Component } from 'react'
 import { connect } from 'react-redux'
-import { Heading, InlineForm } from 'rebass'
-import { Link } from 'react-router'
+import { Button, Container, Input } from 'rebass'
+import { actions } from '../redux/players'
+
 class HomePage extends Component {
 
   play = (e) => {
@@ -13,26 +14,28 @@ class HomePage extends Component {
 
   render() {
     return (
-      <div style={{maxWidth: '500px', margin: '0 auto'}}>
-        <Heading>Enter your username to start playing!</Heading>
-        <br />
-        <InlineForm
-          buttonLabel="Play now!"
-          label="Username"
+      <Container>
+        <Input
           name="username"
+          label="Username"
+          placeholder="Username"
+          hideLabel
           onChange={(e) => this._username = e.target.value}
-          onClick={this.play}
         />
-      </div>
+        <Button
+          backgroundColor="primary"
+          color="white"
+          big
+          onClick={this.play}>
+          PLAY NOW!
+        </Button>
+      </Container>
     )
   }
 }
 
-const mapStateToProps = (state) => ({
-
-})
+const mapStateToProps = (state) => ({})
 
-import { actions } from '../redux/players'
 const mapDispatchToProps = {
   chooseUsername: actions.chooseUsername
 }
diff --git a/frontend/src/layouts/HomeLayout.js b/frontend/src/layouts/HomeLayout.js
new file mode 100644
index 00000000..1d1d3bdd
--- /dev/null
+++ b/frontend/src/layouts/HomeLayout.js
@@ -0,0 +1,16 @@
+import React from 'react'
+import {
+  Banner,
+  Container
+} from 'rebass'
+import logo from './logo-7-wonders.png'
+import background from './background-zeus-temple.jpg'
+
+export default (props) => (
+  <div>
+    <Banner align="center" backgroundImage={background}>
+      <img src={logo} alt="Seven Wonders"/>
+      {props.children}
+    </Banner>
+  </div>
+)
diff --git a/frontend/src/layouts/LobbyLayout.js b/frontend/src/layouts/LobbyLayout.js
index e6c747a7..83c210a1 100644
--- a/frontend/src/layouts/LobbyLayout.js
+++ b/frontend/src/layouts/LobbyLayout.js
@@ -2,6 +2,7 @@ import React from 'react'
 import {
   Banner,
 } from 'rebass'
+import logo from './logo-7-wonders.png'
 
 export default (props) => (
   <div>
@@ -10,7 +11,7 @@ export default (props) => (
       style={{minHeight: '30vh', marginBottom: 0}}
       backgroundImage="https://images.unsplash.com/photo-1431207446535-a9296cf995b1?dpr=1&auto=format&fit=crop&w=1199&h=799&q=80&cs=tinysrgb&crop="
     >
-      <img src="images/logo-7-wonders.png" alt="Seven Wonders Logo"/>
+      <img src={logo} alt="Seven Wonders Logo"/>
     </Banner>
     {props.children}
   </div>
diff --git a/frontend/src/layouts/background-zeus-temple.jpg b/frontend/src/layouts/background-zeus-temple.jpg
new file mode 100644
index 00000000..5a28e933
--- /dev/null
+++ b/frontend/src/layouts/background-zeus-temple.jpg
diff --git a/frontend/src/layouts/index.js b/frontend/src/layouts/index.js
index 7beb62b8..0413b647 100644
--- a/frontend/src/layouts/index.js
+++ b/frontend/src/layouts/index.js
@@ -1 +1,2 @@
+export { default as HomeLayout } from './HomeLayout'
 export { default as LobbyLayout } from './LobbyLayout'
diff --git a/frontend/src/layouts/logo-7-wonders.png b/frontend/src/layouts/logo-7-wonders.png
new file mode 100644
index 00000000..96974d3e
--- /dev/null
+++ b/frontend/src/layouts/logo-7-wonders.png
diff --git a/frontend/src/routes.js b/frontend/src/routes.js
index 70762aa2..2e95abda 100644
--- a/frontend/src/routes.js
+++ b/frontend/src/routes.js
@@ -11,7 +11,7 @@ export const makeSagaRoutes = wsConnection => ({
   }
 })
 
-import { LobbyLayout } from './layouts'
+import { HomeLayout, LobbyLayout } from './layouts'
 import HomePage from './containers/home'
 import GameBrowser from './containers/gameBrowser'
 import Error404 from './components/errors/Error404'
@@ -19,8 +19,12 @@ import Error404 from './components/errors/Error404'
 export const routes = [
   {
     path: '/',
+    component: HomeLayout,
+    indexRoute: { component: HomePage }
+  },
+  {
+    path: '/',
     component: LobbyLayout,
-    indexRoute: { component: HomePage },
     childRoutes: [
       { path: '/games', component: GameBrowser }
     ]