feat: focus visible style update

Signed-off-by: Innei <i@innei.in>
RSSNext · Jul 1, 2024 · ee458b8 · ee458b8
1 parent 9f1d8c0
commit ee458b8
Show file tree

Hide file tree

Showing 5 changed files with 5 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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)