Converting button to styled component

client/src/App.css

@@ -22,22 +22,6 @@
   border-bottom: 1px dashed #ccc;
 }
 
-.btn {
-  border-radius: 0px;
-  border: none;
-  padding: 8px;
-  background-color: #555;
-  color: #fff;
-  cursor: pointer;
-  font-weight: 600;
-}
-
-.btn:disabled {
-  color: #777;
-  background-color: #333;
-  cursor: default;
-}
-
 .inpt {
   border-radius: 0px;
   border: black solid 1px;

client/src/components/util/Button.jsx

@@ -1,11 +1,17 @@
-import React from "react";
+import styled from "styled-components";
 
-export default ({ className, onClick, disabled = false, children }) => (
-  <button 
-    className={`btn ${disabled ? "btn--disabled" : ""} ${className || ""}`}
-    onClick={onClick}
-    disabled={disabled}
-  >
-    {children}
-  </button>
-);
+export default styled.button`
+  border-radius: 0px;
+  border: none;
+  padding: 8px;
+  background-color: #555;
+  color: #fff;
+  font-weight: 600;
+  cursor: pointer;
+
+  &:disabled {
+    color: #777;
+    background-color: #333;
+    cursor: default;
+  }
+`

client/src/components/util/ClickToCopy/ClickToCopy.jsx

@@ -1,7 +1,6 @@
 import React, { useState } from "react";
 import styled from "styled-components";
 import useCopying from "./useCopying";
-import CopyingTooltip from "./CopyingTooltip";
 
 const Container = styled.div`
   position: relative;
@@ -13,6 +12,20 @@ const UnderlinedSpan = styled.span`
   border-bottom: 1px dashed #bbb;
 `
 
+const ToolTip = styled.span`
+  background-color: black;
+  color: white;
+  text-align: center;
+  padding: 2px 8px;
+  border-radius: 8px;
+  position: absolute;
+  z-index: 1;
+  top: -115%;
+  white-space: nowrap;
+  transition: opacity 0.25s;
+  opacity: ${({ show }) => show ? 0.75 : 0};
+`
+
 export default ({ text }) => {
   const [textareaChild, copyText] = useCopying(text);
   const [hovered, setHovered] = useState(false);
@@ -27,7 +40,9 @@ export default ({ text }) => {
       >
         {text}
       </UnderlinedSpan>
-      <CopyingTooltip hovered={hovered} copied={copied}/>
+      <ToolTip show={hovered}>
+        {copied ? "Copied!" : "Click to Copy"}
+      </ToolTip>
       {textareaChild}
     </Container>
   )

client/src/components/util/ClickToCopy/CopyingTooltip.jsx

@@ -1,22 +0,0 @@
-import React from "react";
-import styled from "styled-components";
-
-const ToolTip = styled.span`
-  background-color: black;
-  color: white;
-  text-align: center;
-  padding: 2px 8px;
-  border-radius: 8px;
-  position: absolute;
-  z-index: 1;
-  top: -115%;
-  white-space: nowrap;
-  transition: opacity 0.25s;
-  opacity: ${({ hovered }) => hovered ? 0.75 : 0};
-`
-
-export default ({ copied, hovered }) => (
-  <ToolTip hovered={hovered}>
-    {copied ? "Copied!" : "Click to Copy"}
-  </ToolTip>
-);