Repository navigation
fix(identities): Pagination arrows in dark mode identities tab barely visible - #8564
Conversation
… visible In dark mode, `.dark .panel .icon` (added in Flagsmith#3864) painted any `.icon` element inside a panel with `$hr-border-color`, a 16%-alpha grey. The only `.icon` elements that appear inside panels are the previous/next buttons of `Paging`, so the arrows at the bottom of the identities list (and every other paginated panel) rendered at 16% opacity on the dark background. - Remove the vestigial `.dark .panel .icon` rule: nothing else matches it. - Colour `.paging .page` with the design tokens `--color-icon-secondary` and `--color-border-default`, which resolve to the previous light-mode values (`#656d7b`, 16% slate) and to readable dark-mode values (slate-300, 16% white), so both themes are correct by construction. - Add a Storybook story for `Paging`, including one inside a `Panel`, so the control can be checked in both themes. Verified in Storybook: dark-mode arrow colour goes from rgba(101,109,123,0.16) to rgb(157,164,174); light mode is unchanged. Closes Flagsmith#8547 Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
|
@yar01110 is attempting to deploy a commit to the Flagsmith Team on Vercel. A member of the Team first needs to authorize it. |
|
Navigate logical layers of code changes, visualize relationships, and explore their blast radius. No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: ASSERTIVE Plan: Advanced Run ID: 📒 Files selected for processing (3)
💤 Files with no reviewable changes (1)
Included review availability: Your plan provides up to 8 included reviews per hour; 7 remain after this review. 📝 WalkthroughWalkthroughThe change adds four Storybook stories for the Priority: ➖ Normal Estimated code review effort: 2 (Simple) | ~15 minutes Severity of issue fixed: Medium ✨ Finishing Touches 💡 1🛠️ Fix failing CI checks 💡
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
github-actions
Bot
added
the
front-end
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
talissoncosta
left a comment
talissoncosta
left a comment
There was a problem hiding this comment.
Nice fix, and the right one. Removing the .dark .panel .icon rule rather than overriding it again means every icon in a panel takes its colour from context, not just the pagination arrows. Icon already falls back to currentColor so they inherit properly.
The token swap in _paging.scss is where we're heading with theming too, and the story gives us dark mode coverage we didn't have.
Thanks for the contribution!
This branch was successfully deployed
2 participants
In dark mode, the previous/next arrows at the bottom of the identities list (and any other paginated panel) were almost invisible: a
.dark .panel .iconrule from #3864 painted them with a 16%-alpha grey. The page numbers next to them also kept their light-theme grey. Users could not tell there were more pages.Changes
Paging, including one inside aPanel, so it can be checked in both themesCloses #8547
Review effort: 1/5
Verified in Storybook (
Components/Patterns/Paging→ Inside Panel, dark theme): arrow colour goes fromrgba(101,109,123,0.16)torgb(157,164,174); light mode staysrgb(101,109,123).