Extracting styling of App and ClickToCopy

client/src/App.css

@@ -3,3 +3,45 @@
   width: 100% !important;
   height: 100% !important;
 }
+
+.App {
+  height: 100%;
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: space-between;
+  text-align: center;
+}
+
+.click-to-copy {
+  position: relative;
+  display: inline-flex;
+  justify-content: center;
+}
+
+.click-to-copy__text {
+  border-bottom: 1px dashed black;
+}
+
+.click-to-copy__tooltip {
+  background-color: black;
+  color: white;
+  text-align: center;
+  padding: 2px 8px;
+  border-radius: 8px;
+  position: absolute;
+  z-index: 1;
+  top: -115%;
+  white-space: nowrap;
+  opacity: 0;
+  transition: opacity 0.25s;
+  opacity: 0;
+}
+
+.click-to-copy__tooltip--visible {
+  opacity: 0.75;
+}
+
+.click-to-copy__textarea {
+  position: absolute;
+  top: -1000px;
+}

client/src/App.js

@@ -6,19 +6,13 @@ import './App.css';
 
 const App = () => {
   return (
-    <div className="App" style={{
-      display: "flex",
-      flexDirection: "column",
-      justifyContent: "space-between",
-      height: "100%",
-      textAlign: "center",
-    }}>
-      <div>
+    <div className="App">
+      <div className="header">
         <p>TerrAssumptions!</p>
         <hr/>
       </div>
-        <Game style={{flex: 1}}/>
-      <div>
+      <Game/>
+      <div className="footer">
         <hr/>
         <ApiInfo/>
       </div>

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

@@ -9,7 +9,7 @@ const PreRound = ({ gameId, playerName, onStart }) => (
     alignItems: "center",
   }}>
     <span>Playing as {playerName}</span>
-    <span>Game Code: <div style={{display: "inline-flex"}}><ClickToCopy text={gameId} /></div></span>
+    <span>Game Code: <ClickToCopy text={gameId} /></span>
     <button onClick={onStart}>Start Game</button>
   </div>
 );

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

@@ -5,10 +5,7 @@ import ClickToCopy from "../util/click-to-copy.component";
 
 const LabelAndPoint = ({ label, point }) => (
   <div>
-    <span>{label}: </span>
-    <div style={{display: "inline-flex"}}>
-      <ClickToCopy text={`${point.lat},${point.lng}`}/>
-    </div>
+    <span>{label}: <ClickToCopy text={`${point.lat},${point.lng}`}/></span>
   </div>
 );
 

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

@@ -1,5 +1,8 @@
 import React, { useRef, useState } from "react";
 
+const tooltipClass = "click-to-copy__tooltip";
+const tooltipVisClass = `${tooltipClass}--visible`;
+
 export default ({ text }) => {
   const textareaRef = useRef(null);
   const [hovered, setHovered] = useState(false);
@@ -10,43 +13,24 @@ export default ({ text }) => {
     setCopied(true);
   };
 
+  const hoveredClass = hovered ? tooltipVisClass : "";
+
   return (
-    <div
-      style={{
-        position: "relative",
-        display: "flex",
-        justifyContent: "center",
-      }}
-    >
+    <div className="click-to-copy">
       <span
-        style={{ borderBottom: "1px dotted black" }}
+        className="click-to-copy__text"
         onClick={copyText}
-        onMouseOver={() => setHovered(true)}
-        onMouseOut={() => {setHovered(false); setCopied(false)}}
+        onMouseOver={() => {setCopied(false); setHovered(true)}}
+        onMouseOut={() => setHovered(false)}
       >
         {text}
       </span>
-      <span
-        style={{
-          display: hovered ? "block" : "none",
-          visibility: hovered ? "visible" : "hidden",
-          backgroundColor: "black",
-          color: "#fff",
-          textAlign: "center",
-          padding: "2px 8px",
-          borderRadius: "8px",
-          position: "absolute",
-          zIndex: 1,
-          top: "-115%",
-          whiteSpace: "nowrap",
-          opacity: ".85",
-        }}
-      >
+      <span className={`${tooltipClass} ${hoveredClass}`}>
         {copied ? "Copied!" : "Click to Copy"}
       </span>
       <textarea
         ref={textareaRef}
-        style={{ position: "absolute", top: "-1000px" }}
+        className="click-to-copy__textarea"
         value={text}
         readOnly
       />