From 94bd76683fcae98622a516bc4cd4ca74912d3cf0 Mon Sep 17 00:00:00 2001
From: Innei <i@innei.in>
Date: Mon, 3 Jul 2023 17:21:18 +0800
Subject: [PATCH] fix: ui

Signed-off-by: Innei <i@innei.in>
---
 .../layout/header/internal/HeaderActionButton.tsx  | 10 +++++++++-
 .../layout/header/internal/HeaderDrawerButton.tsx  | 14 +-------------
 .../layout/header/internal/SiteOwnerAvatar.tsx     |  7 +++++--
 .../comment/CommentBox/UniversalTextArea.tsx       |  6 +++++-
 4 files changed, 20 insertions(+), 17 deletions(-)

diff --git a/src/components/layout/header/internal/HeaderActionButton.tsx b/src/components/layout/header/internal/HeaderActionButton.tsx
index e382bc5157..069c498839 100644
--- a/src/components/layout/header/internal/HeaderActionButton.tsx
+++ b/src/components/layout/header/internal/HeaderActionButton.tsx
@@ -1,4 +1,5 @@
 import { forwardRef } from 'react'
+import clsx from 'clsx'
 import type { ForwardRefComponent } from 'framer-motion'
 
 export const HeaderActionButton: ForwardRefComponent<
@@ -7,7 +8,12 @@ export const HeaderActionButton: ForwardRefComponent<
 > = forwardRef(({ children, ...rest }, ref) => {
   return (
     <button
-      className="group h-10 rounded-full bg-gradient-to-b from-zinc-50/50 to-white/90 px-3 text-sm shadow-lg shadow-zinc-800/5 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"
+      className={clsx(
+        'group h-10 w-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',
+        'flex center',
+      )}
       {...rest}
       ref={ref}
       aria-label="Header Action"
@@ -16,3 +22,5 @@ export const HeaderActionButton: ForwardRefComponent<
     </button>
   )
 })
+
+HeaderActionButton.displayName = 'HeaderActionButton'
diff --git a/src/components/layout/header/internal/HeaderDrawerButton.tsx b/src/components/layout/header/internal/HeaderDrawerButton.tsx
index f2f9b33785..bb1be9dea8 100644
--- a/src/components/layout/header/internal/HeaderDrawerButton.tsx
+++ b/src/components/layout/header/internal/HeaderDrawerButton.tsx
@@ -3,7 +3,6 @@
 import * as Dialog from '@radix-ui/react-dialog'
 import { AnimatePresence, m } from 'framer-motion'
 import { atom, useAtom } from 'jotai'
-import type { SVGProps } from 'react'
 
 import { CloseIcon } from '~/components/icons/close'
 import { MotionButtonBase } from '~/components/ui/button'
@@ -13,17 +12,6 @@ import { useIsClient } from '~/hooks/common/use-is-client'
 import { HeaderActionButton } from './HeaderActionButton'
 import { HeaderDrawerContent } from './HeaderDrawerContent'
 
-function IcBaselineMenuOpen(props: SVGProps<SVGSVGElement>) {
-  return (
-    <svg width="1em" height="1em" viewBox="0 0 24 24" {...props}>
-      <path
-        fill="currentColor"
-        d="M3 18h13v-2H3v2zm0-5h10v-2H3v2zm0-7v2h13V6H3zm18 9.59L17.42 12L21 8.41L19.59 7l-5 5l5 5L21 15.59z"
-      />
-    </svg>
-  )
-}
-
 export const drawerOpenAtom = atom(false)
 export const HeaderDrawerButton = () => {
   const [open, setOpen] = useAtom(drawerOpenAtom)
@@ -31,7 +19,7 @@ export const HeaderDrawerButton = () => {
   const isClient = useIsClient()
   const ButtonElement = (
     <HeaderActionButton>
-      <IcBaselineMenuOpen />
+      <i className="icon-[mingcute--menu-line]" />
     </HeaderActionButton>
   )
   if (!isClient) return ButtonElement
diff --git a/src/components/layout/header/internal/SiteOwnerAvatar.tsx b/src/components/layout/header/internal/SiteOwnerAvatar.tsx
index 0494fd9ebf..5bad050f9e 100644
--- a/src/components/layout/header/internal/SiteOwnerAvatar.tsx
+++ b/src/components/layout/header/internal/SiteOwnerAvatar.tsx
@@ -35,7 +35,7 @@ export const SiteOwnerAvatar: Component = ({ className }) => {
       onClick={handleGoLive}
       tabIndex={isLiving ? 0 : -1}
       className={clsxm(
-        'overflow pointer-events-none relative select-none rounded-md border-[1.5px] border-slate-300 dark:border-neutral-800',
+        'overflow pointer-events-none relative select-none',
 
         isLiving ? 'cursor-pointer rounded-full' : '',
         className,
@@ -46,7 +46,10 @@ export const SiteOwnerAvatar: Component = ({ className }) => {
         alt="Site Owner Avatar"
         width={40}
         height={40}
-        className={clsxm('rounded-md', isLiving ? 'rounded-full' : '')}
+        className={clsxm(
+          'rounded-md ring-2 ring-slate-200 dark:ring-neutral-800',
+          isLiving ? 'rounded-full' : '',
+        )}
       />
       {isLiving && (
         <>
diff --git a/src/components/widgets/comment/CommentBox/UniversalTextArea.tsx b/src/components/widgets/comment/CommentBox/UniversalTextArea.tsx
index 2adda47652..aa685f20e8 100644
--- a/src/components/widgets/comment/CommentBox/UniversalTextArea.tsx
+++ b/src/components/widgets/comment/CommentBox/UniversalTextArea.tsx
@@ -7,6 +7,7 @@ import dynamic from 'next/dynamic'
 
 import { useIsMobile } from '~/atoms'
 import { FloatPopover } from '~/components/ui/float-popover'
+import { preventDefault } from '~/lib/dom'
 
 import { getRandomPlaceholder } from './constants'
 import { useCommentBoxTextValue, useSetCommentBoxValues } from './hooks'
@@ -99,7 +100,10 @@ export const UniversalTextArea = () => {
 
 const EmojiButton = () => {
   return (
-    <button className="ml-4 inline-flex h-5 w-5 translate-y-1 text-base center">
+    <button
+      className="ml-4 inline-flex h-5 w-5 translate-y-1 text-base center"
+      onClick={preventDefault}
+    >
       <i className="icon-[mingcute--emoji-2-line]" />
       <span className="sr-only">表情</span>
     </button>