Adjust MCP server table light theme & localization additions - #34
Merged
Conversation
a-effort
force-pushed
the
mcp-servers-table-light-mode-i18n
branch
from
August 14, 2026 23:40
13a43ac to
822e03a
Compare
a-effort
changed the title
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
a-effort
changed the title
gcgoncalves
approved these changes
Aug 17, 2026
a-effort
added a commit
that referenced
this pull request
Aug 19, 2026
Applies PR #34's light-mode pass to the three surfaces it missed. - Status tokens gain a `.dark` override; six sites that hardcoded the emerald/gray shades now use them, including the two server drawers. - Drawer body and right rail both inherit `bg-popover`. The dark-only override they carried split the panes in dark and did nothing in light, where both were pure white. - Scrim `bg-black/10` → `/50` on all five drawers. - The three drawer tables adopt `ServersTable`'s card-per-row pattern, with rows a step down from the drawer body rather than up from the page. Hover and selected are pinned to the row fill. - Page chrome moves to `text-foreground` / `text-muted-foreground`, the off-palette blue spinners are retinted, and two badges stop bypassing the icon tokens. Also fixes an unrelated bug in `VirtualServerDetailsPanel`: the status icon was unconditionally green while its label branched on `enabled`. Forms keep their hardcoded neutrals, matching what PR #34 left behind. 2896 tests pass; tsc, eslint, prettier and build are clean.
a-effort
added a commit
that referenced
this pull request
Aug 19, 2026
Applies PR #34's light-mode pass to the three surfaces it missed. - Status tokens gain a `.dark` override; six sites that hardcoded the emerald/gray shades now use them, including the two server drawers. - Drawer body and right rail both inherit `bg-popover`. The dark-only override they carried split the panes in dark and did nothing in light, where both were pure white. - Scrim `bg-black/10` → `/50` on all five drawers. - The three drawer tables adopt `ServersTable`'s card-per-row pattern, with rows a step down from the drawer body rather than up from the page. Hover and selected are pinned to the row fill. - Page chrome moves to `text-foreground` / `text-muted-foreground`, the off-palette blue spinners are retinted, and two badges stop bypassing the icon tokens. Also fixes an unrelated bug in `VirtualServerDetailsPanel`: the status icon was unconditionally green while its label branched on `enabled`. Forms keep their hardcoded neutrals, matching what PR #34 left behind. 2896 tests pass; tsc, eslint, prettier and build are clean. Signed-off-by: Anna Effort <anna.effort@ibm.com>
gcgoncalves
pushed a commit
that referenced
this pull request
Aug 19, 2026
* Adjust tools, resources & prompts light theme Applies PR #34's light-mode pass to the three surfaces it missed. - Status tokens gain a `.dark` override; six sites that hardcoded the emerald/gray shades now use them, including the two server drawers. - Drawer body and right rail both inherit `bg-popover`. The dark-only override they carried split the panes in dark and did nothing in light, where both were pure white. - Scrim `bg-black/10` → `/50` on all five drawers. - The three drawer tables adopt `ServersTable`'s card-per-row pattern, with rows a step down from the drawer body rather than up from the page. Hover and selected are pinned to the row fill. - Page chrome moves to `text-foreground` / `text-muted-foreground`, the off-palette blue spinners are retinted, and two badges stop bypassing the icon tokens. Also fixes an unrelated bug in `VirtualServerDetailsPanel`: the status icon was unconditionally green while its label branched on `enabled`. Forms keep their hardcoded neutrals, matching what PR #34 left behind. 2896 tests pass; tsc, eslint, prettier and build are clean. Signed-off-by: Anna Effort <anna.effort@ibm.com> * fix(ui): restore row hover/selected contrast and drawer rail background Signed-off-by: Marek Dano <mk.dano@gmail.com> * fix(ui): align Users/Teams pagination controls and status icons with theme tokens Signed-off-by: Marek Dano <mk.dano@gmail.com> * Align Virtual Servers layout with the other components pages (#48) - Grid becomes `grid-cols-1 / lg:2 / 2xl:3`. `col-span-full` and `sortServersForLayout` both go — cards are uniform now, so empty servers no longer need sorting to the end to keep a full-width row from splitting the grid. Servers render in API order. - Page shell moves from `space-y-9` to a `mb-6` heading, and the loading branch stops early-returning, so the title survives the spinner. - Cards drop `min-h-29` / `min-h-35` and their `justify-*` pairs. - New `--server-icon-bg` token joins `--tool-icon-bg` and `--prompt-icon-bg`; the card status dot stops hardcoding emerald/red and picks up `--tool-status-*`. - `ConnectSourceCard` adopts `AddToolsCard`'s add-icon token, hover and description leading. 2896 tests pass; tsc, eslint, prettier and build are clean. The e2e suite was not run — no local Chromium. Signed-off-by: Anna Effort <anna.effort@ibm.com> --------- Signed-off-by: Anna Effort <anna.effort@ibm.com> Signed-off-by: Marek Dano <mk.dano@gmail.com> Co-authored-by: Marek Dano <mk.dano@gmail.com>
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
3 participants
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.