From a94194e1cd1e2d99b8972455bd7af51a5de6669a Mon Sep 17 00:00:00 2001
From: Innei <i@innei.in>
Date: Sun, 3 Mar 2024 23:19:59 +0800
Subject: [PATCH] fix: update copy button

Signed-off-by: Innei <i@innei.in>
---
 .../ui/code-highlighter/CodeHighlighter.tsx         |  3 ---
 src/components/ui/code-highlighter/shiki/Shiki.tsx  | 13 +++++--------
 2 files changed, 5 insertions(+), 11 deletions(-)

diff --git a/src/components/ui/code-highlighter/CodeHighlighter.tsx b/src/components/ui/code-highlighter/CodeHighlighter.tsx
index 80f1bf1b0b..5048bd04bd 100644
--- a/src/components/ui/code-highlighter/CodeHighlighter.tsx
+++ b/src/components/ui/code-highlighter/CodeHighlighter.tsx
@@ -136,9 +136,6 @@ const useLoadHighlighter = (ref: React.RefObject<HTMLElement>) => {
           })
         } else {
           requestAnimationFrame(() => {
-            window.Prism?.highlightAll()
-            // highlightAll twice
-
             requestAnimationFrame(() => {
               window.Prism?.highlightAll()
             })
diff --git a/src/components/ui/code-highlighter/shiki/Shiki.tsx b/src/components/ui/code-highlighter/shiki/Shiki.tsx
index 08a52e77ca..bc22290b14 100644
--- a/src/components/ui/code-highlighter/shiki/Shiki.tsx
+++ b/src/components/ui/code-highlighter/shiki/Shiki.tsx
@@ -132,10 +132,7 @@ export const ShikiHighLighter: FC<Props> = (props) => {
       {!filename && !!language && (
         <div
           aria-hidden
-          className={clsxm(
-            'pointer-events-none absolute bottom-2 right-2 z-10 text-sm opacity-60',
-            isOverflow ? 'right-6' : '',
-          )}
+          className="pointer-events-none absolute bottom-2 right-2 z-10 text-sm opacity-60"
         >
           {language.toUpperCase()}
         </div>
@@ -144,9 +141,9 @@ export const ShikiHighLighter: FC<Props> = (props) => {
         <MotionButtonBase
           onClick={handleCopy}
           className={clsx(
-            'text-xscenter absolute right-2 top-[calc(1rem-3px)] z-[1] flex rounded border border-current p-2',
-            'dark:bg-primary-300/10 rounded-md border border-black/5 bg-accent/5 p-1.5 text-gray-600 duration-200 hover:text-gray-900 dark:border-white/10 dark:text-gray-400 dark:hover:text-gray-50',
-            'opacity-0 group-hover:opacity-60',
+            'absolute right-2 top-[calc(1rem-3px)] z-[1] flex rounded border border-current p-2 text-xs center',
+            'rounded-md border border-black/5 bg-accent/80 p-1.5 text-white backdrop-blur duration-200 dark:border-white/10',
+            'opacity-0 group-hover:opacity-100',
           )}
         >
           <i className="icon-[mingcute--copy-2-fill] h-4 w-4" />
@@ -178,7 +175,7 @@ export const ShikiHighLighter: FC<Props> = (props) => {
               className={`absolute bottom-0 left-0 right-0 flex justify-center py-2 duration-200 ${
                 ['mask-both-lg', 'mask-b-lg'].includes(maskClassName)
                   ? ''
-                  : 'opacity-0'
+                  : 'pointer-events-none opacity-0'
               }`}
             >
               <button