From e5e57387c4fb4de26829352f9b0106c62f7470b7 Mon Sep 17 00:00:00 2001
From: Robert Long <robert@robertlong.me>
Date: Mon, 13 Dec 2021 12:39:29 -0800
Subject: [PATCH] Fix copy button

---
 src/button/Button.jsx        |  1 +
 src/button/Button.module.css | 17 ++++++++++++++++-
 src/button/CopyButton.jsx    |  5 +++--
 3 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/src/button/Button.jsx b/src/button/Button.jsx
index 664f49d..fcb3c90 100644
--- a/src/button/Button.jsx
+++ b/src/button/Button.jsx
@@ -15,6 +15,7 @@ const variantToClassName = {
   toolbar: [styles.toolbarButton],
   icon: [styles.iconButton],
   copy: [styles.copyButton],
+  iconCopy: [styles.iconCopyButton],
 };
 
 export const Button = forwardRef(
diff --git a/src/button/Button.module.css b/src/button/Button.module.css
index ebfebc6..4da1be3 100644
--- a/src/button/Button.module.css
+++ b/src/button/Button.module.css
@@ -16,7 +16,8 @@ limitations under the License.
 
 .button,
 .toolbarButton,
-.iconButton {
+.iconButton,
+.iconCopyButton {
   position: relative;
   display: flex;
   justify-content: center;
@@ -154,3 +155,17 @@ limitations under the License.
 .copyButton.on svg * {
   stroke: white;
 }
+
+.iconCopyButton svg * {
+  fill: var(--textColor3);
+}
+
+.iconCopyButton:hover svg * {
+  fill: #0dbd8b;
+}
+
+.iconCopyButton.on svg *,
+.iconCopyButton.on:hover svg * {
+  fill: transparent;
+  stroke: #0dbd8b;
+}
diff --git a/src/button/CopyButton.jsx b/src/button/CopyButton.jsx
index 7b2829b..1f29666 100644
--- a/src/button/CopyButton.jsx
+++ b/src/button/CopyButton.jsx
@@ -4,14 +4,15 @@ import { ReactComponent as CheckIcon } from "../icons/Check.svg";
 import { ReactComponent as CopyIcon } from "../icons/Copy.svg";
 import { Button } from "./Button";
 
-export function CopyButton({ value, children, variant, ...rest }) {
+export function CopyButton({ value, children, onClassName, variant, ...rest }) {
   const [isCopied, setCopied] = useClipboard(value, { successDuration: 3000 });
 
   return (
     <Button
       {...rest}
-      variant={variant || "copy"}
+      variant={variant === "icon" ? "iconCopy" : "copy"}
       on={isCopied}
+      onClassName={onClassName}
       onPress={setCopied}
       iconStyle={isCopied ? "stroke" : "fill"}
     >