Moving GuessPane styling into styled-components

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

@@ -14,34 +14,6 @@
   flex: 3;
 }
 
-.guess-pane {
-  height: 100%;
-  width: 100%;
-  flex: 1;
-  display: flex;
-  flex-flow: row nowrap;
-  justify-content: space-around;
-}
-
-.guess-pane__map {
-  flex: 3;
-  height: 100%;
-  width: 100%;
-}
-
-.guess-pane__timer-submit-wrapper {
-  flex: 1;
-  display: flex;
-  flex-flow: column nowrap;
-  justify-content: center;
-  text-align: center;
-}
-
-.guess-pane__submit {
-  flex: 1;
-  margin: 2px;
-}
-
 @media only screen and (min-width: 600px) and (min-height: 600px) {
   .game-panel {
     display: block;
@@ -52,64 +24,6 @@
     margin-bottom: 2px;
     margin-right: 2px;
   }
-
-  .guess-pane {
-    position: absolute;
-    left: 10px;
-    bottom: 10px;
-    height: 200px;
-    width: 200px;
-    flex-flow: column-reverse nowrap;
-    z-index: 1;
-    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;
-  }
-
-  .guess-pane__timer-submit-wrapper>.timer {
-    background-color: #333;
-  }
-
-  .guess-pane>.guess-pane__timer-submit-wrapper>.guess-pane__submit {
-    visibility: hidden;
-    opacity: 0;
-    transition: 1s;
-  }
-
-  .guess-pane:hover>.guess-pane__timer-submit-wrapper>.guess-pane__submit {
-    visibility: visible;
-    opacity: 1;
-    transition: 0.5s;
-  }
-
-  .guess-pane:hover {
-    height: 400px;
-    width: 400px;
-    opacity: 1;
-    transition: 0.5s;
-  }
-
-  .guess-pane__timer-submit-wrapper {
-    margin-top: 4px;
-    color: #fff;
-  }
-
-  .guess-pane__submit {
-    margin: 0px;
-    margin-bottom: 5px;
-  }
 }
 
 .streetview-pane {

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

@@ -1,8 +1,92 @@
 import React from "react";
+import styled from "styled-components";
 import ClickMarkerMap from "./ClickMarkerMap";
 import RoundTimer from "../../util/Timer";
 import Button from "../../util/Button";
 
+const Container = styled.div`
+  height: 100%;
+  width: 100%;
+  flex: 1;
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: space-around;
+
+  @media only screen and (min-width: 600px) and (min-height: 600px) {
+    position: absolute;
+    left: 10px;
+    bottom: 10px;
+    height: 200px;
+    width: 200px;
+    flex-flow: column-reverse nowrap;
+    z-index: 1;
+    opacity: .75;
+    transition: 1s;
+
+    &:hover {
+      height: 400px;
+      width: 400px;
+      opacity: 1;
+      transition: 0.5s;
+    }
+  }
+`
+
+const Map = styled.div`
+  flex: 3;
+  height: 100%;
+  width: 100%;
+
+  @media only screen and (min-width: 600px) and (min-height: 600px) {
+    opacity: .75;
+    transition: 1s;
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+`
+
+const SubmitWrapper = styled.div`
+  flex: 1;
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: center;
+  text-align: center;
+
+  @media only screen and (min-width: 600px) and (min-height: 600px) {
+    flex-flow: column-reverse nowrap;
+    margin-top: 4px;
+    color: #fff;
+
+    &>.timer {
+      background-color: #333;
+    }
+  }
+`
+
+const SubmitButton = styled(Button)`
+  flex: 1;
+  margin: 2px;
+
+  @media only screen and (min-width: 600px) and (min-height: 600px) {
+    margin: 0px;
+    margin-bottom: 5px;
+
+    ${Container} & {
+      visibility: hidden;
+      opacity: 0;
+      transition: 1s;
+    }
+
+    ${Container}:hover & {
+      visibility: visible;
+      opacity: 1;
+      transition: 0.5s;
+    }
+  }
+`
+
 export default ({
   roundSeconds,
   onTimeout,
@@ -10,19 +94,15 @@ export default ({
   onSubmitGuess,
   submitDisabled,
 }) => (
-  <div className="guess-pane">
-    <div className="guess-pane__map">
+  <Container>
+    <Map>
       <ClickMarkerMap onMarkerMoved={onSelectPoint} />
-    </div>
-    <div className="guess-pane__timer-submit-wrapper">
+    </Map>
+    <SubmitWrapper>
       <RoundTimer seconds={roundSeconds} onTimeout={onTimeout} />
-      <Button
-        className="guess-pane__submit"
-        onClick={onSubmitGuess}
-        disabled={submitDisabled}
-      >
+      <SubmitButton onClick={onSubmitGuess} disabled={submitDisabled}>
         Submit Guess
-      </Button>
-    </div>
-  </div>
+      </SubmitButton>
+    </SubmitWrapper>
+  </Container>
 );