Getting the PreGame screen to work with styled-components

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

@@ -49,29 +49,3 @@
 .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: 75px;
-  margin-right: 75px;
-  align-self: stretch;
-}
-
-@media only screen and (min-width: 600px) {
-  .pre-game {
-    flex-flow: row nowrap;
-    justify-content: space-around;
-  }
-
-  .pre-game__divider {
-    margin-left: 0;
-    margin-right: 0;
-    align-self: stretch;
-  }
-}

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

@@ -1,11 +1,36 @@
 import React, { useState } from "react";
+import styled from "styled-components";
 import Loading from "../../util/Loading";
 import PlayerNameInput from "./PlayerNameInput";
-import NewGameInput from "./NewGame"
+import NewGameInput from "./NewGameInput"
 import JoinGameInput from "./JoinGameInput";
 import { createGame, joinGame } from "../../../domain/GGSHService";
 
-const PreGame = ({ initPlayerName, onGameJoined }) => {
+const Container = styled.div`
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: space-around;
+  align-items: center;
+
+  @media only screen and (min-width: 600px) {
+    flex-flow: row nowrap;
+    justify-content: space-around;
+  }
+`
+
+const Divider = styled.hr`
+  margin-left: 75px;
+  margin-right: 75px;
+  align-self: stretch;
+
+  @media only screen and (min-width: 600px) {
+    margin-left: 0;
+    margin-right: 0;
+    align-self: stretch;
+  }
+`
+
+export default ({ initPlayerName, onGameJoined }) => {
   const [loading, setLoading] = useState(false);
   const [gameId, setGameId] = useState(null);
   const [playerName, setPlayerName] = useState(initPlayerName);
@@ -32,14 +57,12 @@ const PreGame = ({ initPlayerName, onGameJoined }) => {
   const cannotJoinGame = cannotCreateGame || !gameId || gameId.length === 0;
 
   return (
-    <div className="pre-game">
+    <Container>
       <PlayerNameInput {...{ playerName, onChangePlayerName }} />
-      <hr className="pre-game__divider"/>
+      <Divider/>
       <NewGameInput {...{ onCreateGame, cannotCreateGame, timer, setTimer }} />
-      <hr className="pre-game__divider"/>
+      <Divider/>
       <JoinGameInput {...{ gameId, onChangeGameId, onJoinGame, cannotJoinGame }} />
-    </div>
+    </Container>
   );
 }
-
-export default PreGame;