From 18e7bdd8c568a52cf8f612b21ed704c6fd1f40d2 Mon Sep 17 00:00:00 2001
From: Innei <i@innei.in>
Date: Sun, 9 Jul 2023 11:29:33 +0800
Subject: [PATCH] fix: ui improve

Signed-off-by: Innei <i@innei.in>
---
 src/components/widgets/note/NoteActionAside.tsx          | 1 +
 src/components/widgets/post/PostActionAside.tsx          | 1 +
 .../widgets/shared/WithArticleSelectionAction.tsx        | 9 +++++++--
 3 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/components/widgets/note/NoteActionAside.tsx b/src/components/widgets/note/NoteActionAside.tsx
index 9bb537fd92..dbd792ccb2 100644
--- a/src/components/widgets/note/NoteActionAside.tsx
+++ b/src/components/widgets/note/NoteActionAside.tsx
@@ -153,6 +153,7 @@ const ShareButton = () => {
         else {
           present({
             title: '分享此内容',
+            clickOutsideToDismiss: true,
             content: () => <ShareModal text={text} title={title} url={url} />,
           })
         }
diff --git a/src/components/widgets/post/PostActionAside.tsx b/src/components/widgets/post/PostActionAside.tsx
index 4c8270b711..728466eea0 100644
--- a/src/components/widgets/post/PostActionAside.tsx
+++ b/src/components/widgets/post/PostActionAside.tsx
@@ -150,6 +150,7 @@ const ShareButton = () => {
         else {
           present({
             title: '分享此内容',
+            clickOutsideToDismiss: true,
             content: () => <ShareModal text={text} title={title} url={url} />,
           })
         }
diff --git a/src/components/widgets/shared/WithArticleSelectionAction.tsx b/src/components/widgets/shared/WithArticleSelectionAction.tsx
index 34e33bdb17..bd2e53e77b 100644
--- a/src/components/widgets/shared/WithArticleSelectionAction.tsx
+++ b/src/components/widgets/shared/WithArticleSelectionAction.tsx
@@ -1,4 +1,5 @@
 import { useEffect, useRef, useState } from 'react'
+import clsx from 'clsx'
 import { AnimatePresence, m } from 'framer-motion'
 
 import { useIsMobile } from '~/atoms'
@@ -68,8 +69,10 @@ export const WithArticleSelectionAction: Component<{
       <AnimatePresence>
         {show && (
           <m.div
-            className="absolute z-10 rounded-md border border-slate-200/90 bg-slate-100 px-4 py-3 text-sm dark:border-neutral-800/90 dark:bg-zinc-900"
-            data-event="selection-action"
+            className={clsx(
+              'absolute z-10 rounded-lg bg-gradient-to-b from-zinc-50/50 to-white/90 p-1 text-sm shadow-lg shadow-zinc-800/5 ring-1 ring-zinc-900/5',
+              'dark:from-zinc-900/50 dark:to-zinc-800/90 dark:ring-white/10 dark:hover:ring-white/20',
+            )}
             style={{
               left: pos.x,
               top: pos.y,
@@ -82,6 +85,8 @@ export const WithArticleSelectionAction: Component<{
             }}
           >
             <MotionButtonBase
+              data-event="selection-comment"
+              className="rounded-md px-2 py-1 hover:bg-slate-100/80 dark:hover:bg-zinc-900/90"
               onClick={() => {
                 present({
                   title: '评论',