Improving some styling on the click to copy component, inlining it in the pre-round screen

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

@@ -29,15 +29,17 @@ export default ({ text }) => {
       <span
         style={{
           display: hovered ? "block" : "none",
+          visibility: hovered ? "visible" : "hidden",
           backgroundColor: "black",
           color: "#fff",
           textAlign: "center",
-          padding: "1px 5px",
+          padding: "2px 8px",
           borderRadius: "8px",
           position: "absolute",
           zIndex: 1,
-          top: "-100%",
+          top: "-115%",
           whiteSpace: "nowrap",
+          opacity: ".85",
         }}
       >
         {copied ? "Copied!" : "Click to Copy"}

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

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