More styling improvements, and changing code to use a pre-prepared Button component

client/src/App.css

@@ -5,6 +5,9 @@
 }
 
 .App {
+  background-color: #222;
+  color: #ccc;
+  font-weight: 500;
   height: 100%;
   display: flex;
   flex-flow: column nowrap;
@@ -62,13 +65,15 @@
   border-radius: 0px;
   border: none;
   padding: 8px;
-  background: #333;
+  background-color: #555;
   color: #fff;
   cursor: pointer;
+  font-weight: 600;
 }
 
 .btn:disabled {
   color: #777;
+  background-color: #333;
   cursor: default;
 }
 
@@ -123,8 +128,8 @@
 }
 
 .pre-game__divider {
-  margin-left: 0;
-  margin-right: 0;
+  margin-left: 75px;
+  margin-right: 75px;
   align-self: stretch;
 }
 
@@ -160,14 +165,14 @@
 }
 
 .pre-round__button {
-  padding: 0.2em;
+  padding: 1em;
   margin: 0.2em;
 }
 
 .round-summary {
   flex: 1;
   display: flex;
-  flex-flow: row nowrap;
+  flex-flow: column nowrap;
   justify-content: space-around;
   align-items: center;
 }
@@ -175,8 +180,19 @@
 .round-summary__info-pane {
   display: flex;
   flex-flow: column nowrap;
-  justify-content: center;
-  align-items: flex-start;
+  justify-content: space-between;
+  align-items: center;
+}
+
+@media only screen and (min-width: 600px) {
+  .round-summary {
+    flex-flow: row nowrap;
+  }
+  
+  .round-summary__info-pane {
+    margin-left: 10px;
+    align-items: flex-start;
+  }
 }
 
 .round-summary__map {
@@ -204,7 +220,8 @@
 }
 
 .round-summary__button {
-  display: inline;
+  margin-top: 5px;
+  padding: 1em;
 }
 
 .player-scores {
@@ -309,7 +326,6 @@
   .game-panel {
     display: block;
     position: relative;
-    flex-flow: row nowrap;
   }
 
   .game-panel {
@@ -320,15 +336,31 @@
   .guess-pane {
     position: absolute;
     left: 10px;
-    bottom: 30px;
+    bottom: 10px;
     height: 200px;
     width: 200px;
-    flex-flow: column nowrap;
+    flex-flow: column-reverse nowrap;
     z-index: 1;
     opacity: .5;
     transition: 1s;
   }
 
+  .guess-pane__timer-submit-wrapper {
+    flex-flow: column-reverse nowrap;
+  }
+
+  .guess-pane>.guess-pane__timer-submit-wrapper>.guess-pane__submit {
+    visibility: hidden;
+    opacity: 0;
+    transition: 1s;
+  }
+
+  .guess-pane:hover>.guess-pane__timer-submit-wrapper>.guess-pane__submit {
+    visibility: visible;
+    opacity: 1;
+    transition: 0.5s;
+  }
+
   .guess-pane:hover {
     height: 400px;
     width: 400px;

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

@@ -1,6 +1,7 @@
 import React from "react";
 import ClickMarkerMap from "./ClickMarkerMap";
 import RoundTimer from "../../util/Timer";
+import Button from "../../util/Button";
 
 export default ({
   roundSeconds,
@@ -15,13 +16,13 @@ export default ({
     </div>
     <div className="guess-pane__timer-submit-wrapper">
       <RoundTimer seconds={roundSeconds} onTimeout={onTimeout} />
-      <button
-        className="btn guess-pane__submit"
+      <Button
+        className="guess-pane__submit"
         onClick={onSubmitGuess}
         disabled={submitDisabled}
       >
         Submit Guess
-      </button>
+      </Button>
     </div>
   </div>
 );

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

@@ -1,6 +1,7 @@
 import React, { useRef, useEffect } from "react";
 /* global google */
 
+// TODO don't use memo to prevent re-render
 export default React.memo(({ position }) => {
   const panoDivRef = useRef(null);
   const buttonRef = useRef(null);

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

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { gameInfo } from '../../../domain/GGSHService';
 import Loading from '../../util/Loading';
+import Button from "../../util/Button";
 import PlayerScoresList from "./PlayerScoresList";
 
 const PlayerScoresContainer = ({ gameId, onReturnToStart }) => {
@@ -27,7 +28,7 @@ const PlayerScoresContainer = ({ gameId, onReturnToStart }) => {
   return (
     <div className="player-scores">
       <PlayerScoresList scores={scores} />
-      <button className="btn player-scores__button" onClick={onReturnToStart} >Return to Start</button>
+      <Button className="player-scores__button" onClick={onReturnToStart}>Return to Start</Button>
     </div>
   );
 }

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

@@ -1,4 +1,5 @@
 import React from "react";
+import Button from "../../util/Button";
 
 export default ({ gameId, onChangeGameId, onJoinGame, cannotJoinGame }) => (
   <div className="join-game-form">
@@ -9,8 +10,8 @@ export default ({ gameId, onChangeGameId, onJoinGame, cannotJoinGame }) => (
       value={gameId || ""} 
       onChange={onChangeGameId} 
     />
-    <button className="btn join-game-form__btn" onClick={onJoinGame} disabled={cannotJoinGame}>
+    <Button className="join-game-form__btn" onClick={onJoinGame} disabled={cannotJoinGame}>
       Join Existing Game
-    </button>
+    </Button>
   </div>
 );

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

@@ -1,5 +1,6 @@
 import React, { useState } from "react";
 import Loading from "../../util/Loading";
+import Button from "../../util/Button";
 import PlayerNameInput from "./PlayerNameInput";
 import JoinGameInput from "./JoinGameInput";
 import { createGame, joinGame } from "../../../domain/GGSHService";
@@ -7,9 +8,9 @@ import { createGame, joinGame } from "../../../domain/GGSHService";
 // TODO set round timer for new game
 
 const NewGame = ({ onCreateGame, cannotCreateGame }) => (
-  <button className="btn new-game__btn" onClick={onCreateGame} disabled={cannotCreateGame}>
+  <Button className="new-game__btn" onClick={onCreateGame} disabled={cannotCreateGame}>
     Create New Game
-  </button>
+  </Button>
 );
 
 const PreGame = ({ initPlayerName, onGameJoined }) => {

client/src/components/screens/PreRound.jsx

@@ -1,11 +1,12 @@
 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="btn pre-round__button" onClick={onStart}>Start Game</button>
+    <Button className="pre-round__button" onClick={onStart}>Start Game</Button>
   </div>
 );
 

client/src/components/screens/RoundSummary.jsx

@@ -1,5 +1,6 @@
 import React from "react";
 import ClickToCopy from "../util/ClickToCopy";
+import Button from "../util/Button";
 
 // TODO eventually we want this to query and show other players
 
@@ -38,7 +39,7 @@ export default ({ round, onNext }) => {
         <span className="round-summary__target-point">Target: <ClickToCopy text={`${targetPoint.lat}, ${targetPoint.lng}`}/></span>
         <span className="round-summary__round-score">Score For Round {roundNum}: {score}</span>
         <span className="round-summary__total-score">Running Total Score: {totalScore}</span>
-        <button className="btn round-summary__button" onClick={onNext}>{roundNum === "5" ? "View Summary" : "Next Round"}</button>
+        <Button className="round-summary__button" onClick={onNext}>{roundNum === "5" ? "View Summary" : "Next Round"}</Button>
       </div>
     </div>
   );

client/src/components/util/Button.jsx

@@ -0,0 +1,11 @@
+import React from "react";
+
+export default ({ className, onClick, disabled = false, children }) => (
+  <button 
+    className={`btn ${disabled ? "btn--disabled" : ""} ${className || ""}`}
+    onClick={onClick}
+    disabled={disabled}
+  >
+    {children}
+  </button>
+);