chore: tweak button styles

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")}

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")}

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")}

web/src/components/MemoEditor/ActionButton/MarkdownMenu.tsx

@@ -69,25 +69,27 @@ const MarkdownMenu = (props: Props) => {
         </Button>
       </PopoverTrigger>
       <PopoverContent align="start" className="text-sm p-1">
+        <div className="flex flex-col text-sm gap-0.5">
           <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"
+            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="w-full flex items-center gap-2 px-2 py-1.5 text-left text-sm hover:bg-gray-100 rounded-md"
+            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="-mt-0.5 pl-2">
+          <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>
   );

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>

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>

web/src/components/UserBanner.tsx

@@ -46,41 +46,43 @@ const UserBanner = (props: Props) => {
           </div>
         </PopoverTrigger>
         <PopoverContent align="start" className="p-1" style={{ zIndex: "9999" }}>
+          <div className="flex flex-col text-sm gap-0.5">
             <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"
+              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="w-full flex items-center gap-2 px-2 py-1 text-left text-sm hover:bg-gray-100 rounded-md outline-none"
+              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="w-full flex items-center gap-2 px-2 py-1 text-left text-sm hover:bg-gray-100 rounded-md outline-none"
+              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="w-full flex items-center gap-2 px-2 py-1 text-left text-sm hover:bg-gray-100 rounded-md outline-none"
+              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="w-full flex items-center gap-2 px-2 py-1 text-left text-sm hover:bg-gray-100 rounded-md outline-none"
+              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>