From 649d985d48a11ee91392e3d86b357d11d8504184 Mon Sep 17 00:00:00 2001 From: Ishaan Gupta Date: Fri, 3 Jul 2026 16:27:37 +0530 Subject: [PATCH] Polish MCP widget UI --- .../src/widget/components/PermissionBadge.tsx | 2 +- .../src/widget/components/WorkspaceCard.tsx | 10 ++++-- apps/mcp/src/widget/design/globals.css | 30 +++++++++--------- apps/mcp/src/widget/design/ui/Button.tsx | 31 +++++++++---------- 4 files changed, 38 insertions(+), 35 deletions(-) diff --git a/apps/mcp/src/widget/components/PermissionBadge.tsx b/apps/mcp/src/widget/components/PermissionBadge.tsx index 36680978..3b1739ec 100644 --- a/apps/mcp/src/widget/components/PermissionBadge.tsx +++ b/apps/mcp/src/widget/components/PermissionBadge.tsx @@ -6,7 +6,7 @@ export function PermissionBadge({ permission }: Props) { const isWrite = permission === "write" return ( {isWrite ? "Read/write" : "Read only"} diff --git a/apps/mcp/src/widget/components/WorkspaceCard.tsx b/apps/mcp/src/widget/components/WorkspaceCard.tsx index 1d464b0b..277ee856 100644 --- a/apps/mcp/src/widget/components/WorkspaceCard.tsx +++ b/apps/mcp/src/widget/components/WorkspaceCard.tsx @@ -24,15 +24,20 @@ export function WorkspaceCard({ onClick={() => onClick(containerTag.containerTag)} variant={active ? "active" : "interactive"} > +
+ {access ? : null} +
+ {active ? ( + + ) : null} {name} - {active ? : null}
{containerTag.containerTag} @@ -51,7 +56,6 @@ export function WorkspaceCard({
)}
- {access ? : null} ) diff --git a/apps/mcp/src/widget/design/globals.css b/apps/mcp/src/widget/design/globals.css index 52dba487..0153bfcd 100644 --- a/apps/mcp/src/widget/design/globals.css +++ b/apps/mcp/src/widget/design/globals.css @@ -204,28 +204,24 @@ align-items: center; gap: var(--space-2); margin: var(--space-4) var(--page-header-px) 0; - padding: 7px 10px 7px 8px; - border: 1px solid #263348; - border-radius: var(--radius-lg); - background: rgba(8, 11, 15, 0.92); - backdrop-filter: blur(18px); - box-shadow: var(--shadow-sm); + padding: 0; + border: 0; + background: transparent; + box-shadow: none; + opacity: 0.86; } .mcp-widget-brand-mark { display: grid; - width: 26px; - height: 26px; + width: 20px; + height: 20px; place-items: center; color: var(--accent); - border-radius: var(--radius-md); - background: #080b0f; - box-shadow: inset 1.5px 1.5px 4.5px rgba(0, 0, 0, 0.7); } .mcp-widget-brand-mark svg { - width: 17px; - height: 14px; + width: 16px; + height: 13px; } .mcp-widget-brand-copy { @@ -238,7 +234,7 @@ .mcp-widget-brand-name { color: var(--text-primary); font-size: 12px; - font-weight: 700; + font-weight: 650; line-height: 1; } @@ -249,6 +245,12 @@ line-height: 1.15; } +.shadow-inside-out { + box-shadow: + inset 0 2px 4px rgba(0, 0, 0, 0.3), + inset 0 1px 2px rgba(0, 0, 0, 0.1); +} + .mcp-widget-content { position: relative; z-index: 1; diff --git a/apps/mcp/src/widget/design/ui/Button.tsx b/apps/mcp/src/widget/design/ui/Button.tsx index 23331a8c..4379b284 100644 --- a/apps/mcp/src/widget/design/ui/Button.tsx +++ b/apps/mcp/src/widget/design/ui/Button.tsx @@ -3,44 +3,41 @@ import { type ButtonHTMLAttributes, forwardRef, type ReactNode } from "react" import { Loader2 } from "../../lib/icons" import { cn } from "../lib/cn" -// Mirrors console-v2's button: uppercase + tracked, brand-font by default, -// CVA primary/secondary/ghost/danger × sm/icon. We skip `asChild` because the -// widget has no router links and dropping it saves a @radix-ui/react-slot dep. +// Mirrors apps/web's pill-shaped inside-out controls while keeping the widget +// variants small and dependency-free for MCP iframes. const buttonVariants = cva( [ "inline-flex items-center justify-center gap-2", "font-semibold", - "rounded-[var(--radius-md)]", + "rounded-full", "transition-all cursor-pointer", "disabled:pointer-events-none disabled:opacity-50", - "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--accent)]/20 focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-primary)]", + "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--accent)]/35 focus-visible:ring-offset-0", "[&_svg:not([class*='size-'])]:size-4 shrink-0", ].join(" "), { variants: { variant: { primary: [ - "bg-[var(--accent)] text-[var(--accent-foreground)]", - "shadow-[0_10px_28px_rgba(75,160,250,0.24)]", - "hover:bg-[var(--accent-hover)] hover:shadow-[0_12px_32px_rgba(75,160,250,0.32)]", + "bg-[#0D121A] text-[#FAFAFA] shadow-inside-out", + "hover:bg-[#121820] active:bg-[#080B0F]", ].join(" "), secondary: [ - "bg-[var(--bg-control)] text-[var(--text-primary)]", - "border border-[var(--border-control)]", - "hover:bg-[var(--bg-control-hover)] hover:border-[#3A4455]", + "bg-[#0D121A] text-[#FAFAFA] shadow-inside-out", + "hover:bg-[#121820]", ].join(" "), ghost: [ - "text-[var(--text-primary)]", - "hover:bg-[var(--bg-muted)]", + "text-[#737373]", + "hover:bg-white/5 hover:text-[#FAFAFA]", ].join(" "), danger: [ - "bg-[var(--danger)] text-[var(--text-inverse)]", - "hover:bg-[var(--danger)]/90", + "bg-[#EF4444]/15 text-[#EF4444]", + "hover:bg-[#EF4444]/25", ].join(" "), }, size: { - sm: "h-[var(--height-md)] px-[var(--space-4)] text-[length:var(--text-sm)]", - icon: "size-[var(--height-sm)] p-0", + sm: "h-9 px-4 text-[13px]", + icon: "size-8 p-0", }, }, defaultVariants: {