Fix home screen style

9 files changed, 32 insertions, 38 deletions

diff --git a/frontend/src/scenes/SplashScreen/index.js b/frontend/src/components/home/ChooseNameForm.jsx
index 1eee4e1b..119fc851 100644
--- a/frontend/src/scenes/SplashScreen/index.js
+++ b/frontend/src/components/home/ChooseNameForm.jsx
@@ -3,13 +3,12 @@ import { Button, Classes, InputGroup, Intent } from '@blueprintjs/core';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { actions } from '../../redux/players';
-import { HomeLayout } from './components/HomeLayout';
 
-export type SplashScreenProps = {
+export type ChooseNameFormPresenterProps = {
   chooseUsername: (username: string) => void,
 }
 
-class SplashScreenPresenter extends Component<SplashScreenProps> {
+class ChooseNameFormPresenter extends Component<ChooseNameFormPresenterProps> {
   _username = '';
 
   play = e => {
@@ -21,7 +20,6 @@ class SplashScreenPresenter extends Component<SplashScreenProps> {
 
   render() {
     return (
-      <HomeLayout>
         <form onSubmit={this.play}>
           <InputGroup
             placeholder="Username"
@@ -29,7 +27,6 @@ class SplashScreenPresenter extends Component<SplashScreenProps> {
             rightElement={this.renderSubmit()}
           />
         </form>
-      </HomeLayout>
     );
   }
 
@@ -42,4 +39,4 @@ const mapDispatchToProps = {
   chooseUsername: actions.chooseUsername,
 };
 
-export const SplashScreen = connect(null, mapDispatchToProps)(SplashScreenPresenter);
+export const ChooseNameForm = connect(null, mapDispatchToProps)(ChooseNameFormPresenter);
diff --git a/frontend/src/components/home/Home.css b/frontend/src/components/home/Home.css
new file mode 100644
index 00000000..bb89f058
--- /dev/null
+++ b/frontend/src/components/home/Home.css
@@ -0,0 +1,13 @@
+.homeRoot {
+    background: url('background-zeus-temple.jpg') center no-repeat;
+    background-size: cover;
+}
+
+.fullscreen {
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    overflow: auto;
+}
diff --git a/frontend/src/components/home/Home.jsx b/frontend/src/components/home/Home.jsx
new file mode 100644
index 00000000..91065ec7
--- /dev/null
+++ b/frontend/src/components/home/Home.jsx
@@ -0,0 +1,13 @@
+// @flow
+import * as React from 'react';
+import { Flex } from 'reflexbox';
+import { ChooseNameForm } from './ChooseNameForm';
+import './Home.css'
+import logo from './logo-7-wonders.png';
+
+export const Home = () => (
+  <Flex className='homeRoot fullscreen' column align='center' justify='center'>
+      <img src={logo} alt="Seven Wonders"/>
+      <ChooseNameForm/>
+  </Flex>
+);
diff --git a/frontend/src/scenes/SplashScreen/components/background-zeus-temple.jpg b/frontend/src/components/home/background-zeus-temple.jpg
index 5a28e933..5a28e933 100644
--- a/frontend/src/scenes/SplashScreen/components/background-zeus-temple.jpg
+++ b/frontend/src/components/home/background-zeus-temple.jpg
diff --git a/frontend/src/scenes/SplashScreen/components/logo-7-wonders.png b/frontend/src/components/home/logo-7-wonders.png
index 96974d3e..96974d3e 100644
--- a/frontend/src/scenes/SplashScreen/components/logo-7-wonders.png
+++ b/frontend/src/components/home/logo-7-wonders.png
diff --git a/frontend/src/global-styles.css b/frontend/src/global-styles.css
index a158de59..e69de29b 100644
--- a/frontend/src/global-styles.css
+++ b/frontend/src/global-styles.css
@@ -1,10 +0,0 @@
-* { box-sizing: border-box; }
-
-body {
-  margin: 0;
-  padding: 0;
-  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
-  line-height: 1.5;
-  color: #111;
-  background-color: #fff;
-}
diff --git a/frontend/src/index.js b/frontend/src/index.js
index 8e82b96a..5b6e48a0 100644
--- a/frontend/src/index.js
+++ b/frontend/src/index.js
@@ -5,7 +5,6 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
 import { ConnectedRouter } from 'react-router-redux';
-import './global-styles.css';
 import { Application } from './scenes';
 import { configureStore } from './store';
 
diff --git a/frontend/src/scenes/SplashScreen/components/HomeLayout.js b/frontend/src/scenes/SplashScreen/components/HomeLayout.js
deleted file mode 100644
index c9950f44..00000000
--- a/frontend/src/scenes/SplashScreen/components/HomeLayout.js
+++ /dev/null
@@ -1,18 +0,0 @@
-// @flow
-import type { Node } from 'react';
-import React from 'react';
-import { ErrorToastContainer } from '../../../components/errors/errorToastContainer';
-import background from './background-zeus-temple.jpg';
-import logo from './logo-7-wonders.png';
-
-export type HomeLayoutProps = {
-  children?: Node,
-}
-
-export const HomeLayout = ({children}: HomeLayoutProps) => (
-  <div style={{backgroundImage: `url(${background})`}}>
-    <img src={logo} alt="Seven Wonders"/>
-    {children}
-    <ErrorToastContainer/>
-  </div>
-);
diff --git a/frontend/src/scenes/index.js b/frontend/src/scenes/index.js
index eb15e626..c708c9a9 100644
--- a/frontend/src/scenes/index.js
+++ b/frontend/src/scenes/index.js
@@ -2,13 +2,13 @@ import React from 'react';
 import { Redirect, Route, Switch } from 'react-router-dom';
 import { GameBrowser } from '../components/game-browser/GameBrowser';
 import { Lobby } from './Lobby';
-import { SplashScreen } from './SplashScreen';
+import { Home } from '../components/home/Home';
 
 export const Application = () => (
   <Switch>
-    <Route path="/splash-screen" component={SplashScreen} />
     <Route path="/games" component={GameBrowser} />
     <Route path="/lobby" component={Lobby} />
-    <Redirect from="*" to="/splash-screen" />
+    <Route path="/" component={Home} />
+    <Redirect to="/" />
   </Switch>
 );