From b23f62f8643677c96e17dd40208f71520936f364 Mon Sep 17 00:00:00 2001
From: Benjamin Cabanes <3447705+bcabanes@users.noreply.github.com>
Date: Thu, 13 Oct 2022 17:15:57 -0400
Subject: [PATCH] docs(nxdev): optimize fence copy button (#12588)

---
 .../ui-markdoc/src/lib/nodes/fence.component.tsx | 16 +++++++++++-----
 .../lib/nodes/fences/codeOutput.component.tsx    |  2 +-
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/nx-dev/ui-markdoc/src/lib/nodes/fence.component.tsx b/nx-dev/ui-markdoc/src/lib/nodes/fence.component.tsx
index 67feb577bc..ae1dd86026 100644
--- a/nx-dev/ui-markdoc/src/lib/nodes/fence.component.tsx
+++ b/nx-dev/ui-markdoc/src/lib/nodes/fence.component.tsx
@@ -1,4 +1,7 @@
-import { ClipboardDocumentIcon } from '@heroicons/react/24/outline';
+import {
+  ClipboardDocumentCheckIcon,
+  ClipboardDocumentIcon,
+} from '@heroicons/react/24/outline';
 import React, { ReactNode, useEffect, useState } from 'react';
 // @ts-ignore
 import { CopyToClipboard } from 'react-copy-to-clipboard';
@@ -61,7 +64,7 @@ export function Fence({
     };
   }, [copied]);
   return (
-    <div className="w-full">
+    <div className="my-8 w-full">
       <div className="code-block group relative inline-flex w-auto min-w-[50%] max-w-full">
         <CopyToClipboard
           text={children}
@@ -71,10 +74,13 @@ export function Fence({
         >
           <button
             type="button"
-            className="not-prose absolute top-7 right-2 z-10 flex opacity-0 transition-opacity group-hover:opacity-100"
+            className="not-prose absolute top-0 right-0 z-10 flex rounded-tr-lg border border-slate-200 bg-slate-50/50 p-2 opacity-0 transition-opacity group-hover:opacity-100 dark:border-slate-700 dark:bg-slate-800"
           >
-            <ClipboardDocumentIcon className="h-4 w-4" />
-            <span className="ml-1 text-xs">{copied ? 'Copied!' : 'Copy'}</span>
+            {copied ? (
+              <ClipboardDocumentCheckIcon className="h-5 w-5 text-blue-500 dark:text-sky-500" />
+            ) : (
+              <ClipboardDocumentIcon className="h-5 w-5" />
+            )}
           </button>
         </CopyToClipboard>
         <SyntaxHighlighter
diff --git a/nx-dev/ui-markdoc/src/lib/nodes/fences/codeOutput.component.tsx b/nx-dev/ui-markdoc/src/lib/nodes/fences/codeOutput.component.tsx
index c959cf65ee..8cd61b25da 100644
--- a/nx-dev/ui-markdoc/src/lib/nodes/fences/codeOutput.component.tsx
+++ b/nx-dev/ui-markdoc/src/lib/nodes/fences/codeOutput.component.tsx
@@ -8,7 +8,7 @@ export function CodeOutput({
   fileName: string;
 }): JSX.Element {
   return (
-    <div className="hljs not-prose my-4 w-full overflow-x-auto rounded-lg border border-slate-200 bg-slate-50/50 font-mono text-sm dark:border-slate-700 dark:bg-slate-800/60">
+    <div className="hljs not-prose w-full overflow-x-auto rounded-lg border border-slate-200 bg-slate-50/50 font-mono text-sm dark:border-slate-700 dark:bg-slate-800/60">
       {!!fileName && (
         <div className="flex border-b border-slate-200 bg-slate-50 px-4 py-2 italic text-slate-400 dark:border-slate-700 dark:bg-slate-800/80 dark:text-slate-500">
           {fileName}