Improving styling on the PreGame screen

client/src/App.css

@@ -59,11 +59,22 @@
 }
 
 .btn {
-  display: inline;
+  border-radius: 0px;
+  border: none;
+  padding: 8px;
+  background: #333;
+  color: #fff;
+  cursor: pointer;
+}
+
+.btn:disabled {
+  color: #777;
+  cursor: default;
 }
 
 .inpt {
-  display: inline;
+  border-radius: 0px;
+  border: black solid 1px;
 }
 
 .join-game-form {
@@ -78,7 +89,7 @@
 }
 
 .join-game-form__input {
-  margin: 0.1em;
+  padding: 0.5em;
 }
 
 .join-game-form__btn {
@@ -97,17 +108,40 @@
 }
 
 .player-name-form__input {
-  padding: 0.1em;
-}
-
-.new-game {
-  text-align: center;
+  padding: 0.5em;
 }
 
 .new-game__btn {
   display: inline;
 }
 
+.pre-game {
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: space-around;
+  align-items: center;
+}
+
+.pre-game__divider {
+  margin-left: 0;
+  margin-right: 0;
+  align-self: stretch;
+}
+
+@media only screen and (min-width: 600px) {
+  .pre-game {
+    flex-flow: row nowrap;
+    justify-content: space-around;
+    /* align-items: stretch; */
+  }
+
+  .pre-game__divider {
+    margin-left: 0;
+    margin-right: 0;
+    align-self: stretch;
+  }
+}
+
 .pre-round {
   flex: 1;
   display: flex;

client/src/components/screens/PreGame/PreGame.jsx

@@ -38,11 +38,11 @@ const PreGame = ({ initPlayerName, onGameJoined }) => {
   const cannotJoinGame = cannotCreateGame || !gameId || gameId.length === 0;
 
   return (
-    <div className="new-game">
+    <div className="pre-game">
       <PlayerNameInput {...{ playerName, onChangePlayerName }} />
-      <hr/>
+      <hr className="pre-game__divider"/>
       <NewGame {...{ onCreateGame, cannotCreateGame }} />
-      <hr/>
+      <hr className="pre-game__divider"/>
       <JoinGameInput {...{ gameId, onChangeGameId, onJoinGame, cannotJoinGame }} />
     </div>
   );