From ee458b82ef75024bab482459da2ccc7ed585ecd3 Mon Sep 17 00:00:00 2001
From: Innei <i@innei.in>
Date: Mon, 1 Jul 2024 20:10:47 +0800
Subject: [PATCH] feat: focus visible style update

Signed-off-by: Innei <i@innei.in>
---
 src/renderer/src/components/ui/button/index.tsx   | 1 +
 src/renderer/src/components/user-button.tsx       | 2 +-
 src/renderer/src/modules/entry-content/index.tsx  | 2 +-
 src/renderer/src/modules/feed-column/category.tsx | 1 +
 src/renderer/src/modules/feed-column/index.tsx    | 1 +
 5 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/renderer/src/components/ui/button/index.tsx b/src/renderer/src/components/ui/button/index.tsx
index 583dfd7d8..f9b9aafa9 100644
--- a/src/renderer/src/components/ui/button/index.tsx
+++ b/src/renderer/src/components/ui/button/index.tsx
@@ -108,6 +108,7 @@ export const ActionButton = React.forwardRef<
               className={cn(
                 "no-drag-region flex size-8 items-center text-xl",
                 active && "bg-zinc-500/15 hover:bg-zinc-500/20",
+                "focus-visible:bg-zinc-500/30 focus-visible:!outline-none",
                 className,
               )}
               variant="ghost"
diff --git a/src/renderer/src/components/user-button.tsx b/src/renderer/src/components/user-button.tsx
index 732457170..ba053b1dc 100644
--- a/src/renderer/src/components/user-button.tsx
+++ b/src/renderer/src/components/user-button.tsx
@@ -115,7 +115,7 @@ export const ProfileButton: FC<LoginProps> = memo((props) => {
   }
   return (
     <DropdownMenu>
-      <DropdownMenuTrigger>
+      <DropdownMenuTrigger className="!outline-none focus-visible:bg-theme-item-hover">
         <ActionButton as="div" tooltip="Profile">
           <UserAvatar className="h-5 p-0" hideName />
         </ActionButton>
diff --git a/src/renderer/src/modules/entry-content/index.tsx b/src/renderer/src/modules/entry-content/index.tsx
index 76c35d138..29a22bee9 100644
--- a/src/renderer/src/modules/entry-content/index.tsx
+++ b/src/renderer/src/modules/entry-content/index.tsx
@@ -109,7 +109,7 @@ function EntryContentRender({ entryId }: { entryId: string }) {
             <a
               href={entry.entries.url || void 0}
               target="_blank"
-              className="-mx-6 block rounded-lg p-6 transition-colors hover:bg-theme-item-hover"
+              className="-mx-6 block rounded-lg p-6 transition-colors hover:bg-theme-item-hover focus-visible:bg-theme-item-hover focus-visible:!outline-none"
               rel="noreferrer"
             >
               <div className="select-text break-words text-3xl font-bold">
diff --git a/src/renderer/src/modules/feed-column/category.tsx b/src/renderer/src/modules/feed-column/category.tsx
index a74e1e264..7d41d7091 100644
--- a/src/renderer/src/modules/feed-column/category.tsx
+++ b/src/renderer/src/modules/feed-column/category.tsx
@@ -133,6 +133,7 @@ function FeedCategoryImpl({
               className={cn(
                 "flex h-8 items-center [&_.i-mgc-right-cute-fi]:data-[state=open]:rotate-90",
               )}
+              tabIndex={-1}
             >
               <i className="i-mgc-right-cute-fi mr-2 transition-transform" />
             </CollapsibleTrigger>
diff --git a/src/renderer/src/modules/feed-column/index.tsx b/src/renderer/src/modules/feed-column/index.tsx
index b96844b2a..090040395 100644
--- a/src/renderer/src/modules/feed-column/index.tsx
+++ b/src/renderer/src/modules/feed-column/index.tsx
@@ -149,6 +149,7 @@ export function FeedColumn() {
               active === index && item.className,
               "flex items-center text-xl",
               "hover:!bg-theme-vibrancyBg",
+              "focus-visible:!outline-none",
             )}
             onClick={(e) => {
               setActive(index)