Skip to content

Adjust MCP server table light theme & localization additions - #34

Open
a-effort wants to merge 1 commit into
mainfrom
mcp-servers-table-light-mode-i18n
Open

Adjust MCP server table light theme & localization additions #34
a-effort wants to merge 1 commit into
mainfrom
mcp-servers-table-light-mode-i18n

Conversation

@a-effort

@a-effort a-effort commented Aug 14, 2026

Copy link
Copy Markdown
Contributor

Light mode adjustments

table.style.fixes.mp4

ServersTable used bg-neutral-50 for rows, the same oklch(0.985) as the bg-main page beneath them so in light mode the rows had no visible surface. Dark mode was unaffected (dark:bg-neutral-800 sits above --main: oklch(0.205)).

  • Rows are now bg-white dark:bg-neutral-800, header is bg-main, matching what UsersTable / TeamsTable / TokensTable already do.
  • Hardcoded neutrals → text-card-foreground / text-muted-foreground. Dark mode is byte-identical (--muted-foreground dark is exactly neutral-400); light shifts from neutral-600 to ≈neutral-500, which is what UsersTable already renders.
  • Status colors gained light pairs (text-emerald-600 dark:text-emerald-400, same for amber) — the 400 shades are tuned for a dark row and fall under 3:1 on white. Offline/draft use text-muted-foreground.
  • The per-page control keeps its native <select> rather than moving to ui/select, whose SelectTrigger carries shadow-xs. Dropping shadows in light mode is a separate app-wide change.

i18n

ServersTable was the only one of the four tables with hardcoded English. This localizes the whole MCP servers surface: table, page chrome, connect/edit form, AdvancedSettings, and all six auth components with mcpServer.* keys in en-US, es-ES, and pt-BR.

Reuses existing keys where the string already exists (common.button.cancel / .delete / .remove, common.visibility.*) and mirrors the wording of gateways.card.{tool,resource,prompt}Count so identical strings don't get two translations.

Three messages needed rich text so translations can place the embedded element where their grammar needs it: the catalog link in the form intro, the security-checklist link in NoneAuth, and the bolded prefix in the QueryParameterAuth warning. These are the first rich-text messages in the codebase; react-intl 10 supports them with no provider config.

Two copy changes, both because (s) doesn't translate:

  • "{n} file(s) selected successfully." → ICU plural
  • "Invalid file type(s): …" → plural on the prefix

Also fixes the "comma-separate" → "comma-separated" typo in the passthrough-headers description, and aligns tools.card.viewDetails / resources.card.viewDetails to "View details": the last two spellings that diverged from what gateways, prompts, and mcpServer use.

Tests

locales.test.ts checked key parity and non-blankness but not whether messages parse, or whether translations keep the same placeholders and tags. A translation that drops {count} or renames a rich-text tag passes CI and then throws (missing value) or silently drops content (unhandled tag) at render time. Two new cases per locale close that:

  • messages are valid ICU syntax
  • messages use the same arguments and tags as en-US, descending into plural/select branches

Both were verified against deliberately broken translations, unbalanced braces, a renamed {files} argument, and a renamed <catalog> tag each fail as expected.

Test literals updated where strings changed: Servers.test.tsx (loading text), CACertificateUpload.test.tsx (plural), and the "View Details" locators in Resources.test.tsx / Tools.test.tsx (exact-match in RTL, would have failed) plus e2e/{servers,resources,tools}.spec.ts (case-insensitive in Playwright, so stale rather than broken).

2846 unit tests pass; tsc --noEmit, eslint, and prettier --check are clean; npm run build succeeds.

@a-effort
a-effort force-pushed the mcp-servers-table-light-mode-i18n branch from 13a43ac to 822e03a Compare August 14, 2026 23:40
@a-effort a-effort changed the title fix: align MCP server table with light theme and localize its copy fix: align MCP server table with light theme & localization additions Aug 14, 2026
The MCP servers table painted rows bg-neutral-50, which is the same
oklch(0.985) as the bg-main page beneath it, so in light mode the rows
had no visible surface at all. Match the treatment Users/Teams/Tokens
already use — white rows on the off-white page, bg-main header — and
swap the hardcoded neutrals for semantic tokens so both themes follow
the palette. Status colors gain light-mode pairs; emerald-400 and
amber-400 are tuned for a dark row and fall under 3:1 on white.

ServersTable was also the only one of the four tables with hardcoded
English. Localize it along with the rest of the MCP servers surface —
the page chrome, the connect/edit form, AdvancedSettings, and the six
auth components — adding mcpServer.* keys across en-US, es-ES and pt-BR.
Three messages needed rich text (the catalog link, the security
checklist link, the bolded security warning) so translations can move
the embedded element within the sentence.

Also align "View Details" to "View details" in the tools and resources
namespaces, which were the last two spellings out of step.

locales.test.ts checked key parity but not whether messages parse or
whether translations keep the same placeholders and tags. A translation
that drops {count} or renames a rich-text tag passes CI and then throws
or silently drops content at render time, so add both checks.

Signed-off-by: Anna Effort <anna.effort@ibm.com>
@a-effort
a-effort marked this pull request as ready for review August 14, 2026 23:54
@a-effort
a-effort force-pushed the mcp-servers-table-light-mode-i18n branch from 822e03a to efd623c Compare August 14, 2026 23:54
@a-effort
a-effort requested review from gcgoncalves, marekdano and vishu-bh and removed request for gcgoncalves August 14, 2026 23:54
@a-effort a-effort changed the title fix: align MCP server table with light theme & localization additions Adjust MCP server table light theme & localization additions Aug 14, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant