Cleaning up JoinForm and pulling out LobbyInfo from Lobby

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 Input from "../../util/Input";
 import Loading from "../../util/Loading";
 import { dispatch, useGameId, usePlayerName } from "../../../domain/gameStore";
 
@@ -9,7 +8,11 @@ const Label = styled.span`
   padding: 0.2em;
 `
 
-const FormInput = styled(Input)`
+const FormInput = styled.input`
+  border-radius: 0px;
+  border: #666 solid 1px;
+  background-color: #181a1b;
+  color: #eee;
   padding: 0.5em;
 `
 
@@ -60,4 +63,4 @@ const JoinForm = () => {
   );
 };
 
-export default JoinForm;
+export default JoinForm;

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

@@ -1,11 +1,10 @@
 import React from "react";
 import styled from "styled-components";
-import ClickToCopy from "../../util/ClickToCopy";
 import LobbyPlayerList from "./LobbyPlayerList";
-import DelayedButton from "../../util/DelayedButton";
 import HeaderAndFooter from "../../util/HeaderAndFooter";
-import { dispatch, useGameId, usePlayerName, useGameJoined } from "../../../domain/gameStore";
+import { useGameJoined } from "../../../domain/gameStore";
 import JoinForm from "./JoinForm";
+import LobbyInfo from "./LobbyInfo";
 
 const InfoContainer = styled.div`
   flex: 3;
@@ -17,16 +16,6 @@ const InfoContainer = styled.div`
   align-items: center;
 `
 
-const Label = styled.span`
-  padding: 0.2em;
-`
-
-const StyledDelayButton = styled(DelayedButton)`
-  padding: 1em;
-  margin: 0.2em;
-  margin-top: 0.3em;
-`
-
 const PageContainer = styled.div`
   flex: 1;
   display: flex;
@@ -35,31 +24,6 @@ const PageContainer = styled.div`
   align-items: flex-start;
 `
 
-const getUrl = gameId => {
-  const u = new URL(window.location.href);
-  u.searchParams.append("join", gameId);
-  return u.href;
-}
-
-const LobbyInfo = () => {
-  const gameId = useGameId();
-  const playerName = usePlayerName();
-
-  return (
-    <>
-      <Label>Playing as {playerName}</Label>
-      <Label>Use this link to invite other players:</Label>
-      <Label><ClickToCopy text={getUrl(gameId)} /></Label>
-      <StyledDelayButton 
-        onEnd={dispatch.startRound} 
-        countDownFormatter={rem => `Click to cancel, ${rem}s...`}
-      >
-        Start Game
-      </StyledDelayButton>
-    </>
-  )
-};
-
 const Lobby = ({ onStart }) => {
   const joined = useGameJoined();
 

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

@@ -0,0 +1,42 @@
+import React from "react";
+import styled from "styled-components";
+import ClickToCopy from "../../util/ClickToCopy";
+import DelayedButton from "../../util/DelayedButton";
+import { dispatch, useGameId, usePlayerName } from "../../../domain/gameStore";
+
+const Label = styled.span`
+  padding: 0.2em;
+`
+
+const StyledDelayButton = styled(DelayedButton)`
+  padding: 1em;
+  margin: 0.2em;
+  margin-top: 0.3em;
+`
+
+const getUrl = gameId => {
+  const u = new URL(window.location.href);
+  u.searchParams.append("join", gameId);
+  return u.href;
+}
+
+const LobbyInfo = () => {
+  const gameId = useGameId();
+  const playerName = usePlayerName();
+
+  return (
+    <>
+      <Label>Playing as {playerName}</Label>
+      <Label>Use this link to invite other players:</Label>
+      <Label><ClickToCopy text={getUrl(gameId)} /></Label>
+      <StyledDelayButton 
+        onEnd={dispatch.startRound} 
+        countDownFormatter={rem => `Click to cancel, ${rem}s...`}
+      >
+        Start Game
+      </StyledDelayButton>
+    </>
+  )
+};
+
+export default LobbyInfo;

client/src/components/util/Input.jsx

@@ -1,8 +0,0 @@
-import styled from "styled-components";
-
-export default styled.input`
-  border-radius: 0px;
-  border: #666 solid 1px;
-  background-color: #181a1b;
-  color: #eee;
-`