Cleaning up some styling

client/src/App.css

@@ -9,7 +9,6 @@
   display: flex;
   flex-flow: column nowrap;
   justify-content: space-between;
-  text-align: center;
 }
 
 .header {
@@ -217,6 +216,7 @@
 
 .game-panel {
   height: 100%;
+  width: 100%;
   display: flex;
   flex-flow: column nowrap;
   justify-content: space-between;
@@ -230,6 +230,13 @@
   flex: 3;
 }
 
+.game-panel__spacer {
+  width: 100%;
+  margin-top: -2px;
+  height: 2px;
+  background-color: black;
+}
+
 .guess-pane {
   height: 100%;
   width: 100%;
@@ -240,7 +247,7 @@
 }
 
 .guess-pane__map {
-  flex: 6;
+  flex: 3;
   height: 100%;
   width: 100%;
 }
@@ -250,6 +257,7 @@
   display: flex;
   flex-flow: column nowrap;
   justify-content: center;
+  text-align: center;
 }
 
 .guess-pane__submit {
@@ -271,10 +279,15 @@
     flex-flow: column nowrap;
   }
 
-  .guess-pane__map {
-    margin: 5px;
+  .game-panel__spacer {
+    height: 100%;
+    width: 2px;
+  }
+
+  .guess-pane__timer-submit-wrapper {
+    margin-top: 4px;
   }
-  
+
   .guess-pane__submit {
     margin: 5px;
   }
@@ -294,15 +307,18 @@
 
 .map-div {
   height: 100%;
+  width: 100%;
 }
 
 .streetview-pane {
   position: relative;
   height: 100%;
+  width: 100%;
 }
 
 .streetview-pane__pano-div {
   height: 100%;
+  width: 100%
 }
 
 .streetview-pane__reset-button {
@@ -312,8 +328,8 @@
   z-index: 1;
   bottom: 200px;
   right: 9px;
-  background-color: #2a2a2a;
-  color: #9a9a9a;
+  background-color: #222;
+  color: #666;
   padding: 5px;
   border-radius: 2px;
   font-weight: bold;
@@ -321,5 +337,5 @@
 }
 
 .streetview-pane__reset-button:hover {
-  color: #bababa;
+  color: #b1b1b1;
 }

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

@@ -17,6 +17,7 @@ const GamePanel = ({
     <div className="game-panel__streetview">
         <PositionedStreetView position={streetViewPoint} />
     </div>
+    <div className="game-panel__spacer"/>
     <GuessPane
       roundSeconds={roundSeconds}
       onTimeout={onTimeout}