Extracting styling of RoundSummary component

client/src/App.css

@@ -117,3 +117,45 @@
   margin: 0.2em;
 }
 
+.round-summary {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: space-around;
+  align-items: center;
+}
+
+.round-summary__info-pane {
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: center;
+  align-items: flex-start;
+}
+
+.round-summary__map {
+  display: inline;
+}
+
+.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 {
+  display: inline;
+}
+

client/src/components/screens/round-summary.component.jsx

@@ -3,12 +3,6 @@ import ClickToCopy from "../util/click-to-copy.component";
 
 // TODO eventually we want this to query and show other players
 
-const LabelAndPoint = ({ label, point }) => (
-  <div>
-    <span>{label}: <ClickToCopy text={`${point.lat},${point.lng}`}/></span>
-  </div>
-);
-
 export default ({ round, onNext }) => {
   const {
     roundNum,
@@ -26,21 +20,26 @@ export default ({ round, onNext }) => {
   const selectedMarker = selectedPoint ? `&markers=color:red|label:S|${selectedPoint.lat},${selectedPoint.lng}` : ""
 
   return (
-    <div style={{
-      display: "flex",
-      flexFlow: "column nowrap",
-      justifyContent: "space-between",
-      alignItems: "center",
-    }}>
+    <div className="round-summary">
       <img
+        className="round-summary__map"
         src={mapUrl + size + zoom + centerOnTarget + targetMarker + selectedMarker}
         alt={`Map pointing to ${targetPoint.lat},${targetPoint.lng}`}
       />
-      {selectedPoint ? <LabelAndPoint label="You Selected" point={selectedPoint}/> : <p>Timed out!</p>}
-      <LabelAndPoint label="Target" point={targetPoint}/>
-      <span>Score For Round {roundNum}: {score}</span>
-      <span>Running Total Score: {totalScore}</span>
-      <button onClick={onNext}>{roundNum === "5" ? "View Summary" : "Next Round"}</button>
+      <div className="round-summary__info-pane">
+        {selectedPoint 
+          ? <span className="round-summary__guess">
+              You selected: <ClickToCopy text={`${selectedPoint.lat}, ${selectedPoint.lng}`}/>
+            </span> 
+          : <span className="round-summary__guess round-summary__guess--timed-out">
+              Timed out!
+            </span>
+        }
+        <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>
+        <button className="btn round-summary__button" onClick={onNext}>{roundNum === "5" ? "View Summary" : "Next Round"}</button>
+      </div>
     </div>
   );
 };