Turning PreRound back into a single jsx file w/ styled-components

client/src/components/screens/PreRound.jsx

@@ -0,0 +1,36 @@
+import React from "react";
+import styled from "styled-components";
+import ClickToCopy from "../util/ClickToCopy";
+import Button from "../util/Button";
+
+const Container = styled.div`
+  flex: 1;
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: center;
+  align-items: center;
+`
+
+const NameLabel = styled.span`
+  padding: 0.2em;
+`
+
+const CodeLabel = styled.span`
+  padding: 0.2em;
+  margin-bottom: 0.3em;
+`
+
+const StartButton = styled(Button)`
+  padding: 1em;
+  margin: 0.2em;
+`
+
+const PreRound = ({ gameId, playerName, onStart }) => (
+  <Container>
+    <NameLabel>Playing as {playerName}</NameLabel>
+    <CodeLabel>Game Code: <ClickToCopy text={gameId} /></CodeLabel>
+    <StartButton onClick={onStart}>Start Game</StartButton>
+  </Container>
+);
+
+export default PreRound;

client/src/components/screens/PreRound/PreRound.css

@@ -1,21 +0,0 @@
-.pre-round {
-  flex: 1;
-  display: flex;
-  flex-flow: column nowrap;
-  justify-content: center;
-  align-items: center;
-}
-
-.pre-round__name-label {
-  padding: 0.2em;
-}
-
-.pre-round__game-code {
-  padding: 0.2em;
-  margin-bottom: 0.3em;
-}
-
-.pre-round__button {
-  padding: 1em;
-  margin: 0.2em;
-}

client/src/components/screens/PreRound/PreRound.jsx

@@ -1,13 +0,0 @@
-import React from "react";
-import ClickToCopy from "../../util/ClickToCopy";
-import Button from "../../util/Button";
-
-const PreRound = ({ gameId, playerName, onStart }) => (
-  <div className="pre-round">
-    <span className="pre-round__name-label">Playing as {playerName}</span>
-    <span className="pre-round__game-code">Game Code: <ClickToCopy text={gameId} /></span>
-    <Button className="pre-round__button" onClick={onStart}>Start Game</Button>
-  </div>
-);
-
-export default PreRound;

client/src/components/screens/PreRound/index.js

@@ -1,2 +0,0 @@
-import "./PreRound.css";
-export { default } from './PreRound';