fix: copy to clipboard ui update (#2000)

fern-api · Jan 13, 2025 · 69227e2 · 69227e2
1 parent 3e7642c
commit 69227e2
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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}
       />