swap copy to clipboard octicons

components/clipboard/CopyButton.module.css

@@ -1,25 +1,19 @@
-.copy_button {
+.copy {
   position: absolute;
   top: 0;
   right: 0;
-  padding: 0.75em;
+  padding: 0.65em;
   line-height: 1;
-  color: var(--text);
+  color: var(--medium-dark);
   background-color: var(--background-inner);
   border: 1px solid var(--kinda-light);
   cursor: pointer;
 }
 
-.copy_button:hover {
+.copy:hover {
   color: var(--link);
 }
 
-.octicon {
-  width: 16px;
-  height: 16px;
-  vertical-align: text-bottom;
-}
-
-.octicon-check {
-  color: var(--success);
+.success {
+  color: var(--success) !important;
 }

components/clipboard/CopyButton.tsx

@@ -1,10 +1,12 @@
 import { useState, useEffect } from "react";
+import classNames from "classnames/bind";
 import copy from "copy-to-clipboard";
 import innerText from "react-innertext";
-import { CopyOcticon, CheckOcticon } from "../icons/octicons";
+import { PasteOcticon, CheckOcticon } from "../icons/octicons";
 import type { ReactNode } from "react";
 
 import styles from "./CopyButton.module.css";
+const cx = classNames.bind(styles);
 
 type Props = {
   source: ReactNode;
@@ -15,8 +17,6 @@ const CopyButton = ({ source, timeout = 2000 }: Props) => {
   const [copied, setCopied] = useState(false);
 
   const handleCopy = (e) => {
-    // stop browser from navigating away from page (this shouldn't happen anyways)
-    e.preventDefault();
     // prevent unintentional double-clicks by unfocusing button
     e.target.blur();
 
@@ -28,13 +28,13 @@ const CopyButton = ({ source, timeout = 2000 }: Props) => {
   };
 
   useEffect(() => {
-    // reset everything after given ms (defaults to 2 seconds)
+    // reset to original icon after given ms (defaults to 2 seconds)
     if (copied) {
-      const id = setTimeout(() => {
+      const reset = setTimeout(() => {
         setCopied(false);
       }, timeout);
 
-      return () => clearTimeout(id);
+      return () => clearTimeout(reset);
     }
 
     // eslint-disable-next-line @typescript-eslint/no-empty-function
@@ -43,16 +43,16 @@ const CopyButton = ({ source, timeout = 2000 }: Props) => {
 
   return (
     <button
-      className={styles.copy_button}
+      className={cx({ copy: true, success: !!copied })}
       title="Copy to clipboard"
       aria-label="Copy to clipboard"
       onClick={handleCopy}
-      disabled={copied}
+      disabled={!!copied}
     >
       {copied ? (
-        <CheckOcticon fill="currentColor" className={`${styles.octicon} ${styles["octicon-check"]}`} />
+        <CheckOcticon className="icon" fill="currentColor" />
       ) : (
-        <CopyOcticon fill="currentColor" className={styles.octicon} />
+        <PasteOcticon className="icon" fill="currentColor" />
       )}
     </button>
   );

components/embeds/Code.tsx

@@ -10,32 +10,29 @@ const CustomCode = (props: CustomCodeProps) => {
   if (props.className?.split(" ").includes("code-highlight")) {
     const CopyButton = dynamic(() => import("../clipboard/CopyButton"));
 
-    // full multi-line code blocks with highlight.js and copy-to-clipboard button
+    // full multi-line code blocks with prism highlighting and copy-to-clipboard button
     return (
-      <div>
-        <CopyButton source={props.children} />
-        <code {...props}>{props.children}</code>
+      <>
+        <div className="code-block">
+          <CopyButton source={props.children} />
+          <code {...props}>{props.children}</code>
+        </div>
 
-        <style jsx>{`
-          div {
+        <style jsx global>{`
+          .code-block {
             position: relative;
-            max-width: 100%;
+            width: 100%;
             overflow-x: scroll;
-            margin: 1em 0;
+            margin: 1em auto;
           }
 
-          div > code {
+          .code-highlight {
             display: block;
             overflow-x: auto;
             padding: 1em;
             tab-size: 2;
-          }
-        `}</style>
-
-        <style jsx global>{`
-          .code-highlight {
             color: var(--code-text);
-            background: var(--code-background);
+            background-color: var(--code-background);
           }
 
           /* leave room for clipboard button to the right of the first line */
@@ -119,7 +116,7 @@ const CustomCode = (props: CustomCodeProps) => {
             font-style: italic;
           }
         `}</style>
-      </div>
+      </>
     );
   } else {
     // inline code in paragraphs, headings, etc. (not highlighted)

components/icons/octicons.ts

@@ -2,5 +2,6 @@ export { default as CheckOcticon } from "./octicons/check.svg";
 export { default as CopyOcticon } from "./octicons/copy.svg";
 export { default as ForkOcticon } from "./octicons/fork.svg";
 export { default as OctocatOcticon } from "./octicons/octocat.svg";
+export { default as PasteOcticon } from "./octicons/paste.svg";
 export { default as StarOcticon } from "./octicons/star.svg";
 export { default as XOcticon } from "./octicons/x.svg";

components/icons/octicons/paste.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M5.75 1a.75.75 0 00-.75.75v3c0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75v-3a.75.75 0 00-.75-.75h-4.5zm.75 3V2.5h3V4h-3zm-2.874-.467a.75.75 0 00-.752-1.298A1.75 1.75 0 002 3.75v9.5c0 .966.784 1.75 1.75 1.75h8.5A1.75 1.75 0 0014 13.25v-9.5a1.75 1.75 0 00-.874-1.515.75.75 0 10-.752 1.298.25.25 0 01.126.217v9.5a.25.25 0 01-.25.25h-8.5a.25.25 0 01-.25-.25v-9.5a.25.25 0 01.126-.217z"></path></svg>