Studio: Fix sync info icon color in dark mode#3053
Merged
Conversation
The info icons next to the push progress bar had no fill color class, defaulting to black which is invisible on the dark background. Add fill-frame-text-secondary to match the existing offline icon style.
gcsecsey
changed the title
gcsecsey
changed the title
Collaborator
📊 Performance Test ResultsComparing 7394b6f vs trunk app-size
site-editor
site-startup
Results are median values from multiple test runs. Legend: 🟢 Improvement (faster) | 🔴 Regression (slower) | ⚪ No change (<50ms diff) |
katinthehatsite
pushed a commit
that referenced
this pull request
Apr 10, 2026
The info icons next to the push progress bar had no fill color class, defaulting to black which is invisible on the dark background. Add fill-frame-text-secondary to match the existing offline icon style.
katinthehatsite
added a commit
that referenced
this pull request
Apr 10, 2026
* [skip ci] Code freeze: Update translatable strings for 1.7.8 * [skip ci] Code freeze: Add draft release notes for 1.7.8 * Add push/pull/import/export MCP tools for AI agents (#3022) Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com> * Sort studio code commands and subcommands alphabetically (#3027) * Moved the `code` command registration in `apps/cli/index.ts` so that top-level CLI commands appear in alphabetical order * Strip unnecessary fields in wpcom_request response (#3005) * Strip bloated plan.features from wpcom_request responses The WP.com /sites/{id} endpoint returns a plan object whose features sub-field alone is 60K+ characters, pushing the total response past Claude Code's ~100K character MCP tool result limit. The agent only needs product_slug, is_free, and expired to gate features, since the system prompt hardcodes what each plan tier can and can't do. Strip plan.features and keep only essential plan properties. * Also compact large array responses by stripping content and _links List endpoints like GET /templates can return 80K+ chars of block markup. Strip content and _links from array items when the response exceeds 80K chars — the agent can still identify items by slug/title and fetch individual ones for full content. * Add _fields prompt guidance and scope plan compaction as special case Add system prompt hint instructing the agent to use _fields on wp/v2 listing endpoints to minimize response sizes. Scope compactResponse() to only handle plan.features stripping with a clear comment that this is a special case (the API doesn't support sub-field filtering). Remove the generic array compaction in favor of prompt-driven field selection. * Add fields guidance for v1.1, rename stripOversizedFields Update system prompt to instruct the agent to use fields (v1.1) and _fields (wp/v2) to minimize response sizes, always including ID for v1.1 requests. Rename compactResponse to stripOversizedFields for clarity. * Remove indentation in JSON to save tokens * Fix dark mode visibility for error/success text in site list (#3034) * Fix dark mode onbiarding screen (#3025) Co-authored-by: Kateryna Kodonenko <kateryna@automattic.com> * Studio: Filter out deprecated warnings from fatal errors (#3018) * Filter out deprecated warnings from fatal errors * Ensure our error filtering approach is consistent with CLI * Apply changes to default exporter * Fix unit tests --------- Co-authored-by: Kateryna Kodonenko <kateryna@automattic.com> * [skip ci] Update translations * [skip ci] Bump version to 1.7.8-beta1 * CLI: ensure Studio root exists before starting code agent (#3039) * Ensure startAiAgent() checks whether ~/Studio exists before launching the Claude SDK. * Define a localeData type to fix lint error: The inferred type of this node exceeds the maximum length the compiler will serialize. An explicit type annotation is needed. (ts 7056) * [skip ci] Bump version to 1.7.8-beta2 * Update illustration colors and add dot grid background (#3004) * Update Sync and Preview illustrations with dark mode support and dot grid background Rebuild the Sync tab illustration SVG with proper light/dark mode color switching. Update the Preview tab browser chrome to use light colors in light mode. Add an interactive DotGrid canvas component behind both illustrations with a radial gradient mask for a clean fade effect. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * Extract IllustrationGrid wrapper, use CSS tokens in SVGs, add tests - Extract shared IllustrationGrid component (DotGrid + radial mask) used by both Sync and Preview tabs - Replace hardcoded SVG colors with CSS custom properties (--color-frame-surface, --color-frame-bg, etc.) so illustrations adapt automatically to theme changes - Scope SVG class names with short prefixes (sti-, sds-) to avoid collisions - Add basic tests for DotGrid and IllustrationGrid components Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * Mock DotGrid in sync tests to fix canvas error in jsdom Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * Respect prefers-reduced-motion in DotGrid When reduced motion is preferred, render a static grid with no intro animation, hover repulsion, or click ripples. Mouse event listeners are not attached at all. The grid still responds to resize and color scheme changes. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * Keep WP logo white in dark mode on blue browser, dedup resize logic Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * Solve for strange sidebars --------- Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com> Co-authored-by: katinthehatsite <katerynakodonenko@gmail.com> Co-authored-by: Kateryna Kodonenko <kateryna@automattic.com> * Upgrade archiver to v7 to fix glob and inflight deprecation warnings (#3050) * CLI: upgrade archiver to v7 to fix glob and inflight deprecation warnings archiver@6 → archiver@7 pulls in archiver-utils@5 which uses glob@10 instead of glob@8, eliminating the glob and inflight deprecation warnings. @types/archiver@7 dropped followSymlinks from CoreOptions (it's still supported at runtime), so cast ArchiverOptions at call sites instead of patching node_modules. Also fixes the broken ProgressData named import which doesn't work with the export= module style in @types/archiver@7. * Studio: upgrade archiver to v7, drop @types/archiver patch Consistent with the CLI upgrade. Drops the @types+archiver+6.0.4 patch in favour of the same cast-based approach used in apps/cli. * Studio: remove obsolete archiver@6 runtime patch * Studio: Fix sync info icon color in dark mode (#3053) The info icons next to the push progress bar had no fill color class, defaulting to black which is invisible on the dark background. Add fill-frame-text-secondary to match the existing offline icon style. * Update CLI README with GIF and import/export/push/pull (#3029) * Update CLI README * Tweaks * More tweaks * Tweak * Wider * Enforce minimum node version in the CLI (#3049) * Enforce minimum node version in the CLI * Tweaks * Allow translations to load first * Fix sidebar top padding on Windows (#3026) * [skip ci] Update translations * [skip ci] Bump version to 1.7.8-beta3 --------- Co-authored-by: Riad Benguella <benguella@gmail.com> Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com> Co-authored-by: Antonio Sejas <antonio.sejas@automattic.com> Co-authored-by: Roberto Aranda <roberto.aranda@automattic.com> Co-authored-by: Bernardo Cotrim <bmmcotrim@gmail.com> Co-authored-by: katinthehatsite <katerynakodonenko@gmail.com> Co-authored-by: Kateryna Kodonenko <kateryna@automattic.com> Co-authored-by: Jorge Costa <jorge.costa@developer.pt> Co-authored-by: Antonio Sejas <antonio@sejas.es> Co-authored-by: Shaun Andrews <shaun@automattic.com> Co-authored-by: Wojtek Naruniec <wojtek.naruniec@automattic.com> Co-authored-by: Gergely Csécsey <gergely.csecsey@automattic.com> Co-authored-by: Fredrik Rombach Ekelund <fredrik@f26d.dev> Co-authored-by: Volodymyr Makukha <nei.css@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
4 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.
Related issues
How AI was used in this PR
To identify the info icons and apply the changes.
Proposed Changes
In dark mode, the info icon next to the sync push progress bar is black, making it hardly visible against the dark background.
className="fill-frame-text-secondary"to the info icon shown when upload is manually pausedclassName="fill-frame-text-secondary"to the info icon shown during active push progressTesting Instructions
npm startand switch to dark modePre-merge Checklist