fix: clerk style

Signed-off-by: Innei <[email protected]>

Author: Innei

src/components/layout/header/internal/HeaderActionButton.tsx

@@ -3,23 +3,25 @@ import clsx from 'clsx'
 import type { JSX } from 'react'
 
 export const HeaderActionButton = forwardRef<
-  HTMLButtonElement,
-  JSX.IntrinsicElements['button']
+  HTMLDivElement,
+  JSX.IntrinsicElements['div']
 >(({ children, ...rest }, ref) => {
   return (
-    <button
+    <div
+      role="button"
+      tabIndex={1}
       className={clsx(
         'group size-10 rounded-full bg-gradient-to-b',
-        'from-zinc-50/50 to-white/90 px-3 text-sm ring-1 ring-zinc-900/5 backdrop-blur transition dark:from-zinc-900/50 dark:to-zinc-800/90 dark:ring-white/10 dark:hover:ring-white/20',
-        'shadow-lg shadow-zinc-800/5',
+        'px-3 text-sm ring-1 ring-zinc-900/5 backdrop-blur transition dark:ring-white/10 dark:hover:ring-white/20',
+
         'flex center',
       )}
       {...rest}
       ref={ref}
       aria-label="Header Action"
     >
       {children}
-    </button>
+    </div>
   )
 })
 

src/components/modules/post/PostMetaBar.tsx

@@ -42,19 +42,21 @@ export const PostMetaBar: Component<{
             </span>
           </>
         )}
-        {!!meta.modified && isClient ? (
-          <FloatPopover
-            mobileAsSheet
-            wrapperClassName="text-xs"
-            as="span"
-            type="tooltip"
-            triggerElement="(已编辑)"
-          >
-            编辑于 <RelativeTime date={meta.modified} />
-          </FloatPopover>
-        ) : (
-          <span className="text-xs">(已编辑)</span>
-        )}
+        {meta.modified ? (
+          isClient ? (
+            <FloatPopover
+              mobileAsSheet
+              wrapperClassName="text-xs"
+              as="span"
+              type="tooltip"
+              triggerElement="(已编辑)"
+            >
+              编辑于 <RelativeTime date={meta.modified} />
+            </FloatPopover>
+          ) : (
+            <span className="text-xs">(已编辑)</span>
+          )
+        ) : null}
       </div>
 
       {!!meta.category && (

src/styles/clerk.css

@@ -11,9 +11,11 @@
 .cl-cardBox {
   @apply overflow-visible;
 }
-
+.cl-socialButtons {
+  @apply flex flex-wrap items-center justify-center;
+}
 .cl-socialButtonsIconButton {
-  @apply aspect-square rounded-md bg-accent/5 p-3;
+  @apply box-content flex aspect-square h-5 min-h-0 w-5 items-center justify-center rounded-md bg-accent/5 p-3;
 }
 .cl-footer {
   @apply hidden;