Extracted all styling from the game panel

client/src/App.css

@@ -215,3 +215,82 @@
 .player-scores__button {
   display: inline;
 }
+
+.game-panel {
+  height: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.game-panel__streetview {
+  height: 100%;
+  margin-right: 2px;
+  flex: 3;
+}
+
+.guess-pane {
+  height: 100%;
+  flex: 1;
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: space-around;
+}
+
+.guess-pane__timer {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.guess-pane__map {
+  flex: 6;
+  height: 100%;
+  margin: 5px;
+}
+
+.guess-pane__submit {
+  flex: 1;
+  margin: 5px;
+}
+
+.timer {
+  display: inline;
+}
+
+.timer--timeout {
+  color: red;
+}
+
+.map-div {
+  height: 100%;
+}
+
+.streetview-pane {
+  position: relative;
+  height: 100%;
+}
+
+.streetview-pane__pano-div {
+  height: 100%;
+}
+
+.streetview-pane__reset-button {
+  /* TODO improve this to be less brittle */
+  display: block;
+  position: absolute;
+  z-index: 1;
+  bottom: 200px;
+  right: 9px;
+  background-color: #2a2a2a;
+  color: #9a9a9a;
+  padding: 5px;
+  border-radius: 2px;
+  font-weight: bold;
+  cursor: pointer;
+}
+
+.streetview-pane__reset-button:hover {
+  color: #bababa;
+}

client/src/App.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import Game from "./components/game.component";
-import ApiInfo from "./components/util/api-info.component";
 import './App.css';
 
 

client/src/components/screens/game-panel.component/click-marker-map.component.jsx

@@ -28,10 +28,5 @@ export default React.memo(({
     }
   });
 
-  return (
-    <div
-      style={{ height: "100%" }}
-      ref={mapDivRef}
-    />
-  );
+  return <div className="map-div" ref={mapDivRef} />
 }, () => true);

client/src/components/screens/game-panel.component/game-panel.component.jsx

@@ -13,13 +13,8 @@ const GamePanel = ({
   onTimeout,
   submitDisabled,
 }) => (
-  <div style={{
-    height: "100%",
-    display: "flex",
-    justifyContent: "space-between",
-    alignItems: "center"
-  }}>
-    <div style={{ height: "100%", margin: "2px", flex: 3 }}>
+  <div className="game-panel">
+    <div className="game-panel__streetview">
         <PositionedStreetView position={streetViewPoint} />
     </div>
     <GuessPane

client/src/components/screens/game-panel.component/guess-pane.component.jsx

@@ -9,23 +9,15 @@ export default ({
   onSubmitGuess,
   submitDisabled,
 }) => (
-  <div
-    style={{
-      height: "100%",
-      flex: 1,
-      display: "flex",
-      flexDirection: "column",
-      justifyContent:"space-around",
-    }}
-  >
-    <div style={{ display: "flex", justifyContent: "center", alignItems: "center", flex: 1 }}>
-      <RoundTimer seconds={roundSeconds} onTimeout={onTimeout}/>
+  <div className="guess-pane">
+    <div className="guess-pane__timer">
+      <RoundTimer seconds={roundSeconds} onTimeout={onTimeout} />
     </div>
-    <div style={{ height: "100%", margin: "5px", flex: 6 }}>
+    <div className="guess-pane__map">
       <ClickMarkerMap onMarkerMoved={onSelectPoint} />
     </div>
     <button
-      style={{ margin: "5px", flex: 1 }}
+      className="btn guess-pane__submit"
       onClick={onSubmitGuess}
       disabled={submitDisabled}
     >

client/src/components/screens/game-panel.component/positioned-street-view.component.jsx

@@ -17,28 +17,9 @@ export default React.memo(({ position }) => {
   });
 
   return (
-    <div style={{ height: "100%", position: "relative" }}>
-      <div
-        style={{ height: "100%" }}
-        ref={panoDivRef}
-      />
-      <div
-        // TODO this styling is very brittle
-        style={{
-          display: "block",
-          position: "absolute",
-          zIndex: 1,
-          bottom: "200px",
-          right: "9px",
-          background: "#2a2a2a",
-          color: "#9a9a9a",
-          padding: "5px",
-          borderRadius: "2px",
-          fontWeight: "bold",
-          cursor: "pointer",
-        }}
-        ref={buttonRef}
-      >
+    <div className="streetview-pane">
+      <div className="streetview-pane__pano-div" ref={panoDivRef}/>
+      <div className="streetview-pane__reset-button" ref={buttonRef}>
         Reset
       </div>
     </div>

client/src/components/screens/game-panel.component/round-timer.component.jsx

@@ -14,5 +14,7 @@ export default ({ seconds, onTimeout }) => {
     return () => { clearInterval(timer) };
   });
 
-  return remaining > 0 ? <p>Time: {ms(remaining * 1000)}</p> : <p>Time's up!</p>
+  return remaining > 0 
+    ? <span className="timer">Time: {ms(remaining * 1000)}</span> 
+    : <span className="timer timer--timeout">Time's up!</span>
 }