Proposal: refresh the connection dialog's visual design

[dosxnjos]

Motivation

The extension's connection dialog (connect.html/status.html) is the page a user sees before
granting an MCP client full browser access - arguably the single most security-relevant UI in the
extension. Today it's functional but visually plain (light-only, hardcoded GitHub-style colors),
and doesn't visually distinguish its three states (connecting / connected / error) beyond a small
color change in a banner.

While working on this page for an unrelated reason, I also found that connect.css and
authToken.css independently define .auth-token-* rules with different values - a real, if
harmless, inconsistency that had gone unnoticed. Not a strong argument on its own, but a small
sign this page hasn't had much design attention.

Proposed direction

I put together a redesign built around a single idea: since this page exists specifically to stop
a user from granting access "in the dark," give it a small persistent status indicator - a dot
that's green while connected, amber while deciding, red on error - the same way theater crews leave
a single "ghost light" on an empty stage. Dark-first (with a full light-mode fallback via
prefers-color-scheme), Playwright's own green as the accent, system fonts only (no new webfont -
an extension page shouldn't make external font requests), and respects
prefers-reduced-motion.

It's live in my fork right now if you want to look at the actual CSS/markup, not just the
description:
https://github.com/dosxnjos/playwright/blob/main/packages/extension/src/ui/connect.css
https://github.com/dosxnjos/playwright/blob/main/packages/extension/src/ui/connect.tsx

Happy to share screenshots (light and dark) directly here, or open a PR with the diff, whichever
is more useful for a first look. This is very much a "take it, leave it, or tell me what direction
you'd rather see" proposal, not attached to any of the other issues I've opened - understand a
visual change is a different kind of call than a bug fix.

[dgozman]

@dosxnjos Please attach screenshots of before/after so that we can see what exactly you are proposing.

[dosxnjos]

Sure, here's before/after for the three states (connecting, error, connected). Mocked with placeholder tab data/token so nothing real leaks through the screenshot, but the markup/CSS is exactly what's live on the fork.

Before (current, light-only)

Connecting	Error	Connected

After (proposed, dark-first with light fallback)

Connecting (dark)	Connecting (light)

Error	Connected

The error/connected banners go from a same-color-as-body-text checkmark/X prefix to the ghost-light dot changing color (red/green) plus a tinted banner background - that's the main "distinguish the three states" change referenced in the issue body.

One accessibility detail worth calling out on the "Allow & select" button specifically: its fill is decoupled from the --spotlight accent used elsewhere on the page, so each theme pairs a different green shade with whichever text color gives it solid WCAG AA contrast - light theme uses a darkened green (#1c7a20) with white text (5.45:1), dark theme keeps the original vibrant brand green (#2ead33) with black text (7.14:1). Happy to open a PR with the diff if this direction looks reasonable.

[dgozman]

@yury-s Would you like these visual changes in the extension?