Extracting styling of PreGame and sub-components

client/src/App.css

@@ -44,4 +44,54 @@
 .click-to-copy__textarea {
   position: absolute;
   top: -1000px;
+}
+
+.btn {
+  display: inline;
+}
+
+.inpt {
+  display: inline;
+}
+
+.join-game-form {
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: center;
+  align-items: center;
+}
+
+.join-game-form__label {
+  padding: 0.1em;
+}
+
+.join-game-form__input {
+  margin: 0.1em;
+}
+
+.join-game-form__btn {
+  margin: 0.1em;
+}
+
+.player-name-form {
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: center;
+  align-items: center;
+}
+
+.player-name-form__label {
+  padding: 0.2em;
+}
+
+.player-name-form__input {
+  padding: 0.1em;
+}
+
+.new-game {
+  display: inline;
+}
+
+.new-game__btn {
+  display: inline;
 }

client/src/components/screens/pre-game.component/join-game-input.component.jsx

@@ -1,15 +1,15 @@
 import React from "react";
 
 export default ({ gameId, onChangeGameId, onJoinGame, cannotJoinGame }) => (
-  <div style={{
-    display: "flex",
-    flexFlow: "column nowrap",
-    justifyContent: "center",
-    alignItems: "center",
-  }}>
-    <span style={{ padding: "0.1em" }}>Game ID:</span>
-    <input style={{ margin: "0.1em" }} type="text" value={gameId || ""} onChange={onChangeGameId} />
-    <button style={{ margin: "0.1em" }} onClick={onJoinGame} disabled={cannotJoinGame}>
+  <div className="join-game-form">
+    <span className="join-game-form__label">Game ID:</span>
+    <input 
+      className="inpt join-game-form__input" 
+      type="text" 
+      value={gameId || ""} 
+      onChange={onChangeGameId} 
+    />
+    <button className="btn join-game-form__btn" onClick={onJoinGame} disabled={cannotJoinGame}>
       Join Existing Game
     </button>
   </div>

client/src/components/screens/pre-game.component/player-name-input.component.jsx

@@ -1,13 +1,13 @@
 import React from "react";
 
 export default ({ playerName, onChangePlayerName }) => (
-  <div style={{
-    display: "flex",
-    flexFlow: "column nowrap",
-    justifyContent: "center",
-    alignItems: "center",
-  }}>
-    <span style={{ padding: "0.2em" }}>Player Name</span>
-    <input style={{ padding: "0.1em" }} type="text" value={playerName || ""} onChange={onChangePlayerName} />
+  <div className="player-name-form">
+    <span className="player-name-form__label">Player Name</span>
+    <input 
+      className="inpt player-name-form__input" 
+      type="text" 
+      value={playerName || ""} 
+      onChange={onChangePlayerName} 
+    />
   </div>
 );

client/src/components/screens/pre-game.component/pre-game.component.jsx

@@ -7,7 +7,7 @@ import { createGame, joinGame } from "../../../services/ggsh.service";
 // TODO set round timer for new game
 
 const NewGame = ({ onCreateGame, cannotCreateGame }) => (
-  <button onClick={onCreateGame} disabled={cannotCreateGame}>
+  <button className="btn new-game__btn" onClick={onCreateGame} disabled={cannotCreateGame}>
     Create New Game
   </button>
 );
@@ -38,7 +38,7 @@ const PreGame = ({ initPlayerName, onGameJoined }) => {
   const cannotJoinGame = cannotCreateGame || !gameId || gameId.length === 0;
 
   return (
-    <div>
+    <div className="new-game">
       <PlayerNameInput {...{ playerName, onChangePlayerName }} />
       <hr/>
       <NewGame {...{ onCreateGame, cannotCreateGame }} />