Skip to content

fix(account-dropdown): fix contrast issues in dark mode#7088

Merged
talissoncosta merged 1 commit intomainfrom
fix/account-dropdown-contrast-6902
Apr 8, 2026
Merged

fix(account-dropdown): fix contrast issues in dark mode#7088
talissoncosta merged 1 commit intomainfrom
fix/account-dropdown-contrast-6902

Conversation

@talissoncosta
Copy link
Copy Markdown
Contributor

@talissoncosta talissoncosta commented Mar 31, 2026 •
edited
Loading

  • I have read the Contributing Guide.
  • I have added information to docs/ if required so people know about the feature.
  • I have filled in the "Changes" section below.
  • I have filled in the "How did you test this code" section below.

Changes

Closes #6902

Replace btn btn-link with scoped .account-dropdown-trigger styles using semantic design tokens:

  • Uses --color-text-default for theme-aware text colour (dark in light mode, white in dark mode)
  • Purple hover state (--color-text-action) on label text only, not the icon
  • Removes dependency on Bootstrap button classes that forced low-contrast brand purple

How did you test this code?

Manually verified in both light and dark mode:

  • "Account" text is readable against the navbar background in both themes
  • Hover state turns only the "Account" label purple, icon remains unchanged
  • Button behaviour (click to open dropdown) unchanged

@vercel
Copy link
Copy Markdown

vercel bot commented Mar 31, 2026 •
edited
Loading

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
flagsmith-frontend-preview Ready Ready Preview, Comment Apr 8, 2026 11:46am
flagsmith-frontend-staging Ready Ready Preview, Comment Apr 8, 2026 11:46am
1 Skipped Deployment
Project Deployment Actions Updated (UTC)
docs Ignored Ignored Preview Apr 8, 2026 11:46am

Request Review

@github-actions github-actions bot added the front-end Issue related to the React Front End Dashboard label Mar 31, 2026
@talissoncosta talissoncosta changed the base branch from main to chore/design-system-tokens April 6, 2026 12:24
@talissoncosta talissoncosta changed the title Fix Account dropdown trigger contrast in dark mode fix(account-dropdown): fix contrast issues in dark mode Apr 6, 2026
@talissoncosta talissoncosta force-pushed the fix/account-dropdown-contrast-6902 branch from c8f239e to fb08f38 Compare April 6, 2026 12:27
@github-actions github-actions bot added the fix label Apr 6, 2026
@talissoncosta talissoncosta force-pushed the fix/account-dropdown-contrast-6902 branch from fb08f38 to bae8fe0 Compare April 6, 2026 12:34
@github-actions github-actions bot added fix and removed fix labels Apr 6, 2026
Base automatically changed from chore/design-system-tokens to main April 7, 2026 12:54
@talissoncosta talissoncosta force-pushed the fix/account-dropdown-contrast-6902 branch from bae8fe0 to 8adc727 Compare April 7, 2026 17:07
@talissoncosta talissoncosta marked this pull request as ready for review April 7, 2026 17:07
@talissoncosta talissoncosta requested a review from a team as a code owner April 7, 2026 17:07
@talissoncosta talissoncosta requested review from Zaimwa9 and removed request for a team April 7, 2026 17:07
claude[bot]
claude bot reviewed Apr 7, 2026
View reviewed changes
Copy link
Copy Markdown

@claude claude bot left a comment

Choose a reason for hiding this comment

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

⚠️ Code review skipped — your organization's overage spend limit has been reached.

Code review is billed via overage credits. To resume reviews, an organization admin can raise the monthly limit at claude.ai/admin-settings/claude-code.

Once credits are available, reopen this pull request to trigger a review.

@github-actions github-actions bot added fix and removed fix labels Apr 7, 2026
@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Apr 7, 2026 •
edited
Loading

Docker builds report

