Adjust MCP server table light theme & localization additions - #34
Open
a-effort wants to merge 1 commit into
Open
Adjust MCP server table light theme & localization additions #34a-effort wants to merge 1 commit into
a-effort wants to merge 1 commit into
Conversation
a-effort
force-pushed
the
mcp-servers-table-light-mode-i18n
branch
from
August 14, 2026 23:40
13a43ac to
822e03a
Compare
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
marked this pull request as ready for review
August 14, 2026 23:54
a-effort
force-pushed
the
mcp-servers-table-light-mode-i18n
branch
from
August 14, 2026 23:54
822e03a to
efd623c
Compare
a-effort
requested review from
gcgoncalves,
marekdano and
vishu-bh
and removed request for
gcgoncalves
August 14, 2026 23:54
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Light mode adjustments
table.style.fixes.mp4
ServersTableusedbg-neutral-50for rows, the sameoklch(0.985)as thebg-mainpage beneath them so in light mode the rows had no visible surface. Dark mode was unaffected (dark:bg-neutral-800sits above--main: oklch(0.205)).bg-white dark:bg-neutral-800, header isbg-main, matching whatUsersTable/TeamsTable/TokensTablealready do.text-card-foreground/text-muted-foreground. Dark mode is byte-identical (--muted-foregrounddark is exactlyneutral-400); light shifts fromneutral-600to ≈neutral-500, which is whatUsersTablealready renders.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 usetext-muted-foreground.<select>rather than moving toui/select, whoseSelectTriggercarriesshadow-xs. Dropping shadows in light mode is a separate app-wide change.i18n
ServersTablewas 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 withmcpServer.*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 ofgateways.card.{tool,resource,prompt}Countso 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 theQueryParameterAuthwarning. 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 prefixAlso fixes the "comma-separate" → "comma-separated" typo in the passthrough-headers description, and aligns
tools.card.viewDetails/resources.card.viewDetailsto "View details": the last two spellings that diverged from what gateways, prompts, and mcpServer use.Tests
locales.test.tschecked 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: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 inResources.test.tsx/Tools.test.tsx(exact-match in RTL, would have failed) pluse2e/{servers,resources,tools}.spec.ts(case-insensitive in Playwright, so stale rather than broken).2846 unit tests pass;
tsc --noEmit,eslint, andprettier --checkare clean;npm run buildsucceeds.