Skip to content

[BUG] Fix Direction Filter Toggle Border Seam in Light Mode #24

@yoko-hennie

Description

@yoko-hennie

Description

In the Active Providers direction filter (All / Both / Forward / Reverse), the selected tab border does not render correctly in light mode.
The right-side seam next to the selected tab keeps the default divider color, making the selected state look broken/inconsistent.
Dark mode appears correct.

Steps to Reproduce

  1. Run the app and open the dashboard page with the Active Providers section.
  2. In light mode, click different options in the direction filter toggle.
  3. Observe the border seam between the selected tab and the next tab.

Expected

Selected tab border should be visually consistent on all sides in light mode and dark mode.
No seam should appear as an unselected divider next to a selected tab.
Selected state should remain border/text-only (no background fill).

Actual

  • In light mode, the seam on the right side of the selected tab may appear as default divider color.
  • Selected border looks incomplete/inconsistent.
  • Visual state is less clear compared to dark mode.

Screenshot

20260414-1708-27.9101430.mp4

Environment

  • Browser: Google Chrome
  • OS: Windows
  • Mode: Light mode
  • Component: MinerRatesTable direction filter (ToggleButtonGroup)

Notes

Fix should be minimal and localized to src/components/dashboard/MinerRatesTable.tsx.
Avoid hardcoded colors and keep theme-token-based styling.
No layout or behavior changes beyond selected border seam consistency.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions