All game panel styles moved into styled-components

client/src/components/screens/GamePanel/GamePanel.css

@@ -1,27 +0,0 @@
-.game-panel {
-  height: 100%;
-  width: 100%;
-  display: flex;
-  flex-flow: column nowrap;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.game-panel__streetview {
-  height: 100%;
-  width: 100%;
-  margin-bottom: 2px;
-  flex: 3;
-}
-
-@media only screen and (min-width: 600px) and (min-height: 600px) {
-  .game-panel {
-    display: block;
-    position: relative;
-  }
-
-  .game-panel {
-    margin-bottom: 2px;
-    margin-right: 2px;
-  }
-}

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

@@ -1,10 +1,34 @@
 import React, { useState } from 'react';
+import styled from 'styled-components';
 import { sendGuess } from "../../../domain/GGSHService";
 import Loading from '../../util/Loading';
 import GuessPane from "./GuessPane";
 import PositionedStreetView from "./PositionedStreetView";
 import useRoundInfo from "./useRoundInfo";
 
+const Container = styled.div`
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: space-between;
+  align-items: center;
+
+  @media only screen and (min-width: 600px) and (min-height: 600px) {
+    display: block;
+    position: relative;
+    margin-bottom: 2px;
+    margin-right: 2px;
+  }
+`
+
+const StreetViewWrapper = styled.div`
+  height: 100%;
+  width: 100%;
+  margin-bottom: 2px;
+  flex: 3;
+`
+
 const GamePanelContainer = ({ gameId, playerName, onRoundEnd, onGameEnd }) => {
   const [submitDisabled, setSubmitDisabled] = useState(false);
   const [selectedPoint, setSelectedPoint] = useState(null);
@@ -33,10 +57,10 @@ const GamePanelContainer = ({ gameId, playerName, onRoundEnd, onGameEnd }) => {
   }
 
   return (
-    <div className="game-panel">
-      <div className="game-panel__streetview">
+    <Container>
+      <StreetViewWrapper>
           <PositionedStreetView position={targetPoint} />
-      </div>
+      </StreetViewWrapper>
       <GuessPane
         roundSeconds={roundSeconds}
         onTimeout={handleSubmitGuess}
@@ -44,7 +68,7 @@ const GamePanelContainer = ({ gameId, playerName, onRoundEnd, onGameEnd }) => {
         onSubmitGuess={handleSubmitGuess}
         submitDisabled={submitDisabled || selectedPoint === null}
       />
-    </div>
+    </Container>
   );
 }
 

client/src/components/screens/GamePanel/index.js

@@ -1,2 +1 @@
-import "./GamePanel.css";
 export { default } from './GamePanel';