Some further refactoring of pre game into sub components

ui/src/components/pre-game.component.jsx

@@ -10,32 +10,40 @@ const initialState = playerName => ({
   playerName,
 });
 
-const NewGame = ({ playerName, onChangePlayerName, onCreateGame, cannotCreateGame }) => (
-  <div>
-    <p>Player Name</p>
-    <input type="text" value={playerName} onChange={onChangePlayerName} />
-    <hr/>
-    <button onClick={onCreateGame} disabled={cannotCreateGame}>
-      Create New Game
-    </button>
+const PlayerName = ({ 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>
 );
 
+const NewGame = ({ onCreateGame, cannotCreateGame }) => (
+  <button onClick={onCreateGame} disabled={cannotCreateGame}>
+    Create New Game
+  </button>
+);
+
 const JoinGame = ({ gameId, onChangeGameId, onJoinGame, cannotJoinGame }) => (
-  <div>
-    <p>Game ID:</p>
-    <input type="text" value={gameId} onChange={onChangeGameId} />
-    <br/>
-    <button onClick={onJoinGame} disabled={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}>
       Join Existing Game
     </button>
   </div>
 );
 
-const PreGame = ({
-  initPlayerName,
-  onGameJoined
-}) => {
+const PreGame = ({ initPlayerName, onGameJoined }) => {
   const [state, setState] = useState(initialState(initPlayerName));
   const { loading, gameId, playerName } = state;
 
@@ -61,7 +69,9 @@ const PreGame = ({
 
   return (
     <div>
-      <NewGame {...{ playerName, onChangePlayerName, onCreateGame, cannotCreateGame }} />
+      <PlayerName {...{ playerName, onChangePlayerName }} />
+      <hr/>
+      <NewGame {...{ onCreateGame, cannotCreateGame }} />
       <hr/>
       <JoinGame {...{ gameId, onChangeGameId, onJoinGame, cannotJoinGame }} />
     </div>