fix copy button css

src/components/CopyButton.js

@@ -1,6 +1,7 @@
 import React, { Component } from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
+  addButtonErrorStateTransition,
   addButtonSuccessStateTransition,
   allowCopyClipboardItem,
   copyDomToClipboard,
@@ -47,8 +48,11 @@ export default class CopyButton extends Component {
               }
               if (!this.props.disableFrame && this.props.elementToCopy)
                 this.props.elementToCopy.classList.remove("framed-border");
-              if (!error)
-                addButtonSuccessStateTransition(this.copyButtonRef.current);
+              if (error) {
+                addButtonErrorStateTransition(this.copyButtonRef.current);
+                return;
+              }
+              addButtonSuccessStateTransition(this.copyButtonRef.current);
             }
           );
         },
@@ -67,6 +71,7 @@ export default class CopyButton extends Component {
           );
         },
         imageType: "image/png",
+        backgroundColor: "#FFF",
         ...this.props.options?this.props.options:{}
       }
     );
@@ -80,7 +85,7 @@ export default class CopyButton extends Component {
       <button
         ref={this.copyButtonRef}
         onClick={this.handleCopy}
-        className={`button-default button-secondary rounded print-hidden exclude-from-copy ${
+        className={`copy button-default button-secondary rounded print-hidden exclude-from-copy ${
           this.state.copyInProgress ? "button--loading" : ""
         }`}
         title={buttonTitle}

src/helpers/utility.js

@@ -387,7 +387,7 @@ export function copyDomToClipboard(domElement, options) {
       }
     })
     .catch((e) => {
-      alert("Error! Unable to copy content to clipboard! " + e);
+      //alert("Error! Unable to copy content to clipboard! " + e);
       console.log(e);
       console.log("passed param ", params);
       if (params.afterCopy) {
@@ -472,3 +472,14 @@ export function addButtonSuccessStateTransition(buttonRef, transitionDuration) {
     transitionDuration || 1000
   );
 }
+
+export function addButtonErrorStateTransition(buttonRef, transitionDuration) {
+  if (!buttonRef) return;
+  buttonRef.classList.add("button--loaded");
+  buttonRef.classList.add("error");
+  clearTimeout(buttonTransitionId);
+  buttonTransitionId = setTimeout(() => {
+    buttonRef.classList.remove("button--loaded");
+    buttonRef.classList.remove("error");
+  }, transitionDuration || 1000);
+}

src/styles/elements/_button.scss

@@ -95,6 +95,36 @@ button.disabled {
     transform: rotate(45deg);
 }
 
+.button--loaded.copy:after {
+  content: "copied!";
+  position: absolute;
+  top: 0;
+  left: -36px;
+  right: 0;
+  bottom: 0;
+  margin: auto;
+  width: 8px;
+  height: 20px;
+  border: 0;
+  color: green;
+  transform: rotate(0);
+}
+
+.button--loaded.error:after {
+  content: "error!";
+  position: absolute;
+  top: 2px;
+  left: -36px;
+  right: 0;
+  bottom: 0;
+  margin: auto;
+  width: 8px;
+  height: 20px;
+  border: 0;
+  color: $color-alert;
+  transform: rotate(0);
+}
+
 @keyframes button-loading-spinner {
   from {
     transform: rotate(0turn);