chore: ratelimit overview tooltip move to unkey ui and renamed

apps/dashboard/app/(app)/apis/[apiId]/_components/create-key/components/key-created-success-dialog.tsx

@@ -1,11 +1,10 @@
 "use client";
 
-import { RatelimitOverviewTooltip } from "@/app/(app)/ratelimits/[namespaceId]/_overview/components/table/components/ratelimit-overview-tooltip";
 import { ConfirmPopover } from "@/components/confirmation-popover";
 import { Dialog, DialogContent } from "@/components/ui/dialog";
 import { toast } from "@/components/ui/toaster";
 import { ArrowRight, Check, CircleInfo, Eye, EyeSlash, Key2, Plus } from "@unkey/icons";
-import { Button, CopyButton } from "@unkey/ui";
+import { Button, CopyButton, InfoTooltip } from "@unkey/ui";
 import { useRouter } from "next/navigation";
 import { useEffect, useRef, useState } from "react";
 import { UNNAMED_KEY } from "../create-key.constants";
@@ -179,16 +178,17 @@ export const KeyCreatedSuccessDialog = ({
                   </div>
                   <div className="flex flex-col gap-1 py-6">
                     <div className="text-accent-12 text-xs font-mono">{keyData.id}</div>
-                    <RatelimitOverviewTooltip
+                    <InfoTooltip
                       content={keyData.name}
                       position={{ side: "bottom", align: "center" }}
                       asChild
                       disabled={!keyData.name}
+                      variant="inverted"
                     >
                       <div className="text-accent-9 text-xs max-w-[160px] truncate">
                         {keyData.name ?? UNNAMED_KEY}
                       </div>
-                    </RatelimitOverviewTooltip>
+                    </InfoTooltip>
                   </div>
                   <Button
                     variant="outline"

apps/dashboard/app/(app)/apis/[apiId]/_components/create-key/hooks/use-fetch-identities/create-identity-options.tsx

@@ -57,7 +57,7 @@ export function createIdentityOptions({
             side="right"
             align="start"
             sideOffset={30}
-            className="drop-shadow-2xl border border-gray-4 overflow-hidden rounded-[10px] p-0 bg-white dark:bg-black w-[320px] z-[100]"
+            className="drop-shadow-2xl border border-grayA-4 overflow-hidden rounded-[10px] p-0 bg-white dark:bg-black w-[320px] z-[100]"
           >
             <div className="flex flex-col h-full">
               {/* Header - Always shown */}

apps/dashboard/app/(app)/apis/[apiId]/_components/create-key/index.tsx

@@ -150,7 +150,7 @@ export const CreateKeyDialog = ({
   return (
     <>
       <Navbar.Actions>
-        <NavbarActionButton onClick={() => setIsSettingsOpen(true)}>
+        <NavbarActionButton title="Create new key" onClick={() => setIsSettingsOpen(true)}>
           <Plus />
           Create new key
         </NavbarActionButton>

apps/dashboard/app/(app)/apis/[apiId]/_overview/components/table/components/override-indicator.tsx

@@ -1,9 +1,8 @@
 "use client";
-import { RatelimitOverviewTooltip } from "@/app/(app)/ratelimits/[namespaceId]/_overview/components/table/components/ratelimit-overview-tooltip";
 import { cn } from "@/lib/utils";
 import type { KeysOverviewLog } from "@unkey/clickhouse/src/keys/keys";
 import { TriangleWarning2 } from "@unkey/icons";
-import { AnimatedLoadingSpinner } from "@unkey/ui";
+import { AnimatedLoadingSpinner, InfoTooltip } from "@unkey/ui";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useCallback, useState } from "react";
@@ -65,8 +64,10 @@ export const KeyIdentifierColumn = ({ log, apiId, onNavigate }: KeyIdentifierCol
 
   return (
     <div className="flex gap-6 items-center pl-2">
-      <RatelimitOverviewTooltip
+      <InfoTooltip
+        variant="inverted"
         content={<p className="text-xs">{getWarningMessage(severity, errorPercentage)}</p>}
+        position={{ side: "right", align: "center" }}
       >
         {isNavigating ? (
           <div className="size-[12px] items-center justify-center flex">
@@ -77,7 +78,7 @@ export const KeyIdentifierColumn = ({ log, apiId, onNavigate }: KeyIdentifierCol
             {getWarningIcon(severity)}
           </div>
         )}
-      </RatelimitOverviewTooltip>
+      </InfoTooltip>
       <Link
         title={`View details for ${log.key_id}`}
         className="font-mono group-hover:underline decoration-dotted"

apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/components/table/logs-table.tsx

@@ -1,5 +1,4 @@
 "use client";
-import { RatelimitOverviewTooltip } from "@/app/(app)/ratelimits/[namespaceId]/_overview/components/table/components/ratelimit-overview-tooltip";
 import { Badge } from "@/components/ui/badge";
 import { VirtualTable } from "@/components/virtual-table/index";
 import type { Column } from "@/components/virtual-table/types";
@@ -19,7 +18,7 @@ import {
 } from "@unkey/icons";
 import { CopyButton } from "@unkey/ui";
 import { TimestampInfo } from "@unkey/ui";
-import { Button, Empty, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@unkey/ui";
+import { Button, Empty, InfoTooltip } from "@unkey/ui";
 import { useCallback, useState } from "react";
 import { useKeyDetailsLogsContext } from "../../context/logs";
 import { StatusBadge } from "./components/status-badge";
@@ -271,26 +270,24 @@ export const KeyDetailsLogsTable = ({ keyspaceId, keyId, selectedLog, onLogSelec
               : "";
           const outcomeInfo = LOG_OUTCOME_DEFINITIONS[outcomeType];
           return (
-            <TooltipProvider>
-              <Tooltip>
-                <TooltipTrigger className="cursor-default">
-                  <div className="flex gap-3 items-center">
-                    <StatusBadge
-                      primary={{
-                        label: outcomeInfo.label,
-                        color: isSelected
-                          ? STATUS_STYLES[getStatusType(outcomeInfo.type)].badge.selected
-                          : STATUS_STYLES[getStatusType(outcomeInfo.type)].badge.default,
-                        icon: outcomeInfo.icon,
-                      }}
-                    />
-                  </div>
-                </TooltipTrigger>
-                <TooltipContent>
-                  <p>{outcomeInfo.tooltip}</p>
-                </TooltipContent>
-              </Tooltip>
-            </TooltipProvider>
+            <InfoTooltip
+              variant="inverted"
+              className="cursor-default"
+              content={<p>{outcomeInfo.tooltip}</p>}
+              position={{ side: "top", align: "center", sideOffset: 5 }}
+            >
+              <div className="flex gap-3 items-center">
+                <StatusBadge
+                  primary={{
+                    label: outcomeInfo.label,
+                    color: isSelected
+                      ? STATUS_STYLES[getStatusType(outcomeInfo.type)].badge.selected
+                      : STATUS_STYLES[getStatusType(outcomeInfo.type)].badge.default,
+                    icon: outcomeInfo.icon,
+                  }}
+                />
+              </div>
+            </InfoTooltip>
           );
         },
       },
@@ -315,7 +312,8 @@ export const KeyDetailsLogsTable = ({ keyspaceId, keyId, selectedLog, onLogSelec
             <div className="flex flex-wrap gap-1 items-center">
               {log.tags && log.tags.length > 0 ? (
                 log.tags.slice(0, 3).map((tag) => (
-                  <RatelimitOverviewTooltip
+                  <InfoTooltip
+                    variant="inverted"
                     key={tag}
                     content={
                       <div className="max-w-xs">
@@ -361,13 +359,14 @@ export const KeyDetailsLogsTable = ({ keyspaceId, keyId, selectedLog, onLogSelec
                     >
                       {tag.length > 15 ? `${tag.substring(0, 12)}...` : tag}
                     </Badge>
-                  </RatelimitOverviewTooltip>
+                  </InfoTooltip>
                 ))
               ) : (
                 <span className="text-gray-8">—</span>
               )}
               {log.tags && log.tags.length > 3 && (
-                <RatelimitOverviewTooltip
+                <InfoTooltip
+                  variant="inverted"
                   content={
                     <div className="flex flex-col gap-2 py-1 max-w-xs max-h-[300px] overflow-y-auto">
                       <div className="text-xs opacity-75 font-medium">
@@ -419,7 +418,7 @@ export const KeyDetailsLogsTable = ({ keyspaceId, keyId, selectedLog, onLogSelec
                   >
                     +{log.tags.length - 3}
                   </Badge>
-                </RatelimitOverviewTooltip>
+                </InfoTooltip>
               )}
             </div>
           );

apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/actions/components/key-info.tsx

@@ -1,6 +1,6 @@
-import { RatelimitOverviewTooltip } from "@/app/(app)/ratelimits/[namespaceId]/_overview/components/table/components/ratelimit-overview-tooltip";
 import type { KeyDetails } from "@/lib/trpc/routers/api/keys/query-api-keys/schema";
 import { Key2 } from "@unkey/icons";
+import { InfoTooltip } from "@unkey/ui";
 
 export const KeyInfo = ({ keyDetails }: { keyDetails: KeyDetails }) => {
   return (
@@ -10,7 +10,8 @@ export const KeyInfo = ({ keyDetails }: { keyDetails: KeyDetails }) => {
       </div>
       <div className="flex flex-col gap-1">
         <div className="text-accent-12 text-xs font-mono">{keyDetails.id}</div>
-        <RatelimitOverviewTooltip
+        <InfoTooltip
+          variant="inverted"
           content={keyDetails.name}
           position={{ side: "bottom", align: "center" }}
           asChild
@@ -19,7 +20,7 @@ export const KeyInfo = ({ keyDetails }: { keyDetails: KeyDetails }) => {
           <div className="text-accent-9 text-xs max-w-[160px] truncate">
             {keyDetails.name ?? "Unnamed Key"}
           </div>
-        </RatelimitOverviewTooltip>
+        </InfoTooltip>
       </div>
     </div>
   );

apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/bar-chart/components/outcome-explainer.tsx

@@ -1,6 +1,6 @@
 import { formatNumber } from "@/lib/fmt";
 
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@unkey/ui";
+import { InfoTooltip } from "@unkey/ui";
 import { useMemo } from "react";
 import type { ProcessedTimeseriesDataPoint } from "../use-fetch-timeseries";
 
@@ -100,15 +100,14 @@ export function OutcomeExplainer({ children, timeseries }: OutcomeExplainerProps
   }, [aggregatedData]);
 
   return (
-    <TooltipProvider>
-      <Tooltip delayDuration={300}>
-        <TooltipTrigger asChild>
-          <div>{children}</div>
-        </TooltipTrigger>
-        <TooltipContent
-          className="min-w-64 bg-gray-1 dark:bg-black shadow-2xl p-0 border border-grayA-2 rounded-lg overflow-hidden flex justify-start px-4 pt-2 pb-1 flex-col gap-1"
-          side="bottom"
-        >
+    <InfoTooltip
+      asChild
+      className="bg-gray-1 dark:bg-black shadow-2xl p-0 border border-grayA-2 rounded-lg overflow-hidden px-4 pt-2 pb-1"
+      delayDuration={300}
+      variant="inverted"
+      position={{ side: "bottom" }}
+      content={
+        <div className="flex flex-col gap-1 min-w-64 justify-start ">
           <div className="text-gray-12 font-medium text-[13px] pr-2">API Key Activity</div>
           <div className="text-xs text-grayA-9 pr-2 font-normal">Last 36 hours</div>
 
@@ -145,8 +144,10 @@ export function OutcomeExplainer({ children, timeseries }: OutcomeExplainerProps
               <div className="text-gray-9 text-[13px] py-1">No verification activity</div>
             )}
           </div>
-        </TooltipContent>
-      </Tooltip>
-    </TooltipProvider>
+        </div>
+      }
+    >
+      <div>{children}</div>
+    </InfoTooltip>
   );
 }

apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/status-cell/index.tsx

@@ -2,8 +2,7 @@ import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
 import type { KeyDetails } from "@/lib/trpc/routers/api/keys/query-api-keys/schema";
 import { cn } from "@/lib/utils";
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@unkey/ui";
-import { useState } from "react";
+import { InfoTooltip } from "@unkey/ui";
 import { StatusBadge } from "./components/status-badge";
 import { useKeyStatus } from "./use-key-status";
 
@@ -16,7 +15,6 @@ type StatusDisplayProps = {
 export const StatusDisplay = ({ keyAuthId, keyData, isSelected }: StatusDisplayProps) => {
   const { primary, count, isLoading, statuses, isError } = useKeyStatus(keyAuthId, keyData);
   const utils = trpc.useUtils();
-  const [isOpen, setIsOpen] = useState(false);
 
   const enableKeyMutation = trpc.api.keys.enableKey.useMutation({
     onSuccess: async () => {
@@ -59,22 +57,19 @@ export const StatusDisplay = ({ keyAuthId, keyData, isSelected }: StatusDisplayP
   }
 
   return (
-    <TooltipProvider>
-      <Tooltip open={isOpen} onOpenChange={setIsOpen}>
-        <TooltipTrigger onClick={() => setIsOpen(!isOpen)} className="cursor-pointer">
-          <StatusBadge primary={primary} count={count} isSelected={isSelected} />
-        </TooltipTrigger>
-        <TooltipContent className="p-0 bg-white dark:bg-black border rounded-lg border-grayA-3 w-72 flex flex-col drop-shadow-xl">
+    <InfoTooltip
+      position={{ side: "top", align: "center" }}
+      disabled={false}
+      content={
+        <div>
           {statuses && statuses.length > 1 && (
-            <div className="border-b border-grayA-3 ">
-              <div className="px-4 py-3">
-                <div className="flex flex-col px-[1px] py-[1px] gap-1">
-                  <div className="text-accent-12 font-medium text-[13px]">Key status overview</div>
-                  <div className="text-accent-10 text-xs ">
-                    This key has{" "}
-                    <span className="font-semibold text-accent-12">{statuses.length}</span> active
-                    flags{" "}
-                  </div>
+            <div className="border-b border-grayA-3">
+              <div className="flex flex-col px-[1px] py-[1px] gap-1 w-[260px] p-1">
+                <div className="text-accent-12 font-medium text-[13px]">Key status overview</div>
+                <div className="text-accent-10 text-xs ">
+                  This key has{" "}
+                  <span className="font-semibold text-accent-12">{statuses.length}</span> active
+                  flags{" "}
                 </div>
               </div>
             </div>
@@ -85,7 +80,7 @@ export const StatusDisplay = ({ keyAuthId, keyData, isSelected }: StatusDisplayP
               className={cn("border-grayA-3", i !== statuses.length - 1 && "border-b")}
               key={status.type || i}
             >
-              <div className="px-4 py-3 flex items-start gap-1.5 flex-col">
+              <div className="flex items-start gap-1.5 flex-col w-[260px] p-1">
                 <div className="flex-shrink-0 mt-0.5">
                   <StatusBadge
                     primary={{
@@ -137,8 +132,10 @@ export const StatusDisplay = ({ keyAuthId, keyData, isSelected }: StatusDisplayP
               </div>
             </div>
           ))}
-        </TooltipContent>
-      </Tooltip>
-    </TooltipProvider>
+        </div>
+      }
+    >
+      <StatusBadge primary={primary} count={count} isSelected={isSelected} />
+    </InfoTooltip>
   );
 };

apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/components/table/keys-list.tsx

@@ -3,16 +3,7 @@ import { VirtualTable } from "@/components/virtual-table/index";
 import type { Column } from "@/components/virtual-table/types";
 import type { KeyDetails } from "@/lib/trpc/routers/api/keys/query-api-keys/schema";
 import { BookBookmark, Dots, Focus, Key } from "@unkey/icons";
-import {
-  AnimatedLoadingSpinner,
-  Button,
-  Checkbox,
-  Empty,
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@unkey/ui";
+import { AnimatedLoadingSpinner, Button, Checkbox, Empty, InfoTooltip } from "@unkey/ui";
 import { cn } from "@unkey/ui/src/lib/utils";
 import dynamic from "next/dynamic";
 import Link from "next/link";
@@ -147,17 +138,13 @@ export const KeysList = ({
             <div className="flex flex-col items-start px-[18px] py-[6px]">
               <div className="flex gap-4 items-center">
                 {identity ? (
-                  <TooltipProvider delayDuration={100}>
-                    <Tooltip>
-                      <TooltipTrigger asChild>
-                        {React.cloneElement(iconContainer, {
-                          className: cn(iconContainer.props.className, "cursor-pointer"),
-                        })}
-                      </TooltipTrigger>
-                      <TooltipContent
-                        className="bg-gray-1 px-4 py-2 border border-gray-4 shadow-md font-medium text-xs text-accent-12"
-                        side="right"
-                      >
+                  <InfoTooltip
+                    delayDuration={100}
+                    variant="muted"
+                    position={{ side: "right" }}
+                    className="bg-gray-1 px-4 py-2 border border-gray-4 shadow-md font-medium text-xs text-accent-12"
+                    content={
+                      <>
                         This key is associated with the identity:{" "}
                         {key.identity_id ? (
                           <Link
@@ -173,9 +160,14 @@ export const KeysList = ({
                         ) : (
                           <span className="font-mono bg-gray-4 p-1 rounded">{identity}</span>
                         )}
-                      </TooltipContent>
-                    </Tooltip>
-                  </TooltipProvider>
+                      </>
+                    }
+                    asChild
+                  >
+                    {React.cloneElement(iconContainer, {
+                      className: cn(iconContainer.props.className, "cursor-pointer"),
+                    })}
+                  </InfoTooltip>
                 ) : (
                   iconContainer
                 )}