fix: updated keyboard shortcuts display to use tooltips

apps/dashboard/components/logs/live-switch-button/index.tsx

@@ -1,6 +1,6 @@
 import { useKeyboardShortcut } from "@/hooks/use-keyboard-shortcut";
 import { CircleCaretRight } from "@unkey/icons";
-import { Button, KeyboardButton } from "@unkey/ui";
+import { Button, InfoTooltip, KeyboardButton } from "@unkey/ui";
 import { cn } from "@unkey/ui/src/lib/utils";
 
 type LiveSwitchProps = {
@@ -11,28 +11,36 @@ type LiveSwitchProps = {
 export const LiveSwitchButton = ({ isLive, onToggle }: LiveSwitchProps) => {
   useKeyboardShortcut("option+shift+q", onToggle);
   return (
-    <Button
-      onClick={onToggle}
-      variant="ghost"
-      size="md"
-      title="Toggle live updates (Shortcut: ⌥+⇧+Q)"
-      className={cn(
-        "px-2 relative rounded-lg group overflow-hidden",
-        isLive
-          ? "bg-info-3 text-info-11 hover:bg-info-3 hover:text-info-11 border border-solid border-info-7"
-          : "text-accent-12 [&_svg]:text-accent-9",
-      )}
-    >
-      {isLive && (
-        <div className="absolute left-0 right-0 top-0 bottom-0 rounded">
-          <div className="absolute inset-0 bg-info-6 rounded opacity-15 animate-[ping_3s_cubic-bezier(0,0,0.2,1)_infinite]" />
+    <InfoTooltip
+      content={
+        <div className="flex items-center gap-2">
+          <span>Toggle live updates</span>
+          <KeyboardButton shortcut="⌥+⇧+Q" />
         </div>
-      )}
-      <CircleCaretRight className="size-4 relative z-10" />
-      <span className="font-medium text-[13px]">Live</span>
-      <div className="max-w-0 opacity-0 group-hover:max-w-[100px] group-hover:opacity-100 transition-all duration-300 ease-in-out overflow-hidden">
-        <KeyboardButton shortcut="⌥+⇧+Q" className="ml-1" />
-      </div>
-    </Button>
+      }
+      position={{ side: "bottom", align: "center" }}
+      delayDuration={300}
+      asChild
+    >
+      <Button
+        onClick={onToggle}
+        variant="ghost"
+        size="md"
+        className={cn(
+          "px-2 relative rounded-lg overflow-hidden",
+          isLive
+            ? "bg-info-3 text-info-11 hover:bg-info-3 hover:text-info-11 border border-solid border-info-7"
+            : "text-accent-12 [&_svg]:text-accent-9",
+        )}
+      >
+        {isLive && (
+          <div className="absolute left-0 right-0 top-0 bottom-0 rounded">
+            <div className="absolute inset-0 bg-info-6 rounded opacity-15 animate-[ping_3s_cubic-bezier(0,0,0.2,1)_infinite]" />
+          </div>
+        )}
+        <CircleCaretRight className="size-4 relative z-10" />
+        <span className="font-medium text-[13px]">Live</span>
+      </Button>
+    </InfoTooltip>
   );
 };

internal/ui/src/components/buttons/refresh-button.tsx

@@ -49,29 +49,36 @@ const RefreshButton = ({ onRefresh, isEnabled, isLive, toggleLive }: RefreshButt
     disabled: !isEnabled,
   });
 
+  // Determine tooltip content based on state
+  const tooltipContent = isEnabled ? (
+    <div className="flex items-center gap-2">
+      <span>Refresh data</span>
+      <KeyboardButton shortcut="⌥+⇧+W" />
+    </div>
+  ) : (
+    "Refresh unavailable - please select a relative time filter in the 'Since' dropdown"
+  );
+
   return (
     <InfoTooltip
-      content="Refresh unavailable - please select a relative time filter in the 'Since' dropdown"
-      variant="inverted"
+      content={tooltipContent}
+      variant={isEnabled ? "primary" : "inverted"}
       position={{ side: "bottom", align: "center" }}
-      disabled={isEnabled && !isLoading}
+      delayDuration={300}
+      disabled={isLoading}
       asChild
     >
       <div>
         <Button
           onClick={handleRefresh}
           variant="ghost"
           size="md"
-          title={isEnabled ? "Refresh data (Shortcut: ⌥+⇧+W)" : ""}
           disabled={!isEnabled || isLoading}
           loading={isLoading}
-          className="flex w-full items-center justify-center rounded-lg border border-gray-4 group overflow-hidden"
+          className="flex w-full items-center justify-center rounded-lg border border-gray-4 overflow-hidden"
         >
           <Refresh3 className="size-4" />
           <span className="font-medium text-[13px] relative z-10">Refresh</span>
-          <div className="max-w-0 opacity-0 group-hover:max-w-[100px] group-hover:opacity-100 transition-all duration-300 ease-in-out overflow-hidden">
-            <KeyboardButton shortcut="⌥+⇧+W" className="ml-1" />
-          </div>
         </Button>
       </div>
     </InfoTooltip>