From acb71dfb6932d6d7c8bd35eadf49a8ec6f4785f5 Mon Sep 17 00:00:00 2001
From: Johnny <yourselfhosted@gmail.com>
Date: Tue, 10 Jun 2025 22:51:42 +0800
Subject: [PATCH] chore: tweak button styles

---
 .../HomeSidebar/ShortcutsSection.tsx          |  8 +--
 .../components/HomeSidebar/TagsSection.tsx    |  8 +--
 web/src/components/MemoActionMenu.tsx         | 12 ++--
 .../MemoEditor/ActionButton/MarkdownMenu.tsx  | 38 +++++-----
 web/src/components/Settings/MemberSection.tsx |  8 +--
 web/src/components/Settings/SSOSection.tsx    |  4 +-
 web/src/components/UserBanner.tsx             | 72 ++++++++++---------
 7 files changed, 77 insertions(+), 73 deletions(-)

diff --git a/web/src/components/HomeSidebar/ShortcutsSection.tsx b/web/src/components/HomeSidebar/ShortcutsSection.tsx
index e963a28e0..5e64b442c 100644
--- a/web/src/components/HomeSidebar/ShortcutsSection.tsx
+++ b/web/src/components/HomeSidebar/ShortcutsSection.tsx
@@ -61,18 +61,18 @@ const ShortcutsSection = observer(() => {
                 <PopoverTrigger asChild>
                   <MoreVerticalIcon className="w-4 h-auto shrink-0 opacity-40 cursor-pointer hover:opacity-70" />
                 </PopoverTrigger>
-                <PopoverContent align="start" sideOffset={2}>
-                  <div className="flex flex-col gap-0.5">
+                <PopoverContent align="end" alignOffset={-12}>
+                  <div className="flex flex-col text-sm gap-0.5">
                     <button
                       onClick={() => showCreateShortcutDialog({ shortcut })}
-                      className="flex items-center gap-1 px-2 py-1 text-sm text-left dark:text-zinc-300 hover:bg-gray-100 dark:hover:bg-zinc-700 outline-none rounded transition-colors"
+                      className="flex items-center gap-2 px-2 py-1 text-left dark:text-zinc-300 hover:bg-gray-100 dark:hover:bg-zinc-700 outline-none rounded"
                     >
                       <Edit3Icon className="w-4 h-auto" />
                       {t("common.edit")}
                     </button>
                     <button
                       onClick={() => handleDeleteShortcut(shortcut)}
-                      className="flex items-center gap-1 px-2 py-1 text-sm text-left text-red-600 dark:text-red-400 hover:bg-gray-100 dark:hover:bg-zinc-700 outline-none rounded transition-colors"
+                      className="flex items-center gap-2 px-2 py-1 text-left text-red-600 dark:text-red-400 hover:bg-gray-100 dark:hover:bg-zinc-700 outline-none rounded"
                     >
                       <TrashIcon className="w-4 h-auto" />
                       {t("common.delete")}
diff --git a/web/src/components/HomeSidebar/TagsSection.tsx b/web/src/components/HomeSidebar/TagsSection.tsx
index db4182793..da7df02ca 100644
--- a/web/src/components/HomeSidebar/TagsSection.tsx
+++ b/web/src/components/HomeSidebar/TagsSection.tsx
@@ -56,7 +56,7 @@ const TagsSection = observer((props: Props) => {
               <MoreVerticalIcon className="w-4 h-auto shrink-0 opacity-60" />
             </PopoverTrigger>
             <PopoverContent align="end" alignOffset={-12}>
-              <div className="w-auto flex flex-row justify-between items-center gap-2">
+              <div className="w-auto flex flex-row justify-between items-center gap-2 p-1">
                 <span className="text-sm shrink-0 dark:text-zinc-400">{t("common.tree-mode")}</span>
                 <Switch size="sm" checked={treeMode} onChange={(event) => setTreeMode(event.target.checked)} />
               </div>
@@ -82,17 +82,17 @@ const TagsSection = observer((props: Props) => {
                     </div>
                   </PopoverTrigger>
                   <PopoverContent align="start" sideOffset={2}>
-                    <div className="flex flex-col gap-0.5">
+                    <div className="flex flex-col text-sm gap-0.5">
                       <button
                         onClick={() => showRenameTagDialog({ tag: tag })}
-                        className="flex items-center gap-1 px-2 py-1 text-sm text-left dark:text-zinc-300 hover:bg-gray-100 dark:hover:bg-zinc-700 outline-none rounded transition-colors"
+                        className="flex items-center gap-2 px-2 py-1 text-left dark:text-zinc-300 hover:bg-gray-100 dark:hover:bg-zinc-700 outline-none rounded"
                       >
                         <Edit3Icon className="w-4 h-auto" />
                         {t("common.rename")}
                       </button>
                       <button
                         onClick={() => handleDeleteTag(tag)}
-                        className="flex items-center gap-1 px-2 py-1 text-sm text-left text-red-600 dark:text-red-400 hover:bg-gray-100 dark:hover:bg-zinc-700 outline-none rounded transition-colors"
+                        className="flex items-center gap-2 px-2 py-1 text-left text-red-600 dark:text-red-400 hover:bg-gray-100 dark:hover:bg-zinc-700 outline-none rounded"
                       >
                         <TrashIcon className="w-4 h-auto" />
                         {t("common.delete")}
diff --git a/web/src/components/MemoActionMenu.tsx b/web/src/components/MemoActionMenu.tsx
index da0c8f77e..4d7ac7aef 100644
--- a/web/src/components/MemoActionMenu.tsx
+++ b/web/src/components/MemoActionMenu.tsx
@@ -176,7 +176,7 @@ const MemoActionMenu = observer((props: Props) => {
               {!isComment && (
                 <button
                   onClick={handleTogglePinMemoBtnClick}
-                  className="flex items-center gap-2 px-2 py-1 text-left dark:text-zinc-300 hover:bg-gray-100 dark:hover:bg-zinc-700 outline-none rounded transition-colors"
+                  className="flex items-center gap-2 px-2 py-1 text-left dark:text-zinc-300 hover:bg-gray-100 dark:hover:bg-zinc-700 outline-none rounded"
                 >
                   {memo.pinned ? <BookmarkMinusIcon className="w-4 h-auto" /> : <BookmarkPlusIcon className="w-4 h-auto" />}
                   {memo.pinned ? t("common.unpin") : t("common.pin")}
@@ -184,7 +184,7 @@ const MemoActionMenu = observer((props: Props) => {
               )}
               <button
                 onClick={handleEditMemoClick}
-                className="flex items-center gap-2 px-2 py-1 text-left dark:text-zinc-300 hover:bg-gray-100 dark:hover:bg-zinc-700 outline-none rounded transition-colors"
+                className="flex items-center gap-2 px-2 py-1 text-left dark:text-zinc-300 hover:bg-gray-100 dark:hover:bg-zinc-700 outline-none rounded"
               >
                 <Edit3Icon className="w-4 h-auto" />
                 {t("common.edit")}
@@ -194,7 +194,7 @@ const MemoActionMenu = observer((props: Props) => {
           {!isArchived && (
             <button
               onClick={handleCopyLink}
-              className="flex items-center gap-2 px-2 py-1 text-left dark:text-zinc-300 hover:bg-gray-100 dark:hover:bg-zinc-700 outline-none rounded transition-colors"
+              className="flex items-center gap-2 px-2 py-1 text-left dark:text-zinc-300 hover:bg-gray-100 dark:hover:bg-zinc-700 outline-none rounded"
             >
               <CopyIcon className="w-4 h-auto" />
               {t("memo.copy-link")}
@@ -205,7 +205,7 @@ const MemoActionMenu = observer((props: Props) => {
               {!isArchived && !isComment && hasCompletedTaskList && (
                 <button
                   onClick={handleRemoveCompletedTaskListItemsClick}
-                  className="flex items-center gap-2 px-2 py-1 text-left text-amber-600 dark:text-amber-400 hover:bg-gray-100 dark:hover:bg-zinc-700 outline-none rounded transition-colors"
+                  className="flex items-center gap-2 px-2 py-1 text-left text-amber-600 dark:text-amber-400 hover:bg-gray-100 dark:hover:bg-zinc-700 outline-none rounded"
                 >
                   <SquareCheckIcon className="w-4 h-auto" />
                   {t("memo.remove-completed-task-list-items")}
@@ -214,7 +214,7 @@ const MemoActionMenu = observer((props: Props) => {
               {!isComment && (
                 <button
                   onClick={handleToggleMemoStatusClick}
-                  className="flex items-center gap-2 px-2 py-1 text-left text-amber-600 dark:text-amber-400 hover:bg-gray-100 dark:hover:bg-zinc-700 outline-none rounded transition-colors"
+                  className="flex items-center gap-2 px-2 py-1 text-left text-amber-600 dark:text-amber-400 hover:bg-gray-100 dark:hover:bg-zinc-700 outline-none rounded"
                 >
                   {isArchived ? <ArchiveRestoreIcon className="w-4 h-auto" /> : <ArchiveIcon className="w-4 h-auto" />}
                   {isArchived ? t("common.restore") : t("common.archive")}
@@ -222,7 +222,7 @@ const MemoActionMenu = observer((props: Props) => {
               )}
               <button
                 onClick={handleDeleteMemoClick}
-                className="flex items-center gap-2 px-2 py-1 text-left text-red-600 dark:text-red-400 hover:bg-gray-100 dark:hover:bg-zinc-700 outline-none rounded transition-colors"
+                className="flex items-center gap-2 px-2 py-1 text-left text-red-600 dark:text-red-400 hover:bg-gray-100 dark:hover:bg-zinc-700 outline-none rounded"
               >
                 <TrashIcon className="w-4 h-auto" />
                 {t("common.delete")}
diff --git a/web/src/components/MemoEditor/ActionButton/MarkdownMenu.tsx b/web/src/components/MemoEditor/ActionButton/MarkdownMenu.tsx
index a7928bbf5..f98b2d4e0 100644
--- a/web/src/components/MemoEditor/ActionButton/MarkdownMenu.tsx
+++ b/web/src/components/MemoEditor/ActionButton/MarkdownMenu.tsx
@@ -69,24 +69,26 @@ const MarkdownMenu = (props: Props) => {
         </Button>
       </PopoverTrigger>
       <PopoverContent align="start" className="text-sm p-1">
-        <button
-          onClick={handleCodeBlockClick}
-          className="w-full flex items-center gap-2 px-2 py-1.5 text-left text-sm hover:bg-gray-100 rounded-md"
-        >
-          <Code2Icon className="w-4 h-auto" />
-          <span>{t("markdown.code-block")}</span>
-        </button>
-        <button
-          onClick={handleCheckboxClick}
-          className="w-full flex items-center gap-2 px-2 py-1.5 text-left text-sm hover:bg-gray-100 rounded-md"
-        >
-          <CheckSquareIcon className="w-4 h-auto" />
-          <span>{t("markdown.checkbox")}</span>
-        </button>
-        <div className="-mt-0.5 pl-2">
-          <Link fontSize={12} href="https://www.usememos.com/docs/getting-started/content-syntax" target="_blank">
-            {t("markdown.content-syntax")}
-          </Link>
+        <div className="flex flex-col text-sm gap-0.5">
+          <button
+            onClick={handleCodeBlockClick}
+            className="flex items-center gap-2 px-2 py-1 text-left dark:text-zinc-300 hover:bg-gray-100 dark:hover:bg-zinc-700 outline-none rounded"
+          >
+            <Code2Icon className="w-4 h-auto" />
+            <span>{t("markdown.code-block")}</span>
+          </button>
+          <button
+            onClick={handleCheckboxClick}
+            className="flex items-center gap-2 px-2 py-1 text-left dark:text-zinc-300 hover:bg-gray-100 dark:hover:bg-zinc-700 outline-none rounded"
+          >
+            <CheckSquareIcon className="w-4 h-auto" />
+            <span>{t("markdown.checkbox")}</span>
+          </button>
+          <div className="pl-2">
+            <Link fontSize={12} href="https://www.usememos.com/docs/getting-started/content-syntax" target="_blank">
+              {t("markdown.content-syntax")}
+            </Link>
+          </div>
         </div>
       </PopoverContent>
     </Popover>
diff --git a/web/src/components/Settings/MemberSection.tsx b/web/src/components/Settings/MemberSection.tsx
index 8482f0dc0..2ac1d0b51 100644
--- a/web/src/components/Settings/MemberSection.tsx
+++ b/web/src/components/Settings/MemberSection.tsx
@@ -225,14 +225,14 @@ const MemberSection = observer(() => {
                           <div className="flex flex-col gap-0.5 text-sm">
                             <button
                               onClick={() => showCreateUserDialog(user, () => fetchUsers())}
-                              className="flex items-center gap-2 px-2 py-1.5 text-left dark:text-zinc-300 hover:bg-gray-100 dark:hover:bg-zinc-700 outline-none rounded transition-colors"
+                              className="flex items-center gap-2 px-2 py-1 text-left dark:text-zinc-300 hover:bg-gray-100 dark:hover:bg-zinc-700 outline-none rounded"
                             >
                               {t("common.update")}
                             </button>
                             {user.state === State.NORMAL ? (
                               <button
                                 onClick={() => handleArchiveUserClick(user)}
-                                className="flex items-center gap-2 px-2 py-1.5 text-left dark:text-zinc-300 hover:bg-gray-100 dark:hover:bg-zinc-700 outline-none rounded transition-colors"
+                                className="flex items-center gap-2 px-2 py-1 text-left dark:text-zinc-300 hover:bg-gray-100 dark:hover:bg-zinc-700 outline-none rounded"
                               >
                                 {t("setting.member-section.archive-member")}
                               </button>
@@ -240,13 +240,13 @@ const MemberSection = observer(() => {
                               <>
                                 <button
                                   onClick={() => handleRestoreUserClick(user)}
-                                  className="flex items-center gap-2 px-2 py-1.5 text-left dark:text-zinc-300 hover:bg-gray-100 dark:hover:bg-zinc-700 outline-none rounded transition-colors"
+                                  className="flex items-center gap-2 px-2 py-1 text-left dark:text-zinc-300 hover:bg-gray-100 dark:hover:bg-zinc-700 outline-none rounded"
                                 >
                                   {t("common.restore")}
                                 </button>
                                 <button
                                   onClick={() => handleDeleteUserClick(user)}
-                                  className="flex items-center gap-2 px-2 py-1.5 text-left text-red-600 dark:text-red-400 hover:bg-gray-100 dark:hover:bg-zinc-700 outline-none rounded transition-colors"
+                                  className="flex items-center gap-2 px-2 py-1 text-left text-red-600 dark:text-red-400 hover:bg-gray-100 dark:hover:bg-zinc-700 outline-none rounded"
                                 >
                                   {t("setting.member-section.delete-member")}
                                 </button>
diff --git a/web/src/components/Settings/SSOSection.tsx b/web/src/components/Settings/SSOSection.tsx
index 949b74700..414aebc53 100644
--- a/web/src/components/Settings/SSOSection.tsx
+++ b/web/src/components/Settings/SSOSection.tsx
@@ -71,13 +71,13 @@ const SSOSection = () => {
                 <div className="flex flex-col gap-0.5 text-sm">
                   <button
                     onClick={() => showCreateIdentityProviderDialog(identityProvider, fetchIdentityProviderList)}
-                    className="flex items-center gap-2 px-2 py-1 text-left dark:text-zinc-300 hover:bg-gray-100 dark:hover:bg-zinc-700 outline-none rounded transition-colors"
+                    className="flex items-center gap-2 px-2 py-1 text-left dark:text-zinc-300 hover:bg-gray-100 dark:hover:bg-zinc-700 outline-none rounded"
                   >
                     {t("common.edit")}
                   </button>
                   <button
                     onClick={() => handleDeleteIdentityProvider(identityProvider)}
-                    className="flex items-center gap-2 px-2 py-1 text-left text-red-600 dark:text-red-400 hover:bg-gray-100 dark:hover:bg-zinc-700 outline-none rounded transition-colors"
+                    className="flex items-center gap-2 px-2 py-1 text-left text-red-600 dark:text-red-400 hover:bg-gray-100 dark:hover:bg-zinc-700 outline-none rounded"
                   >
                     {t("common.delete")}
                   </button>
diff --git a/web/src/components/UserBanner.tsx b/web/src/components/UserBanner.tsx
index 366433803..b25a45d6b 100644
--- a/web/src/components/UserBanner.tsx
+++ b/web/src/components/UserBanner.tsx
@@ -46,41 +46,43 @@ const UserBanner = (props: Props) => {
           </div>
         </PopoverTrigger>
         <PopoverContent align="start" className="p-1" style={{ zIndex: "9999" }}>
-          <button
-            onClick={() => navigateTo(`/u/${encodeURIComponent(currentUser.username)}`)}
-            className="w-full flex items-center gap-2 px-2 py-1 text-left text-sm hover:bg-gray-100 rounded-md outline-none"
-          >
-            <SquareUserIcon className="w-4 h-auto opacity-60" />
-            <span className="truncate">{t("common.profile")}</span>
-          </button>
-          <button
-            onClick={() => navigateTo(Routes.ARCHIVED)}
-            className="w-full flex items-center gap-2 px-2 py-1 text-left text-sm hover:bg-gray-100 rounded-md outline-none"
-          >
-            <ArchiveIcon className="w-4 h-auto opacity-60" />
-            <span className="truncate">{t("common.archived")}</span>
-          </button>
-          <button
-            onClick={() => navigateTo(Routes.INBOX)}
-            className="w-full flex items-center gap-2 px-2 py-1 text-left text-sm hover:bg-gray-100 rounded-md outline-none"
-          >
-            <BellIcon className="w-4 h-auto opacity-60" />
-            <span className="truncate">{t("common.inbox")}</span>
-          </button>
-          <button
-            onClick={() => navigateTo(Routes.SETTING)}
-            className="w-full flex items-center gap-2 px-2 py-1 text-left text-sm hover:bg-gray-100 rounded-md outline-none"
-          >
-            <SettingsIcon className="w-4 h-auto opacity-60" />
-            <span className="truncate">{t("common.settings")}</span>
-          </button>
-          <button
-            onClick={handleSignOut}
-            className="w-full flex items-center gap-2 px-2 py-1 text-left text-sm hover:bg-gray-100 rounded-md outline-none"
-          >
-            <LogOutIcon className="w-4 h-auto opacity-60" />
-            <span className="truncate">{t("common.sign-out")}</span>
-          </button>
+          <div className="flex flex-col text-sm gap-0.5">
+            <button
+              onClick={() => navigateTo(`/u/${encodeURIComponent(currentUser.username)}`)}
+              className="flex items-center gap-2 px-2 py-1 text-left dark:text-zinc-300 hover:bg-gray-100 dark:hover:bg-zinc-700 outline-none rounded"
+            >
+              <SquareUserIcon className="w-4 h-auto opacity-60" />
+              <span className="truncate">{t("common.profile")}</span>
+            </button>
+            <button
+              onClick={() => navigateTo(Routes.ARCHIVED)}
+              className="flex items-center gap-2 px-2 py-1 text-left dark:text-zinc-300 hover:bg-gray-100 dark:hover:bg-zinc-700 outline-none rounded"
+            >
+              <ArchiveIcon className="w-4 h-auto opacity-60" />
+              <span className="truncate">{t("common.archived")}</span>
+            </button>
+            <button
+              onClick={() => navigateTo(Routes.INBOX)}
+              className="flex items-center gap-2 px-2 py-1 text-left dark:text-zinc-300 hover:bg-gray-100 dark:hover:bg-zinc-700 outline-none rounded"
+            >
+              <BellIcon className="w-4 h-auto opacity-60" />
+              <span className="truncate">{t("common.inbox")}</span>
+            </button>
+            <button
+              onClick={() => navigateTo(Routes.SETTING)}
+              className="flex items-center gap-2 px-2 py-1 text-left dark:text-zinc-300 hover:bg-gray-100 dark:hover:bg-zinc-700 outline-none rounded"
+            >
+              <SettingsIcon className="w-4 h-auto opacity-60" />
+              <span className="truncate">{t("common.settings")}</span>
+            </button>
+            <button
+              onClick={handleSignOut}
+              className="flex items-center gap-2 px-2 py-1 text-left dark:text-zinc-300 hover:bg-gray-100 dark:hover:bg-zinc-700 outline-none rounded"
+            >
+              <LogOutIcon className="w-4 h-auto opacity-60" />
+              <span className="truncate">{t("common.sign-out")}</span>
+            </button>
+          </div>
         </PopoverContent>
       </Popover>
     </div>