Moving street view pano styling into styled-component

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

@@ -25,33 +25,3 @@
     margin-right: 2px;
   }
 }
-
-.streetview-pane {
-  position: relative;
-  height: 100%;
-  width: 100%;
-}
-
-.streetview-pane__pano-div {
-  height: 100%;
-  width: 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: #222;
-  color: #666;
-  padding: 5px;
-  border-radius: 2px;
-  font-weight: bold;
-  cursor: pointer;
-}
-
-.streetview-pane__reset-button:hover {
-  color: #b1b1b1;
-}

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

@@ -1,5 +1,36 @@
 import React, { useRef } from "react";
 import usePano from "./usePano";
+import styled from "styled-components";
+
+const Container = styled.div`
+  position: relative;
+  height: 100%;
+  width: 100%;
+`
+
+const Pano = styled.div`
+  height: 100%;
+  width: 100%;
+`
+
+const ResetButton = styled.div`
+  /* TODO improve this to be less brittle */
+  display: block;
+  position: absolute;
+  z-index: 1;
+  bottom: 200px;
+  right: 9px;
+  background-color: #222;
+  color: #666;
+  padding: 5px;
+  border-radius: 2px;
+  font-weight: bold;
+  cursor: pointer;
+
+  &:hover {
+    color: #b1b1b1;
+  }
+`
 
 // TODO don't use memo to prevent re-render
 export default ({ position }) => {
@@ -7,11 +38,11 @@ export default ({ position }) => {
   const panoRef = usePano(panoDivRef, position);
 
   return (
-    <div className="streetview-pane">
-      <div className="streetview-pane__pano-div" ref={panoDivRef}/>
-      <div className="streetview-pane__reset-button" onClick={() => panoRef.current.setPosition(position)}>
+    <Container>
+      <Pano ref={panoDivRef}/>
+      <ResetButton onClick={() => panoRef.current.setPosition(position)}>
         Reset
-      </div>
-    </div>
+      </ResetButton>
+    </Container>
   );
 };