Modifying the look and feel of the join game form

client/src/components/screens/Lobby/JoinForm.jsx

@@ -1,7 +1,6 @@
 import React, { useState } from "react";
 import styled from "styled-components";
 import Button from "../../util/Button";
-import Loading from "../../util/Loading";
 import { dispatch, usePlayerName } from "../../../domain/gameStore";
 
 const FormInput = styled.input`
@@ -17,10 +16,19 @@ const FormInput = styled.input`
 
 const NameInputGroup = styled.div`
   display: flex;
-  flex-flow: row nowrap;
+  flex-flow: column nowrap;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 1em;
+
+  @media only screen and (min-width: 600px) and (min-height: 600px) {
+    flex-flow: row nowrap;
+  }
+`
+
+const ErrMsg = styled.div`
+  height: 1em;
+  text-align: center;
 `
 
 const JoinForm = () => {
@@ -28,12 +36,9 @@ const JoinForm = () => {
   const [loading, setLoading] = useState(false);
   const [failed, setFailed] = useState(false);
 
-  if (loading) {
-    return <Loading/>
-  }
-
   const onJoinGame = async () => {
     // TODO would like to support re-joining a game you left
+    setFailed(false);
     setLoading(true);
     try {
       await dispatch.joinGame();
@@ -44,11 +49,10 @@ const JoinForm = () => {
       return;
     }
   };
-  const cannotJoinGame = !playerName || playerName.length === 0;
+  const cannotJoinGame = loading || !playerName || playerName.length === 0;
 
   return (
-    <>
-      {failed && "Failed to join the game! Maybe try a different name?"}
+    <div>
       <NameInputGroup>
         Enter your name to join:
         <FormInput
@@ -59,7 +63,8 @@ const JoinForm = () => {
         />
         <Button onClick={onJoinGame} disabled={cannotJoinGame}>Join Game</Button>
       </NameInputGroup>
-    </>
+      <ErrMsg>{failed ? "Failed to join the game! Maybe try a different name?" : ""}</ErrMsg>
+    </div>
   );
 };