Style tweaking on the actual game page

client/src/App.css

@@ -290,13 +290,6 @@
   flex: 3;
 }
 
-.game-panel__spacer {
-  width: 100%;
-  margin-top: -2px;
-  height: 2px;
-  background-color: black;
-}
-
 .guess-pane {
   height: 100%;
   width: 100%;
@@ -325,14 +318,14 @@
   margin: 2px;
 }
 
-@media only screen and (min-width: 600px) {
+@media only screen and (min-width: 600px) and (min-height: 600px) {
   .game-panel {
     display: block;
     position: relative;
   }
 
   .game-panel {
-    margin-bottom: 0px;
+    margin-bottom: 2px;
     margin-right: 2px;
   }
 
@@ -344,10 +337,19 @@
     width: 200px;
     flex-flow: column-reverse nowrap;
     z-index: 1;
-    opacity: .5;
+    opacity: .75;
+    transition: 1s;
+  }
+
+  .guess-pane__map {
+    opacity: .75;
     transition: 1s;
   }
 
+  .guess-pane__map:hover {
+    opacity: 1;
+  }
+
   .guess-pane__timer-submit-wrapper {
     flex-flow: column-reverse nowrap;
   }
@@ -371,22 +373,20 @@
     transition: 0.5s;
   }
 
-  .game-panel__spacer {
-    height: 0px;
-    width: 0px;
-  }
-
   .guess-pane__timer-submit-wrapper {
     margin-top: 4px;
     color: #fff;
   }
 
   .guess-pane__submit {
-    margin: 5px;
+    margin: 0px;
+    margin-bottom: 5px;
   }
 }
 
 .timer {
+  background-color: #333;
+  padding: 1px;
   display: inline;
 }
 

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

@@ -44,7 +44,6 @@ const GamePanelContainer = ({ gameId, playerName, onRoundEnd, onGameEnd }) => {
       <div className="game-panel__streetview">
           <PositionedStreetView position={targetPoint} />
       </div>
-      <div className="game-panel__spacer"/>
       <GuessPane
         roundSeconds={roundSeconds}
         onTimeout={handleSubmitGuess}