Match MCP workspace cards to web style

This commit is contained in:
Ishaan Gupta 2026-07-02 20:03:06 +05:30
parent ef3762d328
commit d7e2991022
3 changed files with 12 additions and 13 deletions

View file

@ -1,5 +1,3 @@
import { Badge } from "../design/ui"
interface Props {
permission: string
}
@ -7,11 +5,11 @@ interface Props {
export function PermissionBadge({ permission }: Props) {
const isWrite = permission === "write"
return (
<Badge
className="mt-2 self-start uppercase"
variant={isWrite ? "accent" : "neutral"}
<span
className="ml-auto mt-2 inline-flex h-8 min-w-[92px] items-center justify-center rounded-full border border-[#0D121A] bg-[#080B0F] px-4 text-[12px] font-semibold text-text-primary shadow-[0_6px_18px_rgba(0,0,0,0.28)] transition-colors group-hover:bg-[#0D121A]"
style={{ fontFamily: "var(--font-brand)" }}
>
{isWrite ? "read/write" : "read only"}
</Badge>
{isWrite ? "Read/write" : "Read only"}
</span>
)
}

View file

@ -20,25 +20,25 @@ export function WorkspaceCard({
return (
<Card
as="button"
className="min-h-[108px] w-full p-3"
className="min-h-[132px] w-full p-4"
onClick={() => onClick(containerTag.containerTag)}
variant={active ? "active" : "interactive"}
>
<Stack className="h-full" gap="sm">
<Stack className="h-full" gap="xs">
<Stack align="center" direction="row" gap="sm" justify="between">
<span
className="min-w-0 truncate text-(length:--text-sm) font-medium text-text-primary"
className="min-w-0 truncate text-sm font-medium text-white"
style={{ fontFamily: "var(--font-brand)" }}
>
{name}
</span>
{active ? <Check className="size-4 shrink-0 text-accent" /> : null}
</Stack>
<div className="truncate font-mono text-[13px] text-text-muted">
<div className="truncate text-xs leading-relaxed text-[#8B8B8B]">
{containerTag.containerTag}
</div>
{(containerTag.documentCount > 0 || containerTag.memoryCount > 0) && (
<div className="mt-auto flex items-center gap-(--space-2) text-(length:--text-xs) text-text-muted">
<div className="mt-1 flex items-center gap-(--space-2) text-xs leading-relaxed text-[#8B8B8B]">
<span>
{containerTag.documentCount} doc
{containerTag.documentCount === 1 ? "" : "s"}
@ -50,6 +50,7 @@ export function WorkspaceCard({
</span>
</div>
)}
<div className="flex-1" />
{access ? <PermissionBadge permission={access.permission} /> : null}
</Stack>
</Card>

View file

@ -19,7 +19,7 @@ const cardStyles = cva(
interactive:
"cursor-pointer hover:border-[#3A4455] hover:bg-bg-control-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/20 focus-visible:ring-offset-2 focus-visible:ring-offset-bg-primary",
active:
"cursor-pointer border-[#2261CA]/70 bg-[#00173C] shadow-[0_0_28px_rgba(75,160,250,0.18)]",
"cursor-pointer border-[#263348] bg-bg-elevated hover:border-[#3A4455] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/20 focus-visible:ring-offset-2 focus-visible:ring-offset-bg-primary",
},
},
defaultVariants: { variant: "default" },