Adding click to copy to the round summary page

client/src/components/click-to-copy.component.jsx

@@ -37,6 +37,7 @@ export default ({ text }) => {
           position: "absolute",
           zIndex: 1,
           top: "-100%",
+          whiteSpace: "nowrap",
         }}
       >
         {copied ? "Copied!" : "Click to Copy"}
@@ -49,4 +50,4 @@ export default ({ text }) => {
       />
     </div>
   )
-}
+}

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

@@ -1,8 +1,18 @@
 import React from "react";
 import withGoogleApiKey from "./with-google-key.component";
+import ClickToCopy from "./click-to-copy.component";
 
 // TODO eventually we want this to query and show other players
 
+const LabelAndPoint = ({ label, point }) => (
+  <div>
+    <span>{label}: </span>
+    <div style={{display: "inline-flex"}}>
+      <ClickToCopy text={`${point.lat},${point.lng}`}/>
+    </div>
+  </div>
+);
+
 const RoundSummary = ({ googleApiKey, round, onNext }) => {
   const {
     roundNum,
@@ -20,19 +30,21 @@ const RoundSummary = ({ googleApiKey, round, onNext }) => {
   const selectedMarker = selectedPoint ? `&markers=color:red|label:S|${selectedPoint.lat},${selectedPoint.lng}` : ""
 
   return (
-    <div>
+    <div style={{
+      display: "flex",
+      flexFlow: "column nowrap",
+      justifyContent: "space-between",
+      alignItems: "center",
+    }}>
       <img 
         src={mapUrl + size + zoom + centerOnTarget + targetMarker + selectedMarker}
         alt={`Map pointing to ${targetPoint.lat},${targetPoint.lng}`}
       />
-      {selectedPoint ? <p>You Selected: {`${selectedPoint.lat},${selectedPoint.lng}`}</p> : <p>Timed out!</p>}
-      <p>Target: {targetPoint.lat},{targetPoint.lng}</p>
-      <p>Score For Round {roundNum}: {score}</p>
-      <p>Running Total Score: {totalScore}</p>
-      <button
-        onClick={onNext}>
-        {roundNum === "5" ? "View Summary" : "Next Round"}
-      </button>
+      {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>
   );
 }