From e927a72ff0b536bf99210ea7b8bfe53f815dbdda Mon Sep 17 00:00:00 2001 From: Michael Silva Date: Wed, 30 Apr 2025 09:27:38 -0400 Subject: [PATCH 01/14] ratelimit overview tooltip now overview tooltip --- .../components/key-created-success-dialog.tsx | 6 +-- .../table/components/inline-filter.tsx | 6 +-- .../table/components/override-indicator.tsx | 6 +-- .../components/logs/refresh-button/index.tsx | 6 +-- .../components/overview-tooltip.example.tsx | 47 +++++++++++++++++++ .../design/components/overview-tooltip.mdx | 36 ++++++++++++++ .../ui/src/components/overview-tooltip.tsx | 9 ++-- internal/ui/src/index.ts | 11 +++-- 8 files changed, 107 insertions(+), 20 deletions(-) create mode 100644 apps/engineering/content/design/components/overview-tooltip.example.tsx create mode 100644 apps/engineering/content/design/components/overview-tooltip.mdx rename apps/dashboard/app/(app)/ratelimits/[namespaceId]/_overview/components/table/components/ratelimit-overview-tooltip.tsx => internal/ui/src/components/overview-tooltip.tsx (76%) diff --git a/apps/dashboard/app/(app)/apis/[apiId]/_components/create-key/components/key-created-success-dialog.tsx b/apps/dashboard/app/(app)/apis/[apiId]/_components/create-key/components/key-created-success-dialog.tsx index 8ccc8f7658..3b155db579 100644 --- a/apps/dashboard/app/(app)/apis/[apiId]/_components/create-key/components/key-created-success-dialog.tsx +++ b/apps/dashboard/app/(app)/apis/[apiId]/_components/create-key/components/key-created-success-dialog.tsx @@ -1,6 +1,5 @@ "use client"; -import { RatelimitOverviewTooltip } from "@/app/(app)/ratelimits/[namespaceId]/_overview/components/table/components/ratelimit-overview-tooltip"; import { CopyButton } from "@/components/dashboard/copy-button"; import { Dialog, DialogContent } from "@/components/ui/dialog"; import { Popover, PopoverContent } from "@/components/ui/popover"; @@ -16,6 +15,7 @@ import { Plus, TriangleWarning2, } from "@unkey/icons"; +import { OverviewTooltip } from "@unkey/ui"; import { Button } from "@unkey/ui"; import { useRef, useState } from "react"; import { SecretKey } from "./secret-key"; @@ -132,7 +132,7 @@ export const KeyCreatedSuccessDialog = ({
{keyData.id}
- {keyData.name ?? "Unnamed Key"}
- + - + ); }; diff --git a/apps/dashboard/app/(app)/ratelimits/[namespaceId]/_overview/components/table/components/override-indicator.tsx b/apps/dashboard/app/(app)/ratelimits/[namespaceId]/_overview/components/table/components/override-indicator.tsx index 6dc84e809f..2250173161 100644 --- a/apps/dashboard/app/(app)/ratelimits/[namespaceId]/_overview/components/table/components/override-indicator.tsx +++ b/apps/dashboard/app/(app)/ratelimits/[namespaceId]/_overview/components/table/components/override-indicator.tsx @@ -3,10 +3,10 @@ import { cn } from "@/lib/utils"; import type { RatelimitOverviewLog } from "@unkey/clickhouse/src/ratelimits"; import { ArrowDotAntiClockwise, Focus, TriangleWarning2 } from "@unkey/icons"; import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@unkey/ui"; +import { OverviewTooltip } from "@unkey/ui"; import ms from "ms"; import { calculateBlockedPercentage } from "../utils/calculate-blocked-percentage"; import { getStatusStyle } from "../utils/get-row-class"; -import { RatelimitOverviewTooltip } from "./ratelimit-overview-tooltip"; type IdentifierColumnProps = { log: RatelimitOverviewLog; @@ -25,7 +25,7 @@ export const IdentifierColumn = ({ log }: IdentifierColumnProps) => { return (
- {isFullyBlocked ? ( @@ -43,7 +43,7 @@ export const IdentifierColumn = ({ log }: IdentifierColumnProps) => {
- +
- + ); }; diff --git a/apps/engineering/content/design/components/overview-tooltip.example.tsx b/apps/engineering/content/design/components/overview-tooltip.example.tsx new file mode 100644 index 0000000000..2280902257 --- /dev/null +++ b/apps/engineering/content/design/components/overview-tooltip.example.tsx @@ -0,0 +1,47 @@ +import { RenderComponentWithSnippet } from "@/app/components/render"; +import { Row } from "@/app/components/row"; +import { OverviewTooltip } from "@unkey/ui"; + +export function OverviewTooltipExample() { + return ( +
+

OverviewTooltip Position Side

+ +
+ + + Right Tooltip + + + Left Tooltip + + + Top Tooltip + + + + + Bottom Tooltip + + + Custom Alignment + + + Disabled Tooltip + + +
+ +
+ ); +} diff --git a/apps/engineering/content/design/components/overview-tooltip.mdx b/apps/engineering/content/design/components/overview-tooltip.mdx new file mode 100644 index 0000000000..5ec4b01ff4 --- /dev/null +++ b/apps/engineering/content/design/components/overview-tooltip.mdx @@ -0,0 +1,36 @@ +--- +title: OverviewTooltip +description: The Overview Tooltip is a specialized tooltip component that provides contextual information about elements in a consistent and accessible way. It's built on top of the base Tooltip component with additional styling and positioning options. +--- +import { OverviewTooltipExample } from "./overview-tooltip.example" + +## Features + +- Customizable positioning (top, right, bottom, left) +- Alignment control (start, center, end) +- Side offset adjustment +- Disabled state support +- Child element support via `asChild` prop + +## Usage + + + +## Props + +| Prop | Type | Default | Description | +|-----------|-------------------------|-----------|--------------------------------------------------| +| content | React.ReactNode | - | The content to display in the tooltip | +| position | TooltipPosition | - | Configuration for tooltip positioning | +| disabled | boolean | false | Whether the tooltip is disabled | +| asChild | boolean | false | Whether to render the trigger as a child element | + +## Position Configuration + +The `position` prop accepts an object with the following properties: + +| Property | Type | Default | Description | +|-------------|-------------------------|-----------|--------------------------------------------------| +| side | "top" \| "right" \| "bottom" \| "left" | "right" | The side where the tooltip appears | +| align | "start" \| "center" \| "end" | "center" | The alignment of the tooltip | +| sideOffset | number | - | The offset from the side in pixels | \ No newline at end of file diff --git a/apps/dashboard/app/(app)/ratelimits/[namespaceId]/_overview/components/table/components/ratelimit-overview-tooltip.tsx b/internal/ui/src/components/overview-tooltip.tsx similarity index 76% rename from apps/dashboard/app/(app)/ratelimits/[namespaceId]/_overview/components/table/components/ratelimit-overview-tooltip.tsx rename to internal/ui/src/components/overview-tooltip.tsx index 4793da1f36..8b12684061 100644 --- a/apps/dashboard/app/(app)/ratelimits/[namespaceId]/_overview/components/table/components/ratelimit-overview-tooltip.tsx +++ b/internal/ui/src/components/overview-tooltip.tsx @@ -1,5 +1,6 @@ -import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@unkey/ui"; -import type { PropsWithChildren } from "react"; +// biome-ignore lint: React in this context is used throughout, so biome will change to types because no APIs are used even though React is needed. +import React, { type PropsWithChildren } from "react"; +import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./tooltip"; type TooltipPosition = { side?: "top" | "right" | "bottom" | "left"; @@ -7,7 +8,7 @@ type TooltipPosition = { sideOffset?: number; }; -export const RatelimitOverviewTooltip = ({ +const OverviewTooltip = ({ content, children, position, @@ -35,3 +36,5 @@ export const RatelimitOverviewTooltip = ({ ); }; + +export { OverviewTooltip }; diff --git a/internal/ui/src/index.ts b/internal/ui/src/index.ts index bf5f3ef173..18654d0c2a 100644 --- a/internal/ui/src/index.ts +++ b/internal/ui/src/index.ts @@ -1,11 +1,12 @@ export * from "./components/button"; -export * from "./components/id"; -export * from "./components/tooltip"; export * from "./components/date-time/date-time"; -export * from "./components/inline-link"; -export * from "./components/input"; export * from "./components/empty"; export * from "./components/form"; +export * from "./components/id"; +export * from "./components/inline-link"; +export * from "./components/input"; +export * from "./components/overview-tooltip"; +export * from "./components/settings-card"; export * from "./components/textarea"; export * from "./components/timestamp-info"; -export * from "./components/settings-card"; +export * from "./components/tooltip"; From aee3d0af765a1a45bb6dbaa790a92497031897cb Mon Sep 17 00:00:00 2001 From: Michael Silva Date: Wed, 30 Apr 2025 16:34:56 -0400 Subject: [PATCH 02/14] swap more tooltips to overview tooltip component --- .../table/components/override-indicator.tsx | 16 +--- .../components/outcome-explainer.tsx | 27 +++---- .../table/components/status-cell/index.tsx | 22 +++--- .../components/table/keys-list.tsx | 37 ++++----- .../authorization/roles/[roleId]/tree.tsx | 37 +++++---- .../table/components/override-indicator.tsx | 77 +++++++++---------- .../dashboard/root-key-table/index.tsx | 27 +++---- .../logs/details/request-response-details.tsx | 19 +++-- .../components/search-example-tooltip.tsx | 66 ++++++++-------- .../components/logs/queries/list-group.tsx | 54 ++++++------- .../logs/queries/queries-overflow-tooltip.tsx | 19 ++--- .../navigation/sidebar/team-switcher.tsx | 22 +++--- .../dashboard/components/stats-card/index.tsx | 28 +++---- .../ui/src/components/overview-tooltip.tsx | 26 ++++++- 14 files changed, 225 insertions(+), 252 deletions(-) diff --git a/apps/dashboard/app/(app)/apis/[apiId]/_overview/components/table/components/override-indicator.tsx b/apps/dashboard/app/(app)/apis/[apiId]/_overview/components/table/components/override-indicator.tsx index ff95f96a86..497603c1d9 100644 --- a/apps/dashboard/app/(app)/apis/[apiId]/_overview/components/table/components/override-indicator.tsx +++ b/apps/dashboard/app/(app)/apis/[apiId]/_overview/components/table/components/override-indicator.tsx @@ -2,7 +2,7 @@ import { cn } from "@/lib/utils"; import type { KeysOverviewLog } from "@unkey/clickhouse/src/keys/keys"; import { TriangleWarning2 } from "@unkey/icons"; -import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@unkey/ui"; +import { OverviewTooltip } from "@unkey/ui"; import Link from "next/link"; import { getErrorPercentage, getErrorSeverity } from "../utils/calculate-blocked-percentage"; @@ -14,17 +14,9 @@ export const KeyTooltip = ({ content: React.ReactNode; }) => { return ( - - - {children} - - {content} - - - + + {children} + ); }; diff --git a/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/bar-chart/components/outcome-explainer.tsx b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/bar-chart/components/outcome-explainer.tsx index 6ca2e2488a..8bb3e58cd4 100644 --- a/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/bar-chart/components/outcome-explainer.tsx +++ b/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 { OverviewTooltip } 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 ( - - - -
{children}
- - +
API Key Activity
Last 36 hours
@@ -145,8 +144,10 @@ export function OutcomeExplainer({ children, timeseries }: OutcomeExplainerProps
No verification activity
)}
- - - +
+ } + > +
{children}
+ ); } diff --git a/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/status-cell/index.tsx b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/status-cell/index.tsx index 4e0e2d83f3..adb9ff1d93 100644 --- a/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/status-cell/index.tsx +++ b/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 { OverviewTooltip } from "@unkey/ui"; import { StatusBadge } from "./components/status-badge"; import { useKeyStatus } from "./use-key-status"; @@ -15,7 +14,6 @@ type StatusDisplayProps = { export const StatusDisplay = ({ keyAuthId, keyData }: 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 () => { @@ -58,12 +56,10 @@ export const StatusDisplay = ({ keyAuthId, keyData }: StatusDisplayProps) => { } return ( - - - setIsOpen(!isOpen)} className="cursor-pointer"> - - - + {statuses && statuses.length > 1 && (
@@ -136,8 +132,10 @@ export const StatusDisplay = ({ keyAuthId, keyData }: StatusDisplayProps) => {
))} - - - + + } + > + + ); }; diff --git a/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/components/table/keys-list.tsx b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/components/table/keys-list.tsx index 707b04f3dd..1654da711f 100644 --- a/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/components/table/keys-list.tsx +++ b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/components/table/keys-list.tsx @@ -3,15 +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, Focus, Key } from "@unkey/icons"; -import { - AnimatedLoadingSpinner, - Button, - Empty, - Tooltip, - TooltipContent, - TooltipProvider, - TooltipTrigger, -} from "@unkey/ui"; +import { AnimatedLoadingSpinner, Button, Empty, OverviewTooltip } from "@unkey/ui"; import { cn } from "@unkey/ui/src/lib/utils"; import Link from "next/link"; import { useCallback, useMemo, useState } from "react"; @@ -82,17 +74,11 @@ export const KeysList = ({
{identity ? ( - - - - {React.cloneElement(iconContainer, { - className: cn(iconContainer.props.className, "cursor-pointer"), - })} - - + This key is associated with the identity:{" "} {key.identity_id ? ( {identity} )} - - - +
+ } + asChild + > + {React.cloneElement(iconContainer, { + className: cn(iconContainer.props.className, "cursor-pointer"), + })} + ) : ( iconContainer )} diff --git a/apps/dashboard/app/(app)/authorization/roles/[roleId]/tree.tsx b/apps/dashboard/app/(app)/authorization/roles/[roleId]/tree.tsx index 3d85bef102..9dbf5ef3ea 100644 --- a/apps/dashboard/app/(app)/authorization/roles/[roleId]/tree.tsx +++ b/apps/dashboard/app/(app)/authorization/roles/[roleId]/tree.tsx @@ -2,8 +2,8 @@ import { CopyButton } from "@/components/dashboard/copy-button"; import { Switch } from "@/components/ui/switch"; -import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"; import { ChevronRight } from "@unkey/icons"; +import { OverviewTooltip } from "@unkey/ui"; import type React from "react"; import { useEffect, useState } from "react"; import { PermissionToggle } from "./permission-toggle"; @@ -88,9 +88,21 @@ export const RecursivePermission: React.FC< if (!hasChildren) { return ( - - + 
{name}
+
+ +
+
+ } + position={{ side: "top", align: "start" }} + > +
setHover(true)} @@ -101,21 +113,8 @@ export const RecursivePermission: React.FC< 
{k}
{description &&

{description}

} - - -
- 
{name}
-
- -
-
- - + + ); } diff --git a/apps/dashboard/app/(app)/ratelimits/[namespaceId]/_overview/components/table/components/override-indicator.tsx b/apps/dashboard/app/(app)/ratelimits/[namespaceId]/_overview/components/table/components/override-indicator.tsx index 2250173161..78ff3bb4c8 100644 --- a/apps/dashboard/app/(app)/ratelimits/[namespaceId]/_overview/components/table/components/override-indicator.tsx +++ b/apps/dashboard/app/(app)/ratelimits/[namespaceId]/_overview/components/table/components/override-indicator.tsx @@ -2,7 +2,6 @@ import { formatNumber } from "@/lib/fmt"; import { cn } from "@/lib/utils"; import type { RatelimitOverviewLog } from "@unkey/clickhouse/src/ratelimits"; import { ArrowDotAntiClockwise, Focus, TriangleWarning2 } from "@unkey/icons"; -import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@unkey/ui"; import { OverviewTooltip } from "@unkey/ui"; import ms from "ms"; import { calculateBlockedPercentage } from "../utils/calculate-blocked-percentage"; @@ -78,48 +77,44 @@ type OverrideIndicatorProps = { }; const OverrideIndicator = ({ log, style }: OverrideIndicatorProps) => ( - - - -
-
-
+ +
+
- - -
-
- +
+
+ Custom override in effect +
-
-
- Custom override in effect -
+ {log.override && ( +
+ Limit set to{" "} + {formatNumber(log.override.limit)} + requests per {ms(log.override.duration)}
- {log.override && ( -
- Limit set to{" "} - {formatNumber(log.override.limit)} - requests per {ms(log.override.duration)} -
- )} -
+ )}
- - - +
+ } + asChild + > +
+
+
+
+ ); diff --git a/apps/dashboard/components/dashboard/root-key-table/index.tsx b/apps/dashboard/components/dashboard/root-key-table/index.tsx index aabf54e2c7..336f80f3e1 100644 --- a/apps/dashboard/components/dashboard/root-key-table/index.tsx +++ b/apps/dashboard/components/dashboard/root-key-table/index.tsx @@ -19,10 +19,9 @@ import { DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"; import { toast } from "@/components/ui/toaster"; -import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"; import { trpc } from "@/lib/trpc/client"; import type { ColumnDef } from "@tanstack/react-table"; -import { Button } from "@unkey/ui"; +import { Button, OverviewTooltip } from "@unkey/ui"; import { ArrowUpDown, Minus, MoreHorizontal, MoreVertical, Trash } from "lucide-react"; import ms from "ms"; import Link from "next/link"; @@ -89,17 +88,19 @@ export const RootKeyTable: React.FC = ({ data }) => { accessorKey: "start", header: "Key", cell: ({ row }) => ( - - - - {row.getValue("start")}... - - - - This is the first part of the key to visually match it. We don't store the full key for - security reasons. - - + + This is the first part of the key to visually match it. We don't store the full key + for security reasons. +

+ } + > + + {row.getValue("start")}... + + ), }, { diff --git a/apps/dashboard/components/logs/details/request-response-details.tsx b/apps/dashboard/components/logs/details/request-response-details.tsx index e29e039ed4..7d309ccd0a 100644 --- a/apps/dashboard/components/logs/details/request-response-details.tsx +++ b/apps/dashboard/components/logs/details/request-response-details.tsx @@ -1,6 +1,6 @@ import { toast } from "@/components/ui/toaster"; -import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"; import { cn } from "@/lib/utils"; +import { OverviewTooltip } from "@unkey/ui"; import type { ReactNode } from "react"; type Field = { @@ -71,7 +71,7 @@ export const RequestResponseDetails = ({ fields, className )} onClick={!field.skipTooltip ? () => handleClick(field) : undefined} > - {field.label} + {field.label} {field.description(field.content as NonNullable)} @@ -83,12 +83,15 @@ export const RequestResponseDetails = ({ fields, className } return ( - - - {baseContent} - {field.tooltipContent} - - + + {baseContent} + ); }; diff --git a/apps/dashboard/components/logs/llm-search/components/search-example-tooltip.tsx b/apps/dashboard/components/logs/llm-search/components/search-example-tooltip.tsx index 7ad599b177..1f6b55b19d 100644 --- a/apps/dashboard/components/logs/llm-search/components/search-example-tooltip.tsx +++ b/apps/dashboard/components/logs/llm-search/components/search-example-tooltip.tsx @@ -1,5 +1,5 @@ import { CaretRightOutline, CircleInfoSparkle } from "@unkey/icons"; -import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "components/ui/tooltip"; +import { OverviewTooltip } from "@unkey/ui"; type SearchExampleTooltipProps = { onSelectExample: (query: string) => void; @@ -17,40 +17,36 @@ export const SearchExampleTooltip: React.FC = ({ ]; return ( - - - -
- + +
+ Try queries like: + (click to use)
- - -
-
- Try queries like: - (click to use) -
-
    - {examples.map((example) => ( -
  • - - -
    • - ))} -
-
- - - +
    + {examples.map((example) => ( +
  • + + +
    • + ))} +
+
+ } + delayDuration={150} + > +
+ +
+ ); }; diff --git a/apps/dashboard/components/logs/queries/list-group.tsx b/apps/dashboard/components/logs/queries/list-group.tsx index 0d1298249b..5980263e3f 100644 --- a/apps/dashboard/components/logs/queries/list-group.tsx +++ b/apps/dashboard/components/logs/queries/list-group.tsx @@ -1,7 +1,7 @@ import { toast } from "@/components/ui/toaster"; import { cn } from "@/lib/utils"; import { Bookmark, CircleCheck, Layers2 } from "@unkey/icons"; -import { Tooltip, TooltipContent, TooltipTrigger } from "@unkey/ui"; +import { OverviewTooltip } from "@unkey/ui"; import { useEffect, useState } from "react"; import { useQueries } from "./queries-context"; import { QueriesItemRow } from "./queries-item-row"; @@ -51,7 +51,6 @@ export function ListGroup({ selectedIndex, changeBookmark, }: ListGroupProps) { - const [toolTipOpen, setToolTipOpen] = useState(false); const [toastMessage, setToastMessage] = useState(); const [tooltipMessage, setTooltipMessage] = useState( filterList.bookmarked ? tooltipMessageOptions.saved : tooltipMessageOptions.save, @@ -81,16 +80,11 @@ export function ListGroup({ } const handleMouseEnter = () => { - setToolTipOpen(true); setTooltipMessage( filterList.bookmarked ? tooltipMessageOptions.remove : tooltipMessageOptions.save, ); }; - const handleMouseLeave = () => { - setToolTipOpen(false); - }; - const handleSelection = () => { applyFilterGroup(filterList.id); }; @@ -147,33 +141,29 @@ export function ListGroup({
- - - - - + +
{ } return ( - - - - - + {list?.map((item) => { return ( @@ -28,7 +23,9 @@ export const QueriesOverflow = ({ list }: QueriesOverflowProps) => { ); })} - - + } + > + + ); }; diff --git a/apps/dashboard/components/navigation/sidebar/team-switcher.tsx b/apps/dashboard/components/navigation/sidebar/team-switcher.tsx index 1663a48126..be9642fd67 100644 --- a/apps/dashboard/components/navigation/sidebar/team-switcher.tsx +++ b/apps/dashboard/components/navigation/sidebar/team-switcher.tsx @@ -13,11 +13,11 @@ import { import { ScrollArea } from "@/components/ui/scroll-area"; import { useSidebar } from "@/components/ui/sidebar"; import { toast } from "@/components/ui/toaster"; -import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"; import { setSessionCookie } from "@/lib/auth/cookies"; import { trpc } from "@/lib/trpc/client"; import { cn } from "@/lib/utils"; import { ChevronExpandY } from "@unkey/icons"; +import { OverviewTooltip } from "@unkey/ui"; import { Check, Plus, UserPlus } from "lucide-react"; import Link from "next/link"; import { useRouter } from "next/navigation"; @@ -108,16 +108,16 @@ export const WorkspaceSwitcher: React.FC = (props): JSX.Element => { {isUserMembershipsLoading ? ( ) : !isCollapsed ? ( - - - - {props.workspace.name} - - - - {props.workspace.name} - - + {props.workspace.name}} + > + + {props.workspace.name} + + ) : null}
{!isCollapsed && ( diff --git a/apps/dashboard/components/stats-card/index.tsx b/apps/dashboard/components/stats-card/index.tsx index 24d0d5fbcc..f0bd98d414 100644 --- a/apps/dashboard/components/stats-card/index.tsx +++ b/apps/dashboard/components/stats-card/index.tsx @@ -1,6 +1,6 @@ "use client"; import { ProgressBar } from "@unkey/icons"; -import { Tooltip, TooltipContent, TooltipTrigger } from "@unkey/ui"; +import { OverviewTooltip } from "@unkey/ui"; import Link from "next/link"; import type { ReactNode } from "react"; @@ -32,28 +32,18 @@ export const StatsCard = ({
{icon} - - -
- {name} -
- - + +
{name} - - +
+
{secondaryId && ( - - -
- {secondaryId} -
- - + +
{secondaryId} - - +
+ )}
{rightContent &&
{rightContent}
} diff --git a/internal/ui/src/components/overview-tooltip.tsx b/internal/ui/src/components/overview-tooltip.tsx index 8b12684061..79263f57f0 100644 --- a/internal/ui/src/components/overview-tooltip.tsx +++ b/internal/ui/src/components/overview-tooltip.tsx @@ -1,6 +1,16 @@ // biome-ignore lint: React in this context is used throughout, so biome will change to types because no APIs are used even though React is needed. import React, { type PropsWithChildren } from "react"; import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./tooltip"; +import { cn } from "../lib/utils"; + +const variants = { + primary: + "bg-gray-12 text-gray-1 border-accent-6 px-3 py-2 text-xs font-medium shadow-md rounded-md", + secondary: + "bg-gray-1 text-accent-12 border border-gray-4 px-3 py-2 text-xs font-medium shadow-md rounded-md", +} as const; + +type TooltipVariant = keyof typeof variants; type TooltipPosition = { side?: "top" | "right" | "bottom" | "left"; @@ -9,23 +19,33 @@ type TooltipPosition = { }; const OverviewTooltip = ({ + delayDuration, content, children, position, disabled = false, asChild = false, + className, + variant = "primary", + triggerClassName, }: PropsWithChildren<{ + variant?: TooltipVariant; + delayDuration?: number; content: React.ReactNode; position?: TooltipPosition; disabled?: boolean; asChild?: boolean; + className?: string; + triggerClassName?: string; }>) => { return ( - + - {children} + + {children} + Date: Fri, 2 May 2025 11:52:10 -0400 Subject: [PATCH 03/14] change name of tooltip to InfoTooltip --- .../components/key-created-success-dialog.tsx | 6 +++--- .../components/table/components/override-indicator.tsx | 6 +++--- .../bar-chart/components/outcome-explainer.tsx | 6 +++--- .../components/table/components/status-cell/index.tsx | 6 +++--- .../_components/components/table/keys-list.tsx | 6 +++--- .../app/(app)/authorization/roles/[roleId]/tree.tsx | 6 +++--- .../components/table/components/inline-filter.tsx | 6 +++--- .../components/table/components/override-indicator.tsx | 10 +++++----- ...-tooltip.example.tsx => detail-tooltip.example.tsx} | 0 .../{overview-tooltip.mdx => detail-tooltip.mdx} | 0 .../src/components/date-time/components/time-split.tsx | 2 +- .../{overview-tooltip.tsx => info-tooltip.tsx} | 6 +++--- internal/ui/src/components/settings-card.tsx | 2 +- internal/ui/src/index.ts | 2 +- 14 files changed, 32 insertions(+), 32 deletions(-) rename apps/engineering/content/design/components/{overview-tooltip.example.tsx => detail-tooltip.example.tsx} (100%) rename apps/engineering/content/design/components/{overview-tooltip.mdx => detail-tooltip.mdx} (100%) rename internal/ui/src/components/{overview-tooltip.tsx => info-tooltip.tsx} (91%) diff --git a/apps/dashboard/app/(app)/apis/[apiId]/_components/create-key/components/key-created-success-dialog.tsx b/apps/dashboard/app/(app)/apis/[apiId]/_components/create-key/components/key-created-success-dialog.tsx index 3b155db579..3663bddaed 100644 --- a/apps/dashboard/app/(app)/apis/[apiId]/_components/create-key/components/key-created-success-dialog.tsx +++ b/apps/dashboard/app/(app)/apis/[apiId]/_components/create-key/components/key-created-success-dialog.tsx @@ -15,7 +15,7 @@ import { Plus, TriangleWarning2, } from "@unkey/icons"; -import { OverviewTooltip } from "@unkey/ui"; +import { InfoTooltip } from "@unkey/ui"; import { Button } from "@unkey/ui"; import { useRef, useState } from "react"; import { SecretKey } from "./secret-key"; @@ -132,7 +132,7 @@ export const KeyCreatedSuccessDialog = ({
{keyData.id}
- {keyData.name ?? "Unnamed Key"}
- +
- + ); }; diff --git a/apps/dashboard/app/(app)/ratelimits/[namespaceId]/_overview/components/table/components/override-indicator.tsx b/apps/dashboard/app/(app)/ratelimits/[namespaceId]/_overview/components/table/components/override-indicator.tsx index 78ff3bb4c8..7f9b435759 100644 --- a/apps/dashboard/app/(app)/ratelimits/[namespaceId]/_overview/components/table/components/override-indicator.tsx +++ b/apps/dashboard/app/(app)/ratelimits/[namespaceId]/_overview/components/table/components/override-indicator.tsx @@ -2,7 +2,7 @@ import { formatNumber } from "@/lib/fmt"; import { cn } from "@/lib/utils"; import type { RatelimitOverviewLog } from "@unkey/clickhouse/src/ratelimits"; import { ArrowDotAntiClockwise, Focus, TriangleWarning2 } from "@unkey/icons"; -import { OverviewTooltip } from "@unkey/ui"; +import { InfoTooltip } from "@unkey/ui"; import ms from "ms"; import { calculateBlockedPercentage } from "../utils/calculate-blocked-percentage"; import { getStatusStyle } from "../utils/get-row-class"; @@ -24,7 +24,7 @@ export const IdentifierColumn = ({ log }: IdentifierColumnProps) => { return (
- {isFullyBlocked ? ( @@ -42,7 +42,7 @@ export const IdentifierColumn = ({ log }: IdentifierColumnProps) => {
- +
( - @@ -116,5 +116,5 @@ const OverrideIndicator = ({ log, style }: OverrideIndicatorProps) => ( )} />
- + ); diff --git a/apps/engineering/content/design/components/overview-tooltip.example.tsx b/apps/engineering/content/design/components/detail-tooltip.example.tsx similarity index 100% rename from apps/engineering/content/design/components/overview-tooltip.example.tsx rename to apps/engineering/content/design/components/detail-tooltip.example.tsx diff --git a/apps/engineering/content/design/components/overview-tooltip.mdx b/apps/engineering/content/design/components/detail-tooltip.mdx similarity index 100% rename from apps/engineering/content/design/components/overview-tooltip.mdx rename to apps/engineering/content/design/components/detail-tooltip.mdx diff --git a/internal/ui/src/components/date-time/components/time-split.tsx b/internal/ui/src/components/date-time/components/time-split.tsx index f66e847a6f..95af92dc0e 100644 --- a/internal/ui/src/components/date-time/components/time-split.tsx +++ b/internal/ui/src/components/date-time/components/time-split.tsx @@ -127,7 +127,7 @@ const TimeSplitInput: React.FC = ({ type }) => {
diff --git a/internal/ui/src/components/overview-tooltip.tsx b/internal/ui/src/components/info-tooltip.tsx similarity index 91% rename from internal/ui/src/components/overview-tooltip.tsx rename to internal/ui/src/components/info-tooltip.tsx index 79263f57f0..0143025f1d 100644 --- a/internal/ui/src/components/overview-tooltip.tsx +++ b/internal/ui/src/components/info-tooltip.tsx @@ -7,7 +7,7 @@ const variants = { primary: "bg-gray-12 text-gray-1 border-accent-6 px-3 py-2 text-xs font-medium shadow-md rounded-md", secondary: - "bg-gray-1 text-accent-12 border border-gray-4 px-3 py-2 text-xs font-medium shadow-md rounded-md", + "bg-gray-1 text-accent-12 border border-grayA-4 px-3 py-2 text-xs font-medium shadow-md rounded-md", } as const; type TooltipVariant = keyof typeof variants; @@ -18,7 +18,7 @@ type TooltipPosition = { sideOffset?: number; }; -const OverviewTooltip = ({ +const InfoTooltip = ({ delayDuration, content, children, @@ -57,4 +57,4 @@ const OverviewTooltip = ({ ); }; -export { OverviewTooltip }; +export { InfoTooltip }; diff --git a/internal/ui/src/components/settings-card.tsx b/internal/ui/src/components/settings-card.tsx index 95a22e0409..f78b9b675b 100644 --- a/internal/ui/src/components/settings-card.tsx +++ b/internal/ui/src/components/settings-card.tsx @@ -27,7 +27,7 @@ export function SettingCard({ }; const borderClass = { - "border border-gray-4": border !== "none", + "border border-grayA-4": border !== "none", "border-t-0": border === "bottom", "border-b-0": border === "top", }; diff --git a/internal/ui/src/index.ts b/internal/ui/src/index.ts index 18654d0c2a..f6b0071add 100644 --- a/internal/ui/src/index.ts +++ b/internal/ui/src/index.ts @@ -5,7 +5,7 @@ export * from "./components/form"; export * from "./components/id"; export * from "./components/inline-link"; export * from "./components/input"; -export * from "./components/overview-tooltip"; +export * from "./components/info-tooltip"; export * from "./components/settings-card"; export * from "./components/textarea"; export * from "./components/timestamp-info"; From 132348f3953214ded664bd53d0e2e763bf5ae6ad Mon Sep 17 00:00:00 2001 From: Michael Silva Date: Fri, 2 May 2025 14:28:27 -0400 Subject: [PATCH 04/14] name change to InfoTooltip --- .../dashboard/root-key-table/index.tsx | 6 +-- .../logs/details/request-response-details.tsx | 6 +-- .../components/search-example-tooltip.tsx | 6 +-- .../components/logs/queries/list-group.tsx | 6 +-- .../logs/queries/queries-overflow-tooltip.tsx | 6 +-- .../components/logs/refresh-button/index.tsx | 6 +-- .../navigation/sidebar/team-switcher.tsx | 6 +-- .../dashboard/components/stats-card/index.tsx | 10 ++-- .../components/detail-tooltip.example.tsx | 47 ------------------- .../components/info-tooltip.example.tsx | 42 +++++++++++++++++ .../{detail-tooltip.mdx => info-tooltip.mdx} | 8 ++-- internal/ui/src/components/info-tooltip.tsx | 11 +++-- internal/ui/src/components/timestamp-info.tsx | 2 +- internal/ui/src/components/tooltip.tsx | 2 +- 14 files changed, 81 insertions(+), 83 deletions(-) delete mode 100644 apps/engineering/content/design/components/detail-tooltip.example.tsx create mode 100644 apps/engineering/content/design/components/info-tooltip.example.tsx rename apps/engineering/content/design/components/{detail-tooltip.mdx => info-tooltip.mdx} (79%) diff --git a/apps/dashboard/components/dashboard/root-key-table/index.tsx b/apps/dashboard/components/dashboard/root-key-table/index.tsx index 336f80f3e1..7b59250202 100644 --- a/apps/dashboard/components/dashboard/root-key-table/index.tsx +++ b/apps/dashboard/components/dashboard/root-key-table/index.tsx @@ -21,7 +21,7 @@ import { import { toast } from "@/components/ui/toaster"; import { trpc } from "@/lib/trpc/client"; import type { ColumnDef } from "@tanstack/react-table"; -import { Button, OverviewTooltip } from "@unkey/ui"; +import { Button, InfoTooltip } from "@unkey/ui"; import { ArrowUpDown, Minus, MoreHorizontal, MoreVertical, Trash } from "lucide-react"; import ms from "ms"; import Link from "next/link"; @@ -88,7 +88,7 @@ export const RootKeyTable: React.FC = ({ data }) => { accessorKey: "start", header: "Key", cell: ({ row }) => ( - @@ -100,7 +100,7 @@ export const RootKeyTable: React.FC = ({ data }) => { {row.getValue("start")}... - + ), }, { diff --git a/apps/dashboard/components/logs/details/request-response-details.tsx b/apps/dashboard/components/logs/details/request-response-details.tsx index 7d309ccd0a..4f6718ddfe 100644 --- a/apps/dashboard/components/logs/details/request-response-details.tsx +++ b/apps/dashboard/components/logs/details/request-response-details.tsx @@ -1,6 +1,6 @@ import { toast } from "@/components/ui/toaster"; import { cn } from "@/lib/utils"; -import { OverviewTooltip } from "@unkey/ui"; +import { InfoTooltip } from "@unkey/ui"; import type { ReactNode } from "react"; type Field = { @@ -83,7 +83,7 @@ export const RequestResponseDetails = ({ fields, className } return ( - ({ fields, className triggerClassName="w-full flex flex-row" > {baseContent} - + ); }; diff --git a/apps/dashboard/components/logs/llm-search/components/search-example-tooltip.tsx b/apps/dashboard/components/logs/llm-search/components/search-example-tooltip.tsx index 1f6b55b19d..4cf18ca44e 100644 --- a/apps/dashboard/components/logs/llm-search/components/search-example-tooltip.tsx +++ b/apps/dashboard/components/logs/llm-search/components/search-example-tooltip.tsx @@ -1,5 +1,5 @@ import { CaretRightOutline, CircleInfoSparkle } from "@unkey/icons"; -import { OverviewTooltip } from "@unkey/ui"; +import { InfoTooltip } from "@unkey/ui"; type SearchExampleTooltipProps = { onSelectExample: (query: string) => void; @@ -17,7 +17,7 @@ export const SearchExampleTooltip: React.FC = ({ ]; return ( - @@ -47,6 +47,6 @@ export const SearchExampleTooltip: React.FC = ({
- + ); }; diff --git a/apps/dashboard/components/logs/queries/list-group.tsx b/apps/dashboard/components/logs/queries/list-group.tsx index 5980263e3f..e96e01b8ed 100644 --- a/apps/dashboard/components/logs/queries/list-group.tsx +++ b/apps/dashboard/components/logs/queries/list-group.tsx @@ -1,7 +1,7 @@ import { toast } from "@/components/ui/toaster"; import { cn } from "@/lib/utils"; import { Bookmark, CircleCheck, Layers2 } from "@unkey/icons"; -import { OverviewTooltip } from "@unkey/ui"; +import { InfoTooltip } from "@unkey/ui"; import { useEffect, useState } from "react"; import { useQueries } from "./queries-context"; import { QueriesItemRow } from "./queries-item-row"; @@ -142,7 +142,7 @@ export function ListGroup({ className="flex flex-col h-[24px] pr-2 mt-1.5 w-[24px]" onMouseEnter={handleMouseEnter} > - - +
{ } return ( - @@ -26,6 +26,6 @@ export const QueriesOverflow = ({ list }: QueriesOverflowProps) => { } > - + ); }; diff --git a/apps/dashboard/components/logs/refresh-button/index.tsx b/apps/dashboard/components/logs/refresh-button/index.tsx index 224642ada4..9fc9163398 100644 --- a/apps/dashboard/components/logs/refresh-button/index.tsx +++ b/apps/dashboard/components/logs/refresh-button/index.tsx @@ -1,7 +1,7 @@ import { KeyboardButton } from "@/components/keyboard-button"; import { useKeyboardShortcut } from "@/hooks/use-keyboard-shortcut"; import { Refresh3 } from "@unkey/icons"; -import { OverviewTooltip } from "@unkey/ui"; +import { InfoTooltip } from "@unkey/ui"; import { Button } from "@unkey/ui"; import { useState } from "react"; @@ -47,7 +47,7 @@ export const RefreshButton = ({ onRefresh, isEnabled, isLive, toggleLive }: Refr }); return ( -
- + ); }; diff --git a/apps/dashboard/components/navigation/sidebar/team-switcher.tsx b/apps/dashboard/components/navigation/sidebar/team-switcher.tsx index be9642fd67..df3ccc99f3 100644 --- a/apps/dashboard/components/navigation/sidebar/team-switcher.tsx +++ b/apps/dashboard/components/navigation/sidebar/team-switcher.tsx @@ -17,7 +17,7 @@ import { setSessionCookie } from "@/lib/auth/cookies"; import { trpc } from "@/lib/trpc/client"; import { cn } from "@/lib/utils"; import { ChevronExpandY } from "@unkey/icons"; -import { OverviewTooltip } from "@unkey/ui"; +import { InfoTooltip } from "@unkey/ui"; import { Check, Plus, UserPlus } from "lucide-react"; import Link from "next/link"; import { useRouter } from "next/navigation"; @@ -108,7 +108,7 @@ export const WorkspaceSwitcher: React.FC = (props): JSX.Element => { {isUserMembershipsLoading ? ( ) : !isCollapsed ? ( - = (props): JSX.Element => { {props.workspace.name} - + ) : null}
{!isCollapsed && ( diff --git a/apps/dashboard/components/stats-card/index.tsx b/apps/dashboard/components/stats-card/index.tsx index f0bd98d414..05e8ed68bd 100644 --- a/apps/dashboard/components/stats-card/index.tsx +++ b/apps/dashboard/components/stats-card/index.tsx @@ -1,6 +1,6 @@ "use client"; import { ProgressBar } from "@unkey/icons"; -import { OverviewTooltip } from "@unkey/ui"; +import { InfoTooltip } from "@unkey/ui"; import Link from "next/link"; import type { ReactNode } from "react"; @@ -32,18 +32,18 @@ export const StatsCard = ({
{icon} - +
{name}
- +
{secondaryId && ( - +
{secondaryId}
- + )}
{rightContent &&
{rightContent}
} diff --git a/apps/engineering/content/design/components/detail-tooltip.example.tsx b/apps/engineering/content/design/components/detail-tooltip.example.tsx deleted file mode 100644 index 2280902257..0000000000 --- a/apps/engineering/content/design/components/detail-tooltip.example.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import { RenderComponentWithSnippet } from "@/app/components/render"; -import { Row } from "@/app/components/row"; -import { OverviewTooltip } from "@unkey/ui"; - -export function OverviewTooltipExample() { - return ( -
-

OverviewTooltip Position Side

- -
- - - Right Tooltip - - - Left Tooltip - - - Top Tooltip - - - - - Bottom Tooltip - - - Custom Alignment - - - Disabled Tooltip - - -
- -
- ); -} diff --git a/apps/engineering/content/design/components/info-tooltip.example.tsx b/apps/engineering/content/design/components/info-tooltip.example.tsx new file mode 100644 index 0000000000..c9e70bd943 --- /dev/null +++ b/apps/engineering/content/design/components/info-tooltip.example.tsx @@ -0,0 +1,42 @@ +import { RenderComponentWithSnippet } from "@/app/components/render"; +import { Row } from "@/app/components/row"; +import { InfoTooltip } from "@unkey/ui"; + +export function InfoTooltipExample() { + return ( +
+

InfoTooltip Position Side

+ +
+ + Right Tooltip + + Left Tooltip + + + Top Tooltip + + + + + Bottom Tooltip + + + Custom Alignment + + + Disabled Tooltip + + +
+ +
+ ); +} diff --git a/apps/engineering/content/design/components/detail-tooltip.mdx b/apps/engineering/content/design/components/info-tooltip.mdx similarity index 79% rename from apps/engineering/content/design/components/detail-tooltip.mdx rename to apps/engineering/content/design/components/info-tooltip.mdx index 5ec4b01ff4..67f5f75fab 100644 --- a/apps/engineering/content/design/components/detail-tooltip.mdx +++ b/apps/engineering/content/design/components/info-tooltip.mdx @@ -1,8 +1,8 @@ --- -title: OverviewTooltip -description: The Overview Tooltip is a specialized tooltip component that provides contextual information about elements in a consistent and accessible way. It's built on top of the base Tooltip component with additional styling and positioning options. +title: InfoTooltip +description: The Info Tooltip is a specialized tooltip component that provides contextual information about elements in a consistent and accessible way. It's built on top of the base Tooltip component with additional styling and positioning options. --- -import { OverviewTooltipExample } from "./overview-tooltip.example" +import { InfoTooltipExample } from "./info-tooltip.example" ## Features @@ -14,7 +14,7 @@ import { OverviewTooltipExample } from "./overview-tooltip.example" ## Usage - + ## Props diff --git a/internal/ui/src/components/info-tooltip.tsx b/internal/ui/src/components/info-tooltip.tsx index 0143025f1d..21b08bbc1f 100644 --- a/internal/ui/src/components/info-tooltip.tsx +++ b/internal/ui/src/components/info-tooltip.tsx @@ -4,10 +4,13 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./tool import { cn } from "../lib/utils"; const variants = { - primary: - "bg-gray-12 text-gray-1 border-accent-6 px-3 py-2 text-xs font-medium shadow-md rounded-md", - secondary: - "bg-gray-1 text-accent-12 border border-grayA-4 px-3 py-2 text-xs font-medium shadow-md rounded-md", + primary: [ + "border border-grayA-4 hover:border-gray-8 bg-gray-2 dark:bg-black", + "focus:border focus:border-accent-12 focus:ring-2 focus:ring-grayA-4 focus-visible:outline-none focus:ring-offset-0", + ], + secondary: [ + "bg-gray-1 text-accent-12 border border-grayA-4 px-3 py-2 text-xs font-medium shadow-md rounded-lg", + ], } as const; type TooltipVariant = keyof typeof variants; diff --git a/internal/ui/src/components/timestamp-info.tsx b/internal/ui/src/components/timestamp-info.tsx index c63a8d574a..84ffaef4db 100644 --- a/internal/ui/src/components/timestamp-info.tsx +++ b/internal/ui/src/components/timestamp-info.tsx @@ -142,7 +142,7 @@ export const TimestampInfo: React.FC<{
diff --git a/internal/ui/src/components/tooltip.tsx b/internal/ui/src/components/tooltip.tsx index 2b3ef06303..2e6950530e 100644 --- a/internal/ui/src/components/tooltip.tsx +++ b/internal/ui/src/components/tooltip.tsx @@ -19,7 +19,7 @@ const TooltipContent = React.forwardRef< ref={ref} sideOffset={sideOffset} className={cn( - "z-50 overflow-hidden font-sans font-medium shadow-md rounded-lg leading-6 bg-gray-12 text-gray-1 px-2 py-1 gap-2 animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", + "z-50 overflow-hidden rounded-md border bg-secondary px-3 py-1.5 text-sm text-secondary-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", className, )} {...props} From 40c84b72fa2f7662685fefb3fcbd387ad245abed Mon Sep 17 00:00:00 2001 From: Michael Silva Date: Fri, 2 May 2025 18:50:04 -0400 Subject: [PATCH 05/14] small change layout import --- apps/dashboard/app/layout.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/dashboard/app/layout.tsx b/apps/dashboard/app/layout.tsx index 5b8ae085c3..cbd0430d91 100644 --- a/apps/dashboard/app/layout.tsx +++ b/apps/dashboard/app/layout.tsx @@ -1,7 +1,7 @@ import { CommandMenu } from "@/components/dashboard/command-menu"; import { Toaster } from "@/components/ui/toaster"; -import { TooltipProvider } from "@/components/ui/tooltip"; import { PHProvider, PostHogPageview } from "@/providers/PostHogProvider"; +import { TooltipProvider } from "@unkey/ui"; import "@/styles/tailwind/tailwind.css"; import "@unkey/ui/css"; From 48788acbce878063fcd0907dc097525bcce18f1d Mon Sep 17 00:00:00 2001 From: Michael Silva Date: Thu, 8 May 2025 16:17:17 -0400 Subject: [PATCH 06/14] working tooltips with styles --- .../components/key-created-success-dialog.tsx | 12 +--------- .../create-identity-options.tsx | 2 +- .../[apiId]/_components/create-key/index.tsx | 2 +- .../actions/components/key-info.tsx | 6 ++--- .../table/components/status-cell/index.tsx | 8 +++---- .../components/table/keys-list.tsx | 5 ++-- .../apis/_components/create-api-button.tsx | 7 +++++- apps/dashboard/app/(app)/apis/loading.tsx | 2 +- .../permissions/[permissionId]/navigation.tsx | 7 +++++- .../roles/[roleId]/navigation.tsx | 9 ++++++-- .../table/components/override-indicator.tsx | 14 +++++------ .../[namespaceId]/namespace-navbar.tsx | 4 +++- .../_components/create-namespace-button.tsx | 7 +++++- .../dashboard/api-key-table/index.tsx | 22 ++++++++++-------- .../dashboard/root-key-table/index.tsx | 1 + .../dashboard/components/logs/chart/index.tsx | 4 ++-- .../logs/details/request-response-details.tsx | 4 ++-- .../components/search-example-tooltip.tsx | 1 - .../overview-charts/overview-area-chart.tsx | 2 +- .../overview-charts/overview-bar-chart.tsx | 4 ++-- .../components/logs/queries/list-group.tsx | 7 +----- .../navigation/sidebar/team-switcher.tsx | 1 - .../components/chart/stats-chart.tsx | 4 ++-- internal/ui/src/components/id.tsx | 23 ++++++++----------- internal/ui/src/components/info-tooltip.tsx | 14 ++++------- internal/ui/src/components/timestamp-info.tsx | 2 +- internal/ui/src/index.ts | 1 + 27 files changed, 86 insertions(+), 89 deletions(-) diff --git a/apps/dashboard/app/(app)/apis/[apiId]/_components/create-key/components/key-created-success-dialog.tsx b/apps/dashboard/app/(app)/apis/[apiId]/_components/create-key/components/key-created-success-dialog.tsx index 73fe41bca9..afc16d4822 100644 --- a/apps/dashboard/app/(app)/apis/[apiId]/_components/create-key/components/key-created-success-dialog.tsx +++ b/apps/dashboard/app/(app)/apis/[apiId]/_components/create-key/components/key-created-success-dialog.tsx @@ -4,17 +4,7 @@ import { ConfirmPopover } from "@/components/confirmation-popover"; import { CopyButton } from "@/components/dashboard/copy-button"; import { Dialog, DialogContent } from "@/components/ui/dialog"; import { toast } from "@/components/ui/toaster"; -import * as PopoverPrimitive from "@radix-ui/react-popover"; -import { - ArrowRight, - Check, - CircleInfo, - Eye, - EyeSlash, - Key2, - Plus, - TriangleWarning2, -} from "@unkey/icons"; +import { ArrowRight, Check, CircleInfo, Eye, EyeSlash, Key2, Plus } from "@unkey/icons"; import { InfoTooltip } from "@unkey/ui"; import { Button } from "@unkey/ui"; import { useRef, useState } from "react"; diff --git a/apps/dashboard/app/(app)/apis/[apiId]/_components/create-key/hooks/use-fetch-identities/create-identity-options.tsx b/apps/dashboard/app/(app)/apis/[apiId]/_components/create-key/hooks/use-fetch-identities/create-identity-options.tsx index f7cf87cb42..822e2354f0 100644 --- a/apps/dashboard/app/(app)/apis/[apiId]/_components/create-key/hooks/use-fetch-identities/create-identity-options.tsx +++ b/apps/dashboard/app/(app)/apis/[apiId]/_components/create-key/hooks/use-fetch-identities/create-identity-options.tsx @@ -49,7 +49,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]" >
{/* Header - Always shown */} diff --git a/apps/dashboard/app/(app)/apis/[apiId]/_components/create-key/index.tsx b/apps/dashboard/app/(app)/apis/[apiId]/_components/create-key/index.tsx index 58a0b0c486..ff20ff36d6 100644 --- a/apps/dashboard/app/(app)/apis/[apiId]/_components/create-key/index.tsx +++ b/apps/dashboard/app/(app)/apis/[apiId]/_components/create-key/index.tsx @@ -139,7 +139,7 @@ export const CreateKeyDialog = ({ return ( <> - setIsSettingsOpen(true)}> + setIsSettingsOpen(true)}> Create new key diff --git a/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/actions/components/key-info.tsx b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/actions/components/key-info.tsx index 643c6945c6..55968803d7 100644 --- a/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/actions/components/key-info.tsx +++ b/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,7 @@ export const KeyInfo = ({ keyDetails }: { keyDetails: KeyDetails }) => {
{keyDetails.id}
- {
{keyDetails.name ?? "Unnamed Key"}
- +
); diff --git a/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/status-cell/index.tsx b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/status-cell/index.tsx index a33ca38c60..68985c78da 100644 --- a/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/status-cell/index.tsx +++ b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/status-cell/index.tsx @@ -31,7 +31,7 @@ export const StatusDisplay = ({ keyAuthId, keyData, isSelected }: StatusDisplayP if (isLoading) { return (
@@ -58,9 +58,9 @@ export const StatusDisplay = ({ keyAuthId, keyData, isSelected }: StatusDisplayP return ( +
{statuses && statuses.length > 1 && (
@@ -136,7 +136,7 @@ export const StatusDisplay = ({ keyAuthId, keyData, isSelected }: StatusDisplayP
} > - + ); }; diff --git a/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/components/table/keys-list.tsx b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/components/table/keys-list.tsx index 4533044512..711b85ac5b 100644 --- a/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/components/table/keys-list.tsx +++ b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/components/table/keys-list.tsx @@ -3,7 +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, Focus, Key } from "@unkey/icons"; -import { AnimatedLoadingSpinner, Button, Empty, InfoTooltip, Checkbox } from "@unkey/ui"; +import { AnimatedLoadingSpinner, Button, Checkbox, Empty, InfoTooltip } from "@unkey/ui"; import { cn } from "@unkey/ui/src/lib/utils"; import Link from "next/link"; import React, { useCallback, useMemo, useState } from "react"; @@ -116,7 +116,6 @@ export const KeysList = ({
{identity ? ( @@ -130,7 +129,7 @@ export const KeysList = ({ rel="noopener noreferrer" aria-disabled={isNavigating} > - {identity} + {identity} ) : ( {identity} diff --git a/apps/dashboard/app/(app)/apis/_components/create-api-button.tsx b/apps/dashboard/app/(app)/apis/_components/create-api-button.tsx index e0a3acf767..4ccd0d05f7 100644 --- a/apps/dashboard/app/(app)/apis/_components/create-api-button.tsx +++ b/apps/dashboard/app/(app)/apis/_components/create-api-button.tsx @@ -67,7 +67,12 @@ export const CreateApiButton = ({ return ( <> - setIsOpen(true)}> + setIsOpen(true)} + > Create new API diff --git a/apps/dashboard/app/(app)/apis/loading.tsx b/apps/dashboard/app/(app)/apis/loading.tsx index 3325efeb99..2dfb3dd2fe 100644 --- a/apps/dashboard/app/(app)/apis/loading.tsx +++ b/apps/dashboard/app/(app)/apis/loading.tsx @@ -30,7 +30,7 @@ export default function Loading() {
- + Create new API diff --git a/apps/dashboard/app/(app)/authorization/permissions/[permissionId]/navigation.tsx b/apps/dashboard/app/(app)/authorization/permissions/[permissionId]/navigation.tsx index 795f31c019..0e3b31f182 100644 --- a/apps/dashboard/app/(app)/authorization/permissions/[permissionId]/navigation.tsx +++ b/apps/dashboard/app/(app)/authorization/permissions/[permissionId]/navigation.tsx @@ -33,7 +33,12 @@ export function Navigation({ + Delete Permission } diff --git a/apps/dashboard/app/(app)/authorization/roles/[roleId]/navigation.tsx b/apps/dashboard/app/(app)/authorization/roles/[roleId]/navigation.tsx index 6ad4933f04..50e0d84b8a 100644 --- a/apps/dashboard/app/(app)/authorization/roles/[roleId]/navigation.tsx +++ b/apps/dashboard/app/(app)/authorization/roles/[roleId]/navigation.tsx @@ -20,14 +20,19 @@ export function Navigation({ role }: { role: Role }) { - setIsUpdateModalOpen(true)}> + setIsUpdateModalOpen(true)}> Update Role + Delete Role } diff --git a/apps/dashboard/app/(app)/ratelimits/[namespaceId]/_overview/components/table/components/override-indicator.tsx b/apps/dashboard/app/(app)/ratelimits/[namespaceId]/_overview/components/table/components/override-indicator.tsx index 7f9b435759..a5b8d0aa66 100644 --- a/apps/dashboard/app/(app)/ratelimits/[namespaceId]/_overview/components/table/components/override-indicator.tsx +++ b/apps/dashboard/app/(app)/ratelimits/[namespaceId]/_overview/components/table/components/override-indicator.tsx @@ -26,7 +26,7 @@ export const IdentifierColumn = ({ log }: IdentifierColumnProps) => {
+
{isFullyBlocked ? ( "All requests have been blocked in this timeframe" ) : ( @@ -36,7 +36,7 @@ export const IdentifierColumn = ({ log }: IdentifierColumnProps) => { blocked in this timeframe )} -

+
} >
@@ -78,28 +78,26 @@ type OverrideIndicatorProps = { const OverrideIndicator = ({ log, style }: OverrideIndicatorProps) => (
- Custom override in effect + Custom override in effect
{log.override && (
- Limit set to{" "} - {formatNumber(log.override.limit)} - requests per {ms(log.override.duration)} + Limit set to {formatNumber(log.override.limit)} + requests per {ms(log.override.duration)}
)}
diff --git a/apps/dashboard/app/(app)/ratelimits/[namespaceId]/namespace-navbar.tsx b/apps/dashboard/app/(app)/ratelimits/[namespaceId]/namespace-navbar.tsx index 9ed531abe2..3fd6205163 100644 --- a/apps/dashboard/app/(app)/ratelimits/[namespaceId]/namespace-navbar.tsx +++ b/apps/dashboard/app/(app)/ratelimits/[namespaceId]/namespace-navbar.tsx @@ -85,7 +85,9 @@ export const NamespaceNavbar = ({ - setOpen(true)}>Override Identifier + setOpen(true)}> + Override Identifier + diff --git a/apps/dashboard/app/(app)/ratelimits/_components/create-namespace-button.tsx b/apps/dashboard/app/(app)/ratelimits/_components/create-namespace-button.tsx index 456eb0d26d..7c3aa3aac2 100644 --- a/apps/dashboard/app/(app)/ratelimits/_components/create-namespace-button.tsx +++ b/apps/dashboard/app/(app)/ratelimits/_components/create-namespace-button.tsx @@ -66,7 +66,12 @@ export const CreateNamespaceButton = ({ return ( <> - setIsOpen(true)}> + setIsOpen(true)} + > Create new namespace diff --git a/apps/dashboard/components/dashboard/api-key-table/index.tsx b/apps/dashboard/components/dashboard/api-key-table/index.tsx index bf85aab70c..2310ead837 100644 --- a/apps/dashboard/components/dashboard/api-key-table/index.tsx +++ b/apps/dashboard/components/dashboard/api-key-table/index.tsx @@ -22,7 +22,7 @@ import { toast } from "@/components/ui/toaster"; import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"; import { trpc } from "@/lib/trpc/client"; import type { ColumnDef } from "@tanstack/react-table"; -import { Button } from "@unkey/ui"; +import { Button, InfoTooltip } from "@unkey/ui"; import { ArrowUpDown, Check, @@ -102,15 +102,17 @@ export const ApiKeyTable: React.FC = ({ data }) => { accessorKey: "start", header: "Key", cell: ({ row }) => ( - - - {row.getValue("start")}... - - - This is the first part of the key to visually match it. We don't store the full key for - security reasons. - - + + This is the first part of the key to visually match it. We don't store the full key + for security reasons. +

+ } + > + {row.getValue("start")}... + ), }, { diff --git a/apps/dashboard/components/dashboard/root-key-table/index.tsx b/apps/dashboard/components/dashboard/root-key-table/index.tsx index 7b59250202..9b060a3050 100644 --- a/apps/dashboard/components/dashboard/root-key-table/index.tsx +++ b/apps/dashboard/components/dashboard/root-key-table/index.tsx @@ -89,6 +89,7 @@ export const RootKeyTable: React.FC = ({ data }) => { header: "Key", cell: ({ row }) => ( diff --git a/apps/dashboard/components/logs/chart/index.tsx b/apps/dashboard/components/logs/chart/index.tsx index 1a3dd41133..047038d33d 100644 --- a/apps/dashboard/components/logs/chart/index.tsx +++ b/apps/dashboard/components/logs/chart/index.tsx @@ -164,7 +164,7 @@ export function LogsTimeseriesBarChart({ label={label} active={active} bottomExplainer={ -
+
@@ -183,7 +183,7 @@ export function LogsTimeseriesBarChart({
} - className="rounded-lg shadow-lg border border-gray-4" + className="rounded-lg shadow-lg border border-grayA-4 bg-white dark:bg-black" labelFormatter={(_, payload) => createTimeIntervalFormatter(data, "HH:mm")(payload) } diff --git a/apps/dashboard/components/logs/details/request-response-details.tsx b/apps/dashboard/components/logs/details/request-response-details.tsx index 4f6718ddfe..1e087b6176 100644 --- a/apps/dashboard/components/logs/details/request-response-details.tsx +++ b/apps/dashboard/components/logs/details/request-response-details.tsx @@ -84,9 +84,9 @@ export const RequestResponseDetails = ({ fields, className return ( diff --git a/apps/dashboard/components/logs/llm-search/components/search-example-tooltip.tsx b/apps/dashboard/components/logs/llm-search/components/search-example-tooltip.tsx index 4cf18ca44e..56e23caf33 100644 --- a/apps/dashboard/components/logs/llm-search/components/search-example-tooltip.tsx +++ b/apps/dashboard/components/logs/llm-search/components/search-example-tooltip.tsx @@ -18,7 +18,6 @@ export const SearchExampleTooltip: React.FC = ({ return (
diff --git a/apps/dashboard/components/logs/overview-charts/overview-area-chart.tsx b/apps/dashboard/components/logs/overview-charts/overview-area-chart.tsx index 15cef9361d..f8bd69fee1 100644 --- a/apps/dashboard/components/logs/overview-charts/overview-area-chart.tsx +++ b/apps/dashboard/components/logs/overview-charts/overview-area-chart.tsx @@ -238,7 +238,7 @@ export const OverviewAreaChart = ({ payload={payload} label={label} active={active} - className="rounded-lg shadow-lg border border-gray-4" + className="rounded-lg shadow-lg border border-grayA-4 bg-white dark:bg-black" labelFormatter={(_, tooltipPayload) => createTimeIntervalFormatter(data, "HH:mm")(tooltipPayload) } diff --git a/apps/dashboard/components/logs/overview-charts/overview-bar-chart.tsx b/apps/dashboard/components/logs/overview-charts/overview-bar-chart.tsx index 7f1f3d8261..556051e17c 100644 --- a/apps/dashboard/components/logs/overview-charts/overview-bar-chart.tsx +++ b/apps/dashboard/components/logs/overview-charts/overview-bar-chart.tsx @@ -197,7 +197,7 @@ export function OverviewBarChart({ label={label} active={active} bottomExplainer={ -
+
@@ -241,7 +241,7 @@ export function OverviewBarChart({ ))}
} - className="rounded-lg shadow-lg border border-gray-4" + className="rounded-lg shadow-lg border border-grayA-4 bg-white dark:bg-black" labelFormatter={(_, tooltipPayload) => createTimeIntervalFormatter(data, "HH:mm")(tooltipPayload) } diff --git a/apps/dashboard/components/logs/queries/list-group.tsx b/apps/dashboard/components/logs/queries/list-group.tsx index e96e01b8ed..a42123296a 100644 --- a/apps/dashboard/components/logs/queries/list-group.tsx +++ b/apps/dashboard/components/logs/queries/list-group.tsx @@ -142,12 +142,7 @@ export function ListGroup({ className="flex flex-col h-[24px] pr-2 mt-1.5 w-[24px]" onMouseEnter={handleMouseEnter} > - + ); }; diff --git a/internal/ui/src/components/info-tooltip.tsx b/internal/ui/src/components/info-tooltip.tsx index 21b08bbc1f..80ecbcf3cd 100644 --- a/internal/ui/src/components/info-tooltip.tsx +++ b/internal/ui/src/components/info-tooltip.tsx @@ -2,15 +2,11 @@ import React, { type PropsWithChildren } from "react"; import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./tooltip"; import { cn } from "../lib/utils"; - +const baseVariant = + "px-3 py-2 text-xs font-medium shadow-md rounded-lg focus:border focus:border-accent-12 focus:ring-2 focus:ring-grayA-4 focus-visible:outline-none focus:ring-offset-0"; const variants = { - primary: [ - "border border-grayA-4 hover:border-gray-8 bg-gray-2 dark:bg-black", - "focus:border focus:border-accent-12 focus:ring-2 focus:ring-grayA-4 focus-visible:outline-none focus:ring-offset-0", - ], - secondary: [ - "bg-gray-1 text-accent-12 border border-grayA-4 px-3 py-2 text-xs font-medium shadow-md rounded-lg", - ], + primary: ["border border-grayA-4 hover:border-gray-8 bg-white dark:bg-black"], + secondary: ["bg-black dark:bg-white text-gray-1 border border-grayA-4"], } as const; type TooltipVariant = keyof typeof variants; @@ -48,7 +44,7 @@ const InfoTooltip = ({ {children}
diff --git a/internal/ui/src/index.ts b/internal/ui/src/index.ts index 2e893f607e..7233ebc3dd 100644 --- a/internal/ui/src/index.ts +++ b/internal/ui/src/index.ts @@ -6,6 +6,7 @@ export * from "./components/id"; export * from "./components/inline-link"; export * from "./components/input"; export * from "./components/info-tooltip"; +export * from "./components/select"; export * from "./components/settings-card"; export * from "./components/textarea"; export * from "./components/checkbox"; From e6b87be9dd6c1f5970bc0d77dad08196149c364a Mon Sep 17 00:00:00 2001 From: Michael Silva Date: Mon, 12 May 2025 09:43:40 -0400 Subject: [PATCH 07/14] saving work --- .../create-key/components/key-created-success-dialog.tsx | 1 + .../components/bar-chart/components/outcome-explainer.tsx | 2 +- apps/dashboard/components/logs/chart/index.tsx | 4 ++-- .../components/logs/overview-charts/overview-area-chart.tsx | 2 +- .../components/logs/overview-charts/overview-bar-chart.tsx | 4 ++-- apps/dashboard/components/logs/queries/list-group.tsx | 2 +- .../components/navigation/sidebar/team-switcher.tsx | 2 +- apps/dashboard/components/stats-card/index.tsx | 4 ++-- internal/ui/src/components/info-tooltip.tsx | 5 ++++- 9 files changed, 15 insertions(+), 11 deletions(-) diff --git a/apps/dashboard/app/(app)/apis/[apiId]/_components/create-key/components/key-created-success-dialog.tsx b/apps/dashboard/app/(app)/apis/[apiId]/_components/create-key/components/key-created-success-dialog.tsx index afc16d4822..7f909818ff 100644 --- a/apps/dashboard/app/(app)/apis/[apiId]/_components/create-key/components/key-created-success-dialog.tsx +++ b/apps/dashboard/app/(app)/apis/[apiId]/_components/create-key/components/key-created-success-dialog.tsx @@ -125,6 +125,7 @@ export const KeyCreatedSuccessDialog = ({ position={{ side: "bottom", align: "center" }} asChild disabled={!keyData.name} + variant="inverted" >
{keyData.name ?? UNNAMED_KEY} diff --git a/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/bar-chart/components/outcome-explainer.tsx b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/bar-chart/components/outcome-explainer.tsx index 2d6cb7eb87..3c3a947898 100644 --- a/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/bar-chart/components/outcome-explainer.tsx +++ b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/bar-chart/components/outcome-explainer.tsx @@ -104,7 +104,7 @@ export function OutcomeExplainer({ children, timeseries }: OutcomeExplainerProps 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="secondary" + variant="inverted" position={{ side: "bottom" }} content={
diff --git a/apps/dashboard/components/logs/chart/index.tsx b/apps/dashboard/components/logs/chart/index.tsx index 047038d33d..1a3dd41133 100644 --- a/apps/dashboard/components/logs/chart/index.tsx +++ b/apps/dashboard/components/logs/chart/index.tsx @@ -164,7 +164,7 @@ export function LogsTimeseriesBarChart({ label={label} active={active} bottomExplainer={ -
+
@@ -183,7 +183,7 @@ export function LogsTimeseriesBarChart({
} - className="rounded-lg shadow-lg border border-grayA-4 bg-white dark:bg-black" + className="rounded-lg shadow-lg border border-gray-4" labelFormatter={(_, payload) => createTimeIntervalFormatter(data, "HH:mm")(payload) } diff --git a/apps/dashboard/components/logs/overview-charts/overview-area-chart.tsx b/apps/dashboard/components/logs/overview-charts/overview-area-chart.tsx index f8bd69fee1..15cef9361d 100644 --- a/apps/dashboard/components/logs/overview-charts/overview-area-chart.tsx +++ b/apps/dashboard/components/logs/overview-charts/overview-area-chart.tsx @@ -238,7 +238,7 @@ export const OverviewAreaChart = ({ payload={payload} label={label} active={active} - className="rounded-lg shadow-lg border border-grayA-4 bg-white dark:bg-black" + className="rounded-lg shadow-lg border border-gray-4" labelFormatter={(_, tooltipPayload) => createTimeIntervalFormatter(data, "HH:mm")(tooltipPayload) } diff --git a/apps/dashboard/components/logs/overview-charts/overview-bar-chart.tsx b/apps/dashboard/components/logs/overview-charts/overview-bar-chart.tsx index 556051e17c..7f1f3d8261 100644 --- a/apps/dashboard/components/logs/overview-charts/overview-bar-chart.tsx +++ b/apps/dashboard/components/logs/overview-charts/overview-bar-chart.tsx @@ -197,7 +197,7 @@ export function OverviewBarChart({ label={label} active={active} bottomExplainer={ -
+
@@ -241,7 +241,7 @@ export function OverviewBarChart({ ))}
} - className="rounded-lg shadow-lg border border-grayA-4 bg-white dark:bg-black" + className="rounded-lg shadow-lg border border-gray-4" labelFormatter={(_, tooltipPayload) => createTimeIntervalFormatter(data, "HH:mm")(tooltipPayload) } diff --git a/apps/dashboard/components/logs/queries/list-group.tsx b/apps/dashboard/components/logs/queries/list-group.tsx index a42123296a..bcf26ddd52 100644 --- a/apps/dashboard/components/logs/queries/list-group.tsx +++ b/apps/dashboard/components/logs/queries/list-group.tsx @@ -142,7 +142,7 @@ export function ListGroup({ className="flex flex-col h-[24px] pr-2 mt-1.5 w-[24px]" onMouseEnter={handleMouseEnter} > - +