From 69227e26a3d6d061d264e49f55a0dd0b7ea064ad Mon Sep 17 00:00:00 2001
From: Catherine Deskur <46695336+chdeskur@users.noreply.github.com>
Date: Mon, 13 Jan 2025 17:45:24 -0500
Subject: [PATCH] fix: copy to clipboard ui update (#2000)

---
 packages/fern-docs/components/src/CopyToClipboardButton.tsx   | 2 +-
 .../__snapshots__/CopyToClipboardButton.test.tsx.snap         | 2 +-
 .../syntax-highlighter/src/CodeBlockWithClipboardButton.tsx   | 4 ++--
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/fern-docs/components/src/CopyToClipboardButton.tsx b/packages/fern-docs/components/src/CopyToClipboardButton.tsx
index 3e651533a9..e613b4faf9 100644
--- a/packages/fern-docs/components/src/CopyToClipboardButton.tsx
+++ b/packages/fern-docs/components/src/CopyToClipboardButton.tsx
@@ -40,7 +40,7 @@ export const CopyToClipboardButton: React.FC<CopyToClipboardButton.Props> = ({
           copyToClipboard?.();
         }) ?? (
           <FernButton
-            className={cn("fern-copy-button group", className)}
+            className={cn("fern-copy-button group backdrop-blur", className)}
             disabled={copyToClipboard == null}
             onClickCapture={(e) => {
               onClick?.(e);
diff --git a/packages/fern-docs/components/src/__test__/__snapshots__/CopyToClipboardButton.test.tsx.snap b/packages/fern-docs/components/src/__test__/__snapshots__/CopyToClipboardButton.test.tsx.snap
index 861f37e221..94d5d20daa 100644
--- a/packages/fern-docs/components/src/__test__/__snapshots__/CopyToClipboardButton.test.tsx.snap
+++ b/packages/fern-docs/components/src/__test__/__snapshots__/CopyToClipboardButton.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`CopyToClipboardButton > renders correctly 1`] = `
 <button
   aria-disabled={false}
-  className="fern-copy-button group fern-button minimal normal rounded square"
+  className="fern-copy-button group backdrop-blur fern-button minimal normal rounded square"
   data-state="closed"
   data-testid="copy-btn"
   onBlur={[Function]}
diff --git a/packages/fern-docs/syntax-highlighter/src/CodeBlockWithClipboardButton.tsx b/packages/fern-docs/syntax-highlighter/src/CodeBlockWithClipboardButton.tsx
index 98fd7855d6..115e1f3c83 100644
--- a/packages/fern-docs/syntax-highlighter/src/CodeBlockWithClipboardButton.tsx
+++ b/packages/fern-docs/syntax-highlighter/src/CodeBlockWithClipboardButton.tsx
@@ -21,8 +21,8 @@ export const CodeBlockWithClipboardButton: React.FC<
       <CopyToClipboardButton
         className={cn(
           "absolute z-20",
-          "z-10 opacity-0 transition group-hover/cb-container:opacity-100",
-          "right-1 top-1"
+          "z-10 opacity-0 backdrop-blur transition group-hover/cb-container:opacity-100",
+          "right-3 top-2"
         )}
         content={code}
       />