fix: action button tooltip portal and bg color in dark mode

Signed-off-by: Innei <[email protected]>
RSSNext · Jul 27, 2024 · 90ece96 · 90ece96
1 parent 70d0808
commit 90ece96
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 15 deletions.
diff --git a/src/renderer/src/components/ui/button/index.tsx b/src/renderer/src/components/ui/button/index.tsx
@@ -10,7 +10,12 @@ import type { OptionsOrDependencyArray } from "react-hotkeys-hook/dist/types"
 
 import { KbdCombined } from "../kbd/Kbd"
 import { LoadingCircle } from "../loading"
-import { Tooltip, TooltipContent, TooltipTrigger } from "../tooltip"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipPortal,
+  TooltipTrigger,
+} from "../tooltip"
 import { buttonVariants, styledButtonVariant } from "./variants"
 
 export interface BaseButtonProps {
@@ -124,19 +129,21 @@ export const ActionButton = React.forwardRef<
               {children}
             </Button>
           </TooltipTrigger>
-          <TooltipContent
-            className="flex items-center gap-1"
-            side={tooltipSide ?? "bottom"}
-          >
-            {tooltip}
-            {!!shortcut && (
-              <div className="ml-1">
-                <KbdCombined className="text-foreground/80">
-                  {shortcut}
-                </KbdCombined>
-              </div>
-            )}
-          </TooltipContent>
+          <TooltipPortal>
+            <TooltipContent
+              className="flex items-center gap-1"
+              side={tooltipSide ?? "bottom"}
+            >
+              {tooltip}
+              {!!shortcut && (
+                <div className="ml-1">
+                  <KbdCombined className="text-foreground/80">
+                    {shortcut}
+                  </KbdCombined>
+                </div>
+              )}
+            </TooltipContent>
+          </TooltipPortal>
         </Tooltip>
       </>
     )

diff --git a/src/renderer/src/components/ui/button/variants.tsx b/src/renderer/src/components/ui/button/variants.tsx
@@ -20,7 +20,7 @@ export const buttonVariants = cva(
           "border border-input bg-theme-background hover:bg-accent hover:text-accent-foreground",
         secondary:
           "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost: "hover:bg-zinc-500/10 px-1.5",
+        ghost: "hover:bg-zinc-500/10 dark:hover:bg-neutral-400/15 px-1.5",
         link: "text-primary underline-offset-4 hover:underline",
       },
     },