Remove rebass dependency

4 files changed, 24 insertions, 28 deletions

diff --git a/frontend/src/scenes/GameBrowser/index.js b/frontend/src/scenes/GameBrowser/index.js
index 7bb8b59d..5a94e290 100644
--- a/frontend/src/scenes/GameBrowser/index.js
+++ b/frontend/src/scenes/GameBrowser/index.js
@@ -1,8 +1,8 @@
 // @flow
+import { Button, Classes, InputGroup, Intent, Text } from '@blueprintjs/core';
 import type { List } from 'immutable';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
-import { InlineForm, Space, Text } from 'rebass';
 import { Flex } from 'reflexbox';
 import { GameList } from '../../components/gameList';
 import type { Game } from '../../models/games';
@@ -38,20 +38,17 @@ class GameBrowserPresenter extends Component<GameBrowserProps> {
     return (
       <div>
         <Flex align="center" p={1}>
-          <InlineForm
-            buttonLabel="Create Game"
-            label="Game name"
-            name="game_name"
-            onChange={(e: SyntheticInputEvent<*>) => (this._gameName = e.target.value)}
-            onClick={this.createGame}
+          <InputGroup
+                  placeholder="Game name"
+                  name="game_name"
+                  onChange={(e: SyntheticInputEvent<*>) => (this._gameName = e.target.value)}
+                  rightElement={<CreateGameButton onClick={this.createGame}/>}
           />
-          <Space auto />
           <Text>
             <b>Username:</b>
             {' '}
             {this.props.currentPlayer && this.props.currentPlayer.displayName}
           </Text>
-          <Space x={1} />
         </Flex>
         <GameList games={this.props.games} joinGame={this.props.joinGame} />
       </div>
@@ -59,6 +56,10 @@ class GameBrowserPresenter extends Component<GameBrowserProps> {
   }
 }
 
+const CreateGameButton = ({onClick}) => (
+  <Button className={Classes.MINIMAL} onClick={onClick} intent={Intent.PRIMARY}>Create Game</Button>
+);
+
 const mapStateToProps = state => ({
   currentPlayer: getCurrentPlayer(state.get('players')),
   games: getAllGames(state.get('games')),
diff --git a/frontend/src/scenes/Lobby/index.js b/frontend/src/scenes/Lobby/index.js
index ad39d09e..0a427805 100644
--- a/frontend/src/scenes/Lobby/index.js
+++ b/frontend/src/scenes/Lobby/index.js
@@ -1,7 +1,8 @@
+//@flow
+import { Button } from '@blueprintjs/core';
 import { List } from 'immutable';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
-import { Button } from 'rebass';
 import { PlayerList } from '../../components/playerList';
 import type { Game } from '../../models/games';
 import type { Player } from '../../models/players';
diff --git a/frontend/src/scenes/SplashScreen/components/HomeLayout.js b/frontend/src/scenes/SplashScreen/components/HomeLayout.js
index 08029d45..c9950f44 100644
--- a/frontend/src/scenes/SplashScreen/components/HomeLayout.js
+++ b/frontend/src/scenes/SplashScreen/components/HomeLayout.js
@@ -1,7 +1,6 @@
 // @flow
 import type { Node } from 'react';
 import React from 'react';
-import { Banner } from 'rebass';
 import { ErrorToastContainer } from '../../../components/errors/errorToastContainer';
 import background from './background-zeus-temple.jpg';
 import logo from './logo-7-wonders.png';
@@ -10,12 +9,10 @@ export type HomeLayoutProps = {
   children?: Node,
 }
 
-export const HomeLayout = ({ children }: HomeLayoutProps) => (
-  <div>
-    <Banner align="center" backgroundImage={background}>
-      <img src={logo} alt="Seven Wonders" />
-      {children}
-    </Banner>
-    <ErrorToastContainer />
+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/SplashScreen/index.js b/frontend/src/scenes/SplashScreen/index.js
index 745d8ee7..5d9af862 100644
--- a/frontend/src/scenes/SplashScreen/index.js
+++ b/frontend/src/scenes/SplashScreen/index.js
@@ -2,7 +2,6 @@
 import { Button, Classes, InputGroup, Intent } from '@blueprintjs/core';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
-import { Container } from 'rebass';
 import { actions } from '../../redux/players';
 import { HomeLayout } from './components/HomeLayout';
 
@@ -23,15 +22,13 @@ class SplashScreenPresenter extends Component<SplashScreenProps> {
   render() {
     return (
       <HomeLayout>
-        <Container>
-          <form onSubmit={this.play}>
-            <InputGroup
-              placeholder="Username"
-              onChange={e => (this._username = e.target.value)}
-              rightElement={this.renderSubmit()}
-            />
-          </form>
-        </Container>
+        <form onSubmit={this.play}>
+          <InputGroup
+            placeholder="Username"
+            onChange={e => (this._username = e.target.value)}
+            rightElement={this.renderSubmit()}
+          />
+        </form>
       </HomeLayout>
     );
   }