Fixing home page and putting in global button styles

client/src/components/screens/GamePanel/GuessPane.jsx

@@ -2,7 +2,6 @@ import React, { useState } from "react";
 import styled from "styled-components";
 import ClickMarkerMap from "./ClickMarkerMap";
 import RoundTimer from "./RoundTimer";
-import Button from "../../util/Button";
 import { dispatch } from "../../../domain/gameStore";
 
 const Container = styled.div`
@@ -66,7 +65,7 @@ const SubmitWrapper = styled.div`
   }
 `
 
-const SubmitButton = styled(Button)`
+const SubmitButton = styled.button`
   flex: 1;
   margin: 2px;
 

client/src/components/screens/HomePage/HomePage.jsx

@@ -6,8 +6,8 @@ import GameCreationForm from '../../util/GameCreationForm';
 import styles from './HomePage.module.css';
 
 const Rejoin = () => (
-  <div className={styles.rejoinGame}>
-    <span className={styles.rejoinGameLabel}>Looks like you were in a game before that you didn't finish!</span>
+  <div className={styles.rejoinSection}>
+    <span className={styles.rejoinLabel}>Looks like you were in a game before that you didn't finish!</span>
     <DelayedButton onEnd={() => dispatch.rejoinGame()} countDownFormatter={(rem) => `Rejoining in ${rem}s...`}>
       Rejoin Game?
     </DelayedButton>
@@ -15,7 +15,7 @@ const Rejoin = () => (
 );
 
 export default () => (
-  <div className={styles.homePage}>
+  <div className={styles.page}>
     <GameCreationForm afterCreate={(gameId) => dispatch.goToLobby(gameId)} />
     {hasSavedGameInfo() && <Rejoin />}
   </div>

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

@@ -1,16 +1,16 @@
-.home_page {
+.page {
   height: 100%;
   display: flex;
-  flex-flow: column nowrap;
-  justify-content: center;
+  flex-flow: column-reverse nowrap;
+  justify-content: space-around;
   align-items: center;
 }
 
-.rejoin_game__label {
+.rejoinLabel {
   margin-bottom: 0.5em;
 }
 
-.rejoin_game {
+.rejoinSection {
   display: flex;
   flex-flow: column nowrap;
   justify-content: flex-end;

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

@@ -1,6 +1,5 @@
 import React, { useState } from "react";
 import styled from "styled-components";
-import Button from "../../util/Button";
 import { dispatch, usePlayerName } from "../../../domain/gameStore";
 
 const FormInput = styled.input`
@@ -62,7 +61,7 @@ export default ({ onJoined }) => {
           onChange={({ target }) => dispatch.setPlayerName(target.value)}
           onKeyDown={({ key }) => { if (key === "Enter") { onJoinGame() }}}
         />
-        <Button onClick={onJoinGame} disabled={cannotJoinGame}>Join Game</Button>
+        <button onClick={onJoinGame} disabled={cannotJoinGame}>Join Game</button>
       </NameInputGroup>
       <ErrMsg>{failed ? "Failed to join the game! Maybe try a different name?" : ""}</ErrMsg>
     </>

client/src/components/screens/PlayerScores/LinkedGame.jsx

@@ -1,6 +1,5 @@
 import React from "react";
 import styled from "styled-components";
-import Button from "../../util/Button";
 import { dispatch } from '../../../domain/gameStore';
 import { linkGame } from '../../../domain/apiMethods';
 import GameCreationForm from '../../util/GameCreationForm';
@@ -12,7 +11,7 @@ const LinkedGameContainer = styled.div`
   margin-bottom: 1em;
 `
 
-const StyledButton = styled(Button)`
+const StyledButton = styled.button`
   margin-top: 0.5em;
 `
 

client/src/components/screens/RoundSummary/NextRoundButton.jsx

@@ -2,10 +2,9 @@ import React from "react";
 import styled from "styled-components";
 import { dispatch, useCurrentRound } from "../../../domain/gameStore";
 import DelayedButton from "../../util/DelayedButton";
-import Button from "../../util/Button";
 
 
-const FinishedButton = styled(Button)`
+const FinishedButton = styled.button`
   margin-top: 5px;
   padding: 1em;
 `

client/src/components/screens/RoundSummary/getColorGenerator.js

@@ -19,13 +19,9 @@ const getColorGenerator = () => {
       [0.45, q, 0.9],
       [t, 0.45, 0.9],
       [0.9, 0.45, q],
-    ])[h_i].map(component => {
-      const converted = Math.floor(component * 256).toString(16);
-      if (converted.length === 1) {
-        return "0" + converted;
-      }
-      return converted;
-    }).reduce((x, y) => x + y);
+    ])[h_i].map(
+      component => Math.floor(component * 256).toString(16).padStart(2, "0")
+    ).reduce((x, y) => x + y);
   };
 
   return nextColor

client/src/components/util/Button.jsx

@@ -1,17 +0,0 @@
-import styled from "styled-components";
-
-export default styled.button`
-  border-radius: 0px;
-  border: none;
-  padding: 8px;
-  background-color: #555;
-  color: #fff;
-  font-weight: 600;
-  cursor: pointer;
-
-  &:disabled {
-    color: #777;
-    background-color: #333;
-    cursor: default;
-  }
-`

client/src/components/util/DelayedButton.jsx

@@ -1,5 +1,4 @@
 import React, { useState } from "react";
-import Button from "./Button";
 import useCountdown from "../../hooks/useCountdown";
 
 const CountdownButton = ({ 
@@ -11,9 +10,9 @@ const CountdownButton = ({
   const [remaining, pause] = useCountdown(seconds, onEnd);
 
   return (
-    <Button onClick={() => { pause(); onCancelled(); }}>
+    <button onClick={() => { pause(); onCancelled(); }}>
       {remaining !== 0 ? formatter(remaining) : "Starting!"}
-    </Button>
+    </button>
   );
 }
 
@@ -32,9 +31,9 @@ const DelayedButton = ({
         formatter={countDownFormatter ?? JSON.stringify}
         seconds={seconds ?? 5}
       /> 
-    : <Button onClick={() => setDelayed(true)}>
+    : <button onClick={() => setDelayed(true)}>
         {children}
-      </Button>
+      </button>
 }
 
 export default DelayedButton;

client/src/components/util/GameCreationForm.jsx

@@ -2,7 +2,6 @@ import React, { useState } from "react";
 import styled from "styled-components";
 import ms from "pretty-ms";
 import Loading from "./Loading";
-import Button from "./Button";
 import { createGame } from "../../domain/apiMethods";
 import Dropdown from "./Dropdown";
 import { MAP_CRUNCH, RANDOM_STREET_VIEW, URBAN } from "../../domain/genMethods";
@@ -23,7 +22,7 @@ const DropdownContainer = styled.div`
   align-items: flex-start;
 `;
 
-const StartButton = styled(Button)`
+const StartButton = styled.button`
   flex: 1;
   margin-bottom: 5px;
 `

client/src/index.css

@@ -15,6 +15,22 @@ code {
     monospace;
 }
 
+button {
+  border-radius: 0px;
+  border: none;
+  padding: 8px;
+  background-color: #555;
+  color: #fff;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+button:disabled {
+  color: #777;
+  background-color: #333;
+  cursor: default;
+}
+
 #root {
   position: absolute;
   width: 100% !important;