Moved round summary styling into styled-components

client/src/components/screens/RoundSummary/RoundInfoPane.jsx

@@ -1,4 +1,5 @@
 import React from "react";
+import styled from "styled-components";
 import ClickToCopy from "../../util/ClickToCopy";
 import Button from "../../util/Button";
 import usePlayerScores from "../../../hooks/usePlayerScores";
@@ -20,28 +21,55 @@ const useTopScorer = (gameId, roundNum) => {
         top.topScore = score;
       }
     });
-  
+
   return top;
 }
 
-export default ({ gameId, selectedPoint, targetPoint, roundNum, score, totalScore, onNext }) => {
+const Container = styled.div`
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: space-between;
+  align-items: center;
+
+  @media only screen and (min-width: 600px) {
+    margin-left: 10px;
+    align-items: flex-start;
+  }
+`
+
+const TimedOut = styled.span`
+  color: red;
+`
+
+const NextButton = styled(Button)`
+  margin-top: 5px;
+  padding: 1em;
+`
+
+export default ({
+  gameId,
+  selectedPoint,
+  targetPoint,
+  roundNum,
+  score,
+  totalScore,
+  onNext
+}) => {
   const { topPlayer, topScore } = useTopScorer(gameId, roundNum);
 
   return (
-    <div className="round-summary__info-pane">
-      {selectedPoint 
-        ? <span className="round-summary__guess">
+    <Container>
+      {selectedPoint
+        ? <span>
             You selected: <ClickToCopy text={`${selectedPoint.lat}, ${selectedPoint.lng}`}/>
-          </span> 
-        : <span className="round-summary__guess round-summary__guess--timed-out">
-            Timed out!
           </span>
+        : <TimedOut>Timed out!</TimedOut>
       }
-      <span className="round-summary__target-point">Target: <ClickToCopy text={`${targetPoint.lat}, ${targetPoint.lng}`}/></span>
-      <span className="round-summary__round-score">Score For Round {roundNum}: {score}</span>
-      <span className="round-summary__total-score">Running Total Score: {totalScore}</span>
+      <span>Target: <ClickToCopy text={`${targetPoint.lat}, ${targetPoint.lng}`}/></span>
+      <span>Score For Round {roundNum}: {score}</span>
+      <span>Running Total Score: {totalScore}</span>
       {topPlayer ? <span className="round-summary__top-score">Current best is {topPlayer} with {topScore}</span> : null}
-      <Button className="round-summary__button" onClick={onNext}>{roundNum === "5" ? "View Summary" : "Next Round"}</Button>
-    </div>
+      <NextButton onClick={onNext}>{roundNum === "5" ? "View Summary" : "Next Round"}</NextButton>
+    </Container>
   );
 }

client/src/components/screens/RoundSummary/RoundSummary.css

@@ -1,55 +0,0 @@
-.round-summary {
-  flex: 1;
-  display: flex;
-  flex-flow: column nowrap;
-  justify-content: space-around;
-  align-items: center;
-}
-
-.round-summary__info-pane {
-  display: flex;
-  flex-flow: column nowrap;
-  justify-content: space-between;
-  align-items: center;
-}
-
-@media only screen and (min-width: 600px) {
-  .round-summary {
-    flex-flow: row nowrap;
-  }
-  
-  .round-summary__info-pane {
-    margin-left: 10px;
-    align-items: flex-start;
-  }
-}
-
-.round-summary__map {
-  height: 50%;
-  width: 50%;
-}
-
-.round-summary__guess {
-  display: inline;
-}
-
-.round-summary__guess--timed-out {
-  color: red;
-}
-
-.round-summary__target-point {
-  display: inline;
-}
-
-.round-summary__round-score {
-  display: inline;
-}
-
-.round-summary__total-score {
-  display: inline;
-}
-
-.round-summary__button {
-  margin-top: 5px;
-  padding: 1em;
-}

client/src/components/screens/RoundSummary/RoundSummary.jsx

@@ -4,9 +4,25 @@ import useMap from "../../../hooks/useMap";
 import useMarkedPoints from "./useMarkedPoints";
 import RoundInfoPane from "./RoundInfoPane";
 
+const Container = styled.div`
+  flex: 1;
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: space-around;
+  align-items: center;
+
+  @media only screen and (min-width: 600px) {
+    flex-flow: row nowrap;
+  }
+`
+
 const MapDiv = styled.div`
-  height: 100%;
+  height: 50%;
   width: 100%;
+
+  @media only screen and (min-width: 600px) {
+    width: 50%;
+  }
 `
 
 export default ({ gameId, round, onNext }) => {
@@ -18,13 +34,14 @@ export default ({ gameId, round, onNext }) => {
     totalScore,
   } = round;
   const mapDivRef = useRef(null);
+  // TODO dynamically determine this zoom level?
   const mapRef = useMap(mapDivRef, targetPoint.lat, targetPoint.lng, 4);
   useMarkedPoints(mapRef, selectedPoint, targetPoint);
 
   return (
-    <div className="round-summary">
-      <div className="round-summary__map"><MapDiv ref={mapDivRef} /></div>
+    <Container>
+      <MapDiv ref={mapDivRef} />
       <RoundInfoPane {...{ gameId, selectedPoint, targetPoint, roundNum, score, totalScore, onNext }}/>
-    </div>
+    </Container>
   );
 };

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

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