From 469e941b26b09ab2f175cc1225124299944aaeb7 Mon Sep 17 00:00:00 2001 From: Marek Dano Date: Tue, 1 Sep 2026 11:52:48 +0100 Subject: [PATCH 1/2] fix: improve notifications styles Signed-off-by: Marek Dano --- src/components/mcp-servers/BasicAuth.tsx | 4 ++-- src/components/mcp-servers/CustomHeadersAuth.tsx | 4 ++-- src/components/mcp-servers/OAuth2Auth.tsx | 16 ++++++++-------- .../resources/ResourcePreviewResult.tsx | 7 ++++--- src/components/tools/ToolLiveInvokeResult.tsx | 6 +++--- src/components/tools/ToolPreviewResult.tsx | 7 ++++--- src/components/ui/badge.tsx | 4 ++-- src/components/ui/inline-notification.test.tsx | 4 ++-- src/components/ui/inline-notification.tsx | 2 +- src/index.css | 9 +++++++++ 10 files changed, 37 insertions(+), 26 deletions(-) diff --git a/src/components/mcp-servers/BasicAuth.tsx b/src/components/mcp-servers/BasicAuth.tsx index 083fd0c..f8fb6c2 100644 --- a/src/components/mcp-servers/BasicAuth.tsx +++ b/src/components/mcp-servers/BasicAuth.tsx @@ -24,7 +24,7 @@ export function BasicAuth({ className="inline-flex items-center gap-0.5 text-sm font-medium text-neutral-900 dark:text-neutral-100" > {intl.formatMessage({ id: "mcpServer.auth.basic.usernameLabel" })} - * + * {intl.formatMessage({ id: "mcpServer.form.required" })} {intl.formatMessage({ id: "mcpServer.auth.basic.passwordLabel" })} - * + * {intl.formatMessage({ id: "mcpServer.form.required" })} {intl.formatMessage({ id: "mcpServer.auth.custom.keyLabel" })} - * + * {intl.formatMessage({ id: "mcpServer.form.required" })} @@ -84,7 +84,7 @@ export function CustomHeadersAuth({ className="inline-flex items-center gap-0.5 text-sm font-medium text-neutral-900 dark:text-neutral-100" > {intl.formatMessage({ id: "mcpServer.auth.custom.valueLabel" })} - * + * {intl.formatMessage({ id: "mcpServer.form.required" })} diff --git a/src/components/mcp-servers/OAuth2Auth.tsx b/src/components/mcp-servers/OAuth2Auth.tsx index 6e2f591..914c553 100644 --- a/src/components/mcp-servers/OAuth2Auth.tsx +++ b/src/components/mcp-servers/OAuth2Auth.tsx @@ -97,7 +97,7 @@ export function OAuth2Auth({ className="inline-flex items-center gap-0.5 text-sm font-medium text-neutral-900 dark:text-neutral-100" > {intl.formatMessage({ id: "mcpServer.auth.oauth.grantTypeLabel" })} - * + * {intl.formatMessage({ id: "mcpServer.form.required" })} {intl.formatMessage({ id: "mcpServer.auth.oauth.usernameLabel" })} - * + * {intl.formatMessage({ id: "mcpServer.form.required" })} @@ -214,7 +214,7 @@ export function OAuth2Auth({ className="rounded-md border-neutral-300 px-4 text-sm text-neutral-900 shadow-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-0 placeholder:text-neutral-400 dark:border-neutral-700 dark:text-neutral-100 dark:placeholder:text-neutral-500" /> {errors?.username && ( -

+

{errors.username}

)} @@ -225,7 +225,7 @@ export function OAuth2Auth({ className="inline-flex items-center gap-0.5 text-sm font-medium text-neutral-900 dark:text-neutral-100" > {intl.formatMessage({ id: "mcpServer.auth.oauth.passwordLabel" })} - * + * {intl.formatMessage({ id: "mcpServer.form.required" })} @@ -241,7 +241,7 @@ export function OAuth2Auth({ className="rounded-md border-neutral-300 px-4 text-sm text-neutral-900 shadow-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-0 placeholder:text-neutral-400 dark:border-neutral-700 dark:text-neutral-100 dark:placeholder:text-neutral-500" /> {errors?.password && ( -

+

{errors.password}

)} @@ -295,7 +295,7 @@ export function OAuth2Auth({ className="inline-flex items-center gap-0.5 text-sm font-medium text-neutral-900 dark:text-neutral-100" > {intl.formatMessage({ id: "mcpServer.auth.oauth.tokenUrlLabel" })} - * + * {intl.formatMessage({ id: "mcpServer.form.required" })} {intl.formatMessage({ id: "mcpServer.auth.oauth.authorizationUrlLabel" })} - * + * {intl.formatMessage({ id: "mcpServer.form.required" })} {succeeded ? ( - + ) : ( - + )} {statusLabel} diff --git a/src/components/tools/ToolLiveInvokeResult.tsx b/src/components/tools/ToolLiveInvokeResult.tsx index 1d3003c..6bfa630 100644 --- a/src/components/tools/ToolLiveInvokeResult.tsx +++ b/src/components/tools/ToolLiveInvokeResult.tsx @@ -1,5 +1,4 @@ import { useState } from "react"; -import { AlertCircle, CheckCircle2 } from "lucide-react"; import { useIntl } from "react-intl"; import type { ToolInvokeState } from "@/hooks/useToolInvoke"; @@ -12,6 +11,7 @@ import { AccordionTrigger, } from "@/components/ui/accordion"; import { cn } from "@/lib/utils"; +import { STATUS_ICON } from "@/lib/status"; import { ToolResultRenderer } from "./ToolResultRenderer"; import { estimateJsonByteSize, @@ -54,9 +54,9 @@ export function ToolLiveInvokeResult({ invoke }: ToolLiveInvokeResultProps) { className="flex flex-wrap items-center gap-x-2 gap-y-1 text-[13px]" > {statusOk ? ( - + ) : ( - + )} {statusLabel} diff --git a/src/components/tools/ToolPreviewResult.tsx b/src/components/tools/ToolPreviewResult.tsx index b44f7ee..50a0b11 100644 --- a/src/components/tools/ToolPreviewResult.tsx +++ b/src/components/tools/ToolPreviewResult.tsx @@ -1,5 +1,5 @@ import { useState } from "react"; -import { AlertCircle, CheckCircle2, Info } from "lucide-react"; +import { Info } from "lucide-react"; import { useIntl } from "react-intl"; import { Badge } from "@/components/ui/badge"; @@ -12,6 +12,7 @@ import { AccordionTrigger, } from "@/components/ui/accordion"; import { cn } from "@/lib/utils"; +import { STATUS_ICON } from "@/lib/status"; import type { ToolPreviewState } from "@/hooks/useToolPreview"; import type { ToolPreviewResponse, ToolPreviewTarget, ToolPreviewWarning } from "@/api/tools"; import { ToolResultRenderer } from "./ToolResultRenderer"; @@ -58,9 +59,9 @@ export function ToolPreviewResult({ preview }: ToolPreviewResultProps) { className="flex flex-wrap items-center gap-x-2 gap-y-1 text-[13px]" > {statusOk ? ( - + ) : ( - + )} {statusLabel} diff --git a/src/components/ui/badge.tsx b/src/components/ui/badge.tsx index 64dd2e8..82666e2 100644 --- a/src/components/ui/badge.tsx +++ b/src/components/ui/badge.tsx @@ -14,8 +14,8 @@ const badgeVariants = cva( destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80", outline: "text-foreground", - success: "border-transparent bg-success/15 text-success", - warning: "border-transparent bg-warning/15 text-warning", + success: "border-transparent bg-success/15 text-success-foreground", + warning: "border-transparent bg-warning/15 text-warning-foreground", draft: "border-transparent bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300", }, }, diff --git a/src/components/ui/inline-notification.test.tsx b/src/components/ui/inline-notification.test.tsx index c18d36f..244c74e 100644 --- a/src/components/ui/inline-notification.test.tsx +++ b/src/components/ui/inline-notification.test.tsx @@ -50,11 +50,11 @@ describe("InlineNotification", () => { }); describe("info type", () => { - it("renders with role='status' and neutral text", () => { + it("renders with role='status' and full-contrast text", () => { render(); expect(screen.getByRole("status")).toHaveTextContent("Disconnect pending"); - expect(screen.getByText("Disconnect pending")).toHaveClass("text-muted-foreground"); + expect(screen.getByText("Disconnect pending")).toHaveClass("text-foreground"); }); }); diff --git a/src/components/ui/inline-notification.tsx b/src/components/ui/inline-notification.tsx index 8860514..a685639 100644 --- a/src/components/ui/inline-notification.tsx +++ b/src/components/ui/inline-notification.tsx @@ -33,7 +33,7 @@ export const InlineNotification = forwardRef
{(action || onDismiss) && (
diff --git a/src/index.css b/src/index.css index 6d8d6df..99875e1 100644 --- a/src/index.css +++ b/src/index.css @@ -57,7 +57,9 @@ --color-chart-1: var(--chart-1); --color-destructive: var(--destructive); --color-success: var(--success); + --color-success-foreground: var(--success-foreground); --color-warning: var(--warning); + --color-warning-foreground: var(--warning-foreground); --color-popover-foreground: var(--popover-foreground); --color-popover: var(--popover); --color-card-foreground: var(--card-foreground); @@ -134,6 +136,11 @@ instead of a raw Tailwind shade, so every call site stays in sync. */ --success: var(--color-green-600); --warning: var(--color-amber-600); + /* Badge text sits on the token's own 15% tint, which needs 4.5:1 — the + 600 shades above only clear the 3:1 bar icons need. 700 shades cover + both; dark mode already passes at --success/--warning (see #94). */ + --success-foreground: var(--color-green-700); + --warning-foreground: var(--color-amber-700); --tool-icon-bg: var(--color-fuchsia-400); --prompt-icon-bg: #6fff9f; /* Brand cyan. Like the two above it this is a chip *background* carrying a @@ -182,6 +189,8 @@ --destructive: oklch(0.704 0.191 22.216); --success: var(--color-green-400); --warning: var(--color-amber-400); + --success-foreground: var(--color-green-400); + --warning-foreground: var(--color-amber-400); --border: oklch(1 0 0 / 10%); --input: oklch(1 0 0 / 15%); --ring: oklch(0.556 0 0); From 61081ba8fc7631a958f6c489cd5bca55bd043968 Mon Sep 17 00:00:00 2001 From: Marek Dano Date: Thu, 3 Sep 2026 09:40:09 +0100 Subject: [PATCH 2/2] fix: address comments Signed-off-by: Marek Dano --- src/components/ui/inline-notification.test.tsx | 4 ++-- src/components/ui/inline-notification.tsx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/ui/inline-notification.test.tsx b/src/components/ui/inline-notification.test.tsx index 244c74e..c18d36f 100644 --- a/src/components/ui/inline-notification.test.tsx +++ b/src/components/ui/inline-notification.test.tsx @@ -50,11 +50,11 @@ describe("InlineNotification", () => { }); describe("info type", () => { - it("renders with role='status' and full-contrast text", () => { + it("renders with role='status' and neutral text", () => { render(); expect(screen.getByRole("status")).toHaveTextContent("Disconnect pending"); - expect(screen.getByText("Disconnect pending")).toHaveClass("text-foreground"); + expect(screen.getByText("Disconnect pending")).toHaveClass("text-muted-foreground"); }); }); diff --git a/src/components/ui/inline-notification.tsx b/src/components/ui/inline-notification.tsx index a685639..8860514 100644 --- a/src/components/ui/inline-notification.tsx +++ b/src/components/ui/inline-notification.tsx @@ -33,7 +33,7 @@ export const InlineNotification = forwardRef
{(action || onDismiss) && (