Skip to content

fix(identities): Pagination arrows in dark mode identities tab barely visible - #8564

Open
yar01110 wants to merge 1 commit into
Flagsmith:mainfrom
yar01110:fix/8547-paging-arrows-dark-mode
Open

yar01110 wants to merge 1 commit into
Flagsmith:mainfrom
yar01110:fix/8547-paging-arrows-dark-mode

Conversation

@yar01110

Copy link
Copy Markdown

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 .icon rule 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

  • Pagination arrows and page numbers are readable in dark mode
  • Light mode is unchanged (the design tokens resolve to the previous values)
  • Added a Storybook story for Paging, including one inside a Panel, so it can be checked in both themes

Closes #8547

Review effort: 1/5


Verified in Storybook (Components/Patterns/PagingInside Panel, dark theme): arrow colour goes from rgba(101,109,123,0.16) to rgb(157,164,174); light mode stays rgb(101,109,123).

… 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>
@vercel

vercel Bot commented Sep 21, 2026

Copy link
Copy Markdown

@yar01110 is attempting to deploy a commit to the Flagsmith Team on Vercel.

A member of the Team first needs to authorize it.

@coderabbitai

coderabbitai Bot commented Sep 21, 2026

Copy link
Copy Markdown

Review in Change Stack →

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 configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Advanced

Run ID: 8db1b679-2db3-4669-8c01-2f07d32d7d60

📥 Commits

Reviewing files that changed from the base of the PR and between 66dc2e9 and a459064.

📒 Files selected for processing (3)
  • frontend/documentation/components/Paging.stories.tsx
  • frontend/web/styles/components/_paging.scss
  • frontend/web/styles/components/_panel.scss
💤 Files with no reviewable changes (1)
  • frontend/web/styles/components/_panel.scss

Included review availability: Your plan provides up to 8 included reviews per hour; 7 remain after this review.


📝 Walkthrough

Walkthrough

The change adds four Storybook stories for the Paging component. The stories cover default pagination, panel rendering, first-page navigation, and loading. Paging borders and icon colours now use CSS custom properties. The dark-theme panel icon colour override has been removed.

Priority: ➖ Normal

Estimated code review effort: 2 (Simple) | ~15 minutes

Severity of issue fixed: Medium

✨ Finishing Touches 💡 1
🛠️ Fix failing CI checks 💡
  • Commit to this branch
  • Create a new PR

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.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@github-actions github-actions Bot added the front-end Issue related to the React Front End Dashboard label Sep 21, 2026
@yar01110
yar01110 marked this pull request as ready for review September 22, 2026 00:01
@yar01110
yar01110 requested a review from a team as a code owner September 22, 2026 00:01
@yar01110
yar01110 requested review from talissoncosta and removed request for a team September 22, 2026 00:01

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

front-end Issue related to the React Front End Dashboard

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Pagination arrows in dark mode identities tab barely visible

1 participant