JoinForm now uses css module

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

@@ -1,42 +1,13 @@
-import React, { useState } from "react";
-import styled from "styled-components";
-import { dispatch, usePlayerName } from "../../../domain/gameStore";
-
-const FormInput = styled.input`
-  border-radius: 0px;
-  border: #666 solid 1px;
-  background-color: #181a1b;
-  color: #eee;
-  padding: 0.5em;
-  margin-left: 2em;
-  margin-right: 2em;
-  height: 100%;
-`
-
-const NameInputGroup = styled.div`
-  display: flex;
-  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;
-`
+import React, { useState } from 'react';
+import { dispatch, usePlayerName } from '../../../domain/gameStore';
+import styles from './Lobby.module.css';
 
 export default ({ onJoined }) => {
   const playerName = usePlayerName();
-  const [loading, setLoading] = useState(false);
-  const [failed, setFailed] = useState(false);
+  const [ loading, setLoading ] = useState(false);
+  const [ failed, setFailed ] = useState(false);
 
   const onJoinGame = async () => {
-    // TODO would like to support re-joining a game you left
     setFailed(false);
     setLoading(true);
     try {
@@ -53,17 +24,24 @@ export default ({ onJoined }) => {
 
   return (
     <>
-      <NameInputGroup>
-        Enter your name to join:
-        <FormInput
+      <div className={styles.join}>
+        <span className={styles.label}>Enter your name to join:</span>
+        <input
+          className={styles.name}
           type="text"
-          value={playerName || ""} 
+          value={playerName || ''}
           onChange={({ target }) => dispatch.setPlayerName(target.value)}
-          onKeyDown={({ key }) => { if (key === "Enter") { onJoinGame() }}}
+          onKeyDown={({ key }) => {
+            if (key === 'Enter') {
+              onJoinGame();
+            }
+          }}
         />
-        <button onClick={onJoinGame} disabled={cannotJoinGame}>Join Game</button>
-      </NameInputGroup>
-      <ErrMsg>{failed ? "Failed to join the game! Maybe try a different name?" : ""}</ErrMsg>
+        <button onClick={onJoinGame} disabled={cannotJoinGame}>
+          Join Game
+        </button>
+      </div>
+      <div className={styles.error}>{failed ? 'Failed to join the game! Maybe try a different name?' : ''}</div>
     </>
   );
 };

client/src/components/screens/Lobby/Lobby.module.css

@@ -42,4 +42,34 @@
   border-left: 2px solid #777;
   height: 100%;
   padding-left: 1rem;
-}
+}
+
+.join {
+  display: flex;
+  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) {
+  .join {
+    flex-flow: row nowrap;
+  }
+}
+
+.name {
+  border-radius: 0px;
+  border: #666 solid 1px;
+  background-color: #181a1b;
+  color: #eee;
+  padding: 0px 0.5em 0px 0.5em;
+  margin-left: 2em;
+  margin-right: 2em;
+  height: 100%;
+}
+
+.error {
+  height: 1em;
+  text-align: center;
+}