close
Skip to content

Fix Installed labels in the dark mode#2866

Merged
sejas merged 2 commits into
trunkfrom
stu-1424-studio-fix-installed-labels-in-the-dark-mode
Mar 20, 2026
Merged

Fix Installed labels in the dark mode#2866
sejas merged 2 commits into
trunkfrom
stu-1424-studio-fix-installed-labels-in-the-dark-mode

Conversation

@sejas
Copy link
Copy Markdown
Member

@sejas sejas commented Mar 20, 2026 •
edited
Loading

Related issues

Proposed Changes

  • Improve installed labels and ai settings in dark mode

Testing Instructions

  • Start the app with ENABLE_AGENT_SUITE=true npm start
  • Navigate to Assistant tab
  • Open the settings from the three dots by the input field
  • Verify the "Installed" labels are readable in both light and dark mode
  • Verify headings, descriptions, and error states also render correctly in both modes
Before After Light
Screenshot 2026-03-20 at 14 04 45 Screenshot 2026-03-20 at 14 40 11 Screenshot 2026-03-20 at 14 05 56

Pre-merge Checklist

  • Have you checked for TypeScript, React or other console errors?

@sejas @claude
Fix dark mode colors for Installed labels in AI settings modal
a6f0069 
Replace hardcoded light-mode-only Tailwind colors with theme-aware
CSS variables and dark mode variants so text, badges, and error
messages are readable in both light and dark mode.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@sejas sejas self-assigned this Mar 20, 2026
@sejas sejas requested a review from a team March 20, 2026 14:13
@wpmobilebot
Copy link
Copy Markdown
Collaborator

wpmobilebot commented Mar 20, 2026 •
edited
Loading

📊 Performance Test Results

Comparing 11e1991 vs trunk

app-size

Metric trunk 11e1991 Diff Change
App Size (Mac) 1236.63 MB 1236.63 MB 0.00 MB ⚪ 0.0%

site-editor

Metric trunk 11e1991 Diff Change
load 1938 ms 1927 ms 11 ms ⚪ 0.0%

site-startup

Metric trunk 11e1991 Diff Change
siteCreation 6112 ms 6138 ms +26 ms ⚪ 0.0%
siteStartup 3939 ms 3933 ms 6 ms ⚪ 0.0%

Results are median values from multiple test runs.

Legend: 🟢 Improvement (faster) | 🔴 Regression (slower) | ⚪ No change (<50ms diff)

gcsecsey
gcsecsey reviewed Mar 20, 2026
View reviewed changes
Copy link
Copy Markdown
Member

@gcsecsey gcsecsey left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Left a comment

Comment thread apps/studio/src/components/ai-settings-modal.tsx Outdated
</span>
{ status.exists && (
<span className="inline-flex items-center gap-1 text-[11px] text-green-700 bg-green-50 px-2 py-0.5 rounded-full">
<span className="inline-flex items-center gap-1 text-[11px] text-[#1a6928] bg-[#ceead6] dark:text-[#6ee7a0] dark:bg-[#1a3a24] px-2 py-0.5 rounded-full">
Copy link
Copy Markdown
Member

@gcsecsey gcsecsey Mar 20, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I see a darker background color than what you shared in the PR description. I think this overall looks good, but we should make the checkmark a bit lighter for the dark mode:

Image

Copy link
Copy Markdown
Contributor

@katinthehatsite katinthehatsite Mar 20, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I am not sure why but I am seeing the lighter version. But then, I actually like the version on your screenshot more as I think it works better with the dark mode 🙈

Copy link
Copy Markdown
Member Author

@sejas sejas Mar 20, 2026 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Updated! Good catch!
It seems Claude decided to revert the colors I selected before push! xD
Screenshot 2026-03-20 at 14 42 00

katinthehatsite
katinthehatsite approved these changes Mar 20, 2026
View reviewed changes
Copy link
Copy Markdown
Contributor

@katinthehatsite katinthehatsite left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this looks fine 👍 Thanks for the fix

@sejas sejas enabled auto-merge (squash) March 20, 2026 14:43
@sejas sejas merged commit 1472532 into trunk Mar 20, 2026
11 of 12 checks passed
@sejas sejas deleted the stu-1424-studio-fix-installed-labels-in-the-dark-mode branch March 20, 2026 15:04
@sejas sejas mentioned this pull request Mar 24, 2026
Merged
1 task
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@gcsecsey gcsecsey gcsecsey left review comments

@katinthehatsite katinthehatsite katinthehatsite approved these changes

Assignees

@sejas sejas

Labels

Reviewer can merge

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

4 participants

@sejas @wpmobilebot @gcsecsey @katinthehatsite