Changing the inputs over to styled components and wokring on the PreGame screen

client/src/App.css

@@ -18,15 +18,6 @@
   text-align: center;
 }
 
-.App .click-to-copy__text {
-  border-bottom: 1px dashed #ccc;
-}
-
-.inpt {
-  border-radius: 0px;
-  border: black solid 1px;
-}
-
 .map-div {
   height: 100%;
   width: 100%;

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

@@ -1,17 +1,37 @@
 import React from "react";
+import styled from "styled-components";
 import Button from "../../util/Button";
+import Input from "../../util/Input";
+
+const Container = styled.div`
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: center;
+  align-items: center;
+`
+
+const Label = styled.span`
+  padding: 0.1em;
+`
+
+const FormInput = styled(Input)`
+  padding: 0.5em;
+`
+
+const FormButton = styled(Button)`
+  margin: 0.1em;
+`
 
 export default ({ gameId, onChangeGameId, onJoinGame, cannotJoinGame }) => (
-  <div className="join-game-form">
-    <span className="join-game-form__label">Game ID:</span>
-    <input 
-      className="inpt join-game-form__input" 
+  <Container>
+    <Label>Game ID:</Label>
+    <FormInput 
       type="text" 
       value={gameId || ""} 
       onChange={onChangeGameId} 
     />
-    <Button className="join-game-form__btn" onClick={onJoinGame} disabled={cannotJoinGame}>
+    <FormButton onClick={onJoinGame} disabled={cannotJoinGame}>
       Join Existing Game
-    </Button>
-  </div>
+    </FormButton>
+  </Container>
 );

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

@@ -0,0 +1,23 @@
+import React from "react";
+import Button from "../../util/Button";
+import ms from "pretty-ms";
+
+export default ({ onCreateGame, cannotCreateGame, timer, setTimer }) => {
+  return (
+    <div className="new-game">
+      <div className="new-game__dropdown">
+        <div className="new-game__dropdown-button">
+          Round Timer: {ms(timer * 1000)}
+        </div>
+        <div className="new-game__dropdown-items">
+          <div className="new-game__dropdown-option" onClick={() => setTimer(30)}>30 Seconds</div>
+          <div className="new-game__dropdown-option" onClick={() => setTimer(300)}>5 Minutes</div>
+          <div className="new-game__dropdown-option" onClick={() => setTimer(3600)}>1 Hour</div>
+        </div>
+      </div>
+      <Button className="new-game__btn" onClick={onCreateGame} disabled={cannotCreateGame}>
+        Create New Game
+      </Button>
+    </div>
+  );
+};

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

@@ -1,13 +1,29 @@
 import React from "react";
+import styled from "styled-components";
+import Input from "../../util/Input";
+
+const Container = styled.div`
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: center;
+  align-items: center;
+`
+
+const Label = styled.span`
+  padding: 0.2em;
+`
+
+const FormInput = styled(Input)`
+  padding: 0.5em;
+`
 
 export default ({ playerName, onChangePlayerName }) => (
-  <div className="player-name-form">
-    <span className="player-name-form__label">Player Name</span>
-    <input 
-      className="inpt player-name-form__input" 
+  <Container>
+    <Label>Player Name</Label>
+    <FormInput
       type="text" 
       value={playerName || ""} 
       onChange={onChangePlayerName} 
     />
-  </div>
+  </Container>
 );

client/src/components/screens/PreGame/PreGame.css

@@ -1,38 +1,3 @@
-
-.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 {
-  padding: 0.5em;
-}
-
-.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.5em;
-}
-
 .new-game {
   display: flex;
   flex-flow: column-reverse nowrap;

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

@@ -1,30 +1,9 @@
 import React, { useState } from "react";
 import Loading from "../../util/Loading";
-import Button from "../../util/Button";
 import PlayerNameInput from "./PlayerNameInput";
+import NewGameInput from "./NewGame"
 import JoinGameInput from "./JoinGameInput";
 import { createGame, joinGame } from "../../../domain/GGSHService";
-import ms from "pretty-ms";
-
-const NewGame = ({ onCreateGame, cannotCreateGame, timer, setTimer }) => {
-  return (
-    <div className="new-game">
-      <div className="new-game__dropdown">
-        <div className="new-game__dropdown-button">
-          Round Timer: {ms(timer * 1000)}
-        </div>
-        <div className="new-game__dropdown-items">
-          <div className="new-game__dropdown-option" onClick={() => setTimer(30)}>30 Seconds</div>
-          <div className="new-game__dropdown-option" onClick={() => setTimer(300)}>5 Minutes</div>
-          <div className="new-game__dropdown-option" onClick={() => setTimer(3600)}>1 Hour</div>
-        </div>
-      </div>
-      <Button className="new-game__btn" onClick={onCreateGame} disabled={cannotCreateGame}>
-        Create New Game
-      </Button>
-    </div>
-  );
-};
 
 const PreGame = ({ initPlayerName, onGameJoined }) => {
   const [loading, setLoading] = useState(false);
@@ -56,7 +35,7 @@ const PreGame = ({ initPlayerName, onGameJoined }) => {
     <div className="pre-game">
       <PlayerNameInput {...{ playerName, onChangePlayerName }} />
       <hr className="pre-game__divider"/>
-      <NewGame {...{ onCreateGame, cannotCreateGame, timer, setTimer }} />
+      <NewGameInput {...{ onCreateGame, cannotCreateGame, timer, setTimer }} />
       <hr className="pre-game__divider"/>
       <JoinGameInput {...{ gameId, onChangeGameId, onJoinGame, cannotJoinGame }} />
     </div>

client/src/components/util/Input.jsx

@@ -0,0 +1,6 @@
+import styled from "styled-components";
+
+export default styled.input`
+  border-radius: 0px;
+  border: black solid 1px;
+`

package.json

@@ -1,5 +1,8 @@
 {
   "dependencies": {
     "styled-components": "^4.4.0"
+  },
+  "devDependencies": {
+    "@types/styled-components": "^4.1.19"
   }
 }

yarn.lock

@@ -120,6 +120,36 @@
   resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.4.tgz#a87b4b04e5ae14a88d48ebef15015f6b7d1f5677"
   integrity sha512-kBa+cDHOR9jpRJ+kcGMsysrls0leukrm68DmFQoMIWQcXdr2cZvyvypWuGYT7U+9kAExUE7+T7r6G3C3A6L8MQ==
 
+"@types/prop-types@*":
+  version "15.7.3"
+  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.3.tgz#2ab0d5da2e5815f94b0b9d4b95d1e5f243ab2ca7"
+  integrity sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==
+
+"@types/react-native@*":
+  version "0.60.17"
+  resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.60.17.tgz#3a4c2f3ebe1942fb267bba9374f0533c0ece261c"
+  integrity sha512-dvPdLYxrU74bU14GvGV+f1EMjyD6L2iDenEzDfUBWhxn7KKRgkWb289r2EIN+10XqvRP+H7YBgl+AoEHEfkcTA==
+  dependencies:
+    "@types/prop-types" "*"
+    "@types/react" "*"
+
+"@types/react@*":
+  version "16.9.5"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.5.tgz#079dabd918b19b32118c25fd00a786bb6d0d5e51"
+  integrity sha512-jQ12VMiFOWYlp+j66dghOWcmDDwhca0bnlcTxS4Qz/fh5gi6wpaZDthPEu/Gc/YlAuO87vbiUXL8qKstFvuOaA==
+  dependencies:
+    "@types/prop-types" "*"
+    csstype "^2.2.0"
+
+"@types/styled-components@^4.1.19":
+  version "4.1.19"
+  resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-4.1.19.tgz#535b455d7744fda1608c605df82c0800eda61a09"
+  integrity sha512-nDkoTQ8ItcJiyEvTa24TwsIpIfNKCG+Lq0LvAwApOcjQ8OaeOOCg66YSPHBePHUh6RPt1LA8aEzRlgWhQPFqPg==
+  dependencies:
+    "@types/react" "*"
+    "@types/react-native" "*"
+    csstype "^2.2.0"
+
 ansi-styles@^3.2.1:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.2.1.tgz#41fbb20243e50b12be0f04b8dedbf07520ce841d"
@@ -182,6 +212,11 @@ css-to-react-native@^2.2.2:
     css-color-keywords "^1.0.0"
     postcss-value-parser "^3.3.0"
 
+csstype@^2.2.0:
+  version "2.6.6"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.6.tgz#c34f8226a94bbb10c32cc0d714afdf942291fc41"
+  integrity sha512-RpFbQGUE74iyPgvr46U9t1xoQBM8T4BL8SxrN66Le2xYAPSaDJJKeztV3awugusb3g3G9iL8StmkBBXhcbbXhg==
+
 debug@^4.1.0:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.1.1.tgz#3b72260255109c6b589cee050f1d516139664791"