Image Build Status Security report
ghcr.io/flagsmith/flagsmith-api-test:pr-7088 Finished ✅ Skipped
ghcr.io/flagsmith/flagsmith-e2e:pr-7088 Finished ✅ Skipped
ghcr.io/flagsmith/flagsmith-api:pr-7088 Finished ✅ Results ✅
ghcr.io/flagsmith/flagsmith:pr-7088 Finished ✅ Results ✅
ghcr.io/flagsmith/flagsmith-private-cloud:pr-7088 Finished ✅ Results ✅
ghcr.io/flagsmith/flagsmith-frontend:pr-7088 Finished ✅ Results ✅

@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Apr 7, 2026 •
edited
Loading

Playwright Test Results (oss - depot-ubuntu-latest-arm-16)

passed  11 passed

Details

stats  11 tests across 8 suites
duration  49.2 seconds
commit  8adc727
info  🔄 Run: #15847 (attempt 1)

Playwright Test Results (oss - depot-ubuntu-latest-16)

passed  11 passed

Details

stats  11 tests across 8 suites
duration  28.4 seconds
commit  8adc727
info  🔄 Run: #15847 (attempt 1)

Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)

passed  17 passed

Details

stats  17 tests across 14 suites
duration  1 minute, 2 seconds
commit  8adc727
info  🔄 Run: #15847 (attempt 1)

Playwright Test Results (private-cloud - depot-ubuntu-latest-16)

passed  1 passed

Details

stats  1 test across 1 suite
duration  48.4 seconds
commit  8adc727
info  🔄 Run: #15847 (attempt 1)

Playwright Test Results (oss - depot-ubuntu-latest-16)

passed  11 passed

Details

stats  11 tests across 8 suites
duration  24.6 seconds
commit  0ac798b
info  🔄 Run: #15875 (attempt 1)

Playwright Test Results (oss - depot-ubuntu-latest-arm-16)

passed  11 passed

Details

stats  11 tests across 8 suites
duration  1.4 seconds
commit  0ac798b
info  🔄 Run: #15875 (attempt 1)

Playwright Test Results (private-cloud - depot-ubuntu-latest-16)

passed  17 passed

Details

stats  17 tests across 14 suites
duration  49 seconds
commit  0ac798b
info  🔄 Run: #15875 (attempt 1)

Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)

passed  17 passed

Details

stats  17 tests across 14 suites
duration  1 minute
commit  0ac798b
info  🔄 Run: #15875 (attempt 1)

kyle-ssg
kyle-ssg previously approved these changes Apr 8, 2026
View reviewed changes
kyle-ssg
kyle-ssg reviewed Apr 8, 2026
View reviewed changes
@kyle-ssg
Copy link
Copy Markdown
Member

kyle-ssg commented Apr 8, 2026

Approved but just some general feedback

@talissoncosta @claude
fix(a11y): fix Account dropdown trigger contrast in dark mode
0ac798b 
Use semantic token utilities (.text-default, .icon-secondary) for
theme-aware colours. Bootstrap classes handle layout, custom CSS
only for button reset and hover state.

Closes #6902

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@talissoncosta talissoncosta force-pushed the fix/account-dropdown-contrast-6902 branch from 8adc727 to 0ac798b Compare April 8, 2026 11:43
@github-actions github-actions bot added fix and removed fix labels Apr 8, 2026
@talissoncosta talissoncosta requested a review from kyle-ssg April 8, 2026 11:45
@talissoncosta talissoncosta merged commit c924459 into main Apr 8, 2026
30 checks passed
@talissoncosta talissoncosta deleted the fix/account-dropdown-contrast-6902 branch April 8, 2026 12:12
@flagsmithdev flagsmithdev mentioned this pull request Apr 8, 2026
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@claude claude[bot] claude[bot] left review comments

@kyle-ssg kyle-ssg kyle-ssg approved these changes

@Zaimwa9 Zaimwa9 Awaiting requested review from Zaimwa9 Zaimwa9 is a code owner automatically assigned from Flagsmith/flagsmith-front-end

Assignees

No one assigned

Labels

fix front-end Issue related to the React Front End Dashboard

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Fix Account dropdown trigger contrast in dark mode

2 participants

@talissoncosta @kyle-ssg