## FRONTEND: Discover Page — Organizer Filter Uses Inline Styles — Violates Design System

[OSEH-svg]

Description
The organizer filter pill buttons on the Discover page use inline Tailwind values bg-violet-600 and bg-gray-100 that do not match the project's design tokens. Closed issue #700 (FRONTEND: Centralise Colour Palette) established that all colours must use design tokens, not arbitrary Tailwind values.

Tasks

• Replace bg-violet-600 with the correct brand accent token (e.g., bg-accent).
• Replace bg-gray-100 / text-gray-700 with appropriate surface/ink tokens from globals.css.
• Ensure hover states also use design tokens.
  Acceptance Criteria
• No raw bg-violet-* or bg-gray-* classes remain on the organizer filter pills.
• Visual appearance matches the design system.
• pnpm lint passes without errors.

[JesseJohn7]

@JesseJohn7 has applied to work on this issue as part of the Stellar Wave Program's 7th wave.

Hello maintainer, i can fix this issue please assign

ℹ️ Repo Maintainers: To accept this application, review their application or assign @JesseJohn7 to this issue.

[kuse-design]

@kuse-design has applied to work on this issue as part of the Stellar Wave Program's 7th wave.

i can work on this issue because am a software engineer and am capable of completing this task

ℹ️ Repo Maintainers: To accept this application, review their application or assign @kuse-design to this issue.

[OluwapelumiElisha]

@OluwapelumiElisha has applied to work on this issue as part of the Stellar Wave Program's 7th wave.

Hello,

I would like to work on this issue.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @OluwapelumiElisha to this issue.

[holyaustin]

@holyaustin has applied to work on this issue as part of the Stellar Wave Program's 7th wave.

I'd like to work on this issue because it's a straightforward but impactful fix that enforces design system consistency across the UI. Inline Tailwind values often accumulate as technical debt, and migrating them to design tokens improves maintainability, theming capabilities, and visual cohesion—especially important for a growing project like Agora.

Relevant Experience:

Design System Implementation: I've actively worked on migrating raw Tailwind classes to CSS custom properties (design tokens) in multiple production React projects, ensuring consistency across light/dark modes and brand guidelines.

Tailwind Best Practices: I'm deeply familiar with Tailwind's configuration and know how to properly map tokens (e.g., bg-accent, text-foreground, surface-muted) using the tailwind.config.js and globals.css setup.

Attention to Detail: I'm meticulous about checking all states—default, hover, active, focus—to ensure no raw color values slip through, and I always run pnpm lint and visual regression checks before submitting.

Refactoring Discipline: I understand the importance of making these changes without affecting nearby component behavior or introducing unintended style regressions.

I can quickly locate all instances of the offending classes in the Discover page filter pills, replace them with the proper design tokens, verify the visual appearance matches the design system, and ensure the PR is clean, well-documented, and passes all CI checks.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @holyaustin to this issue.

[Danielodingz]

@Danielodingz has applied to work on this issue as part of the Stellar Wave Program's 7th wave.

Hey maintainer, please i would like to work on this issue.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Danielodingz to this issue.

[drips-wave]

Congratulations, @Danielodingz! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on July 30, 2026.

🧑‍💻 @Danielodingz: Please resolve the issue such that the repo's maintainers have enough time to review your contribution before the due date. You'll earn Points for completing the issue on-time, which will make you eligible for a share of the Stellar Wave Program's reward pool.

Warning

When opening a PR, please link it to this issue to ensure it gets tracked accurately. Points are awarded when this issue is marked as completed by the maintainer.

🤠 Repo maintainers: Please keep an eye on the contributor's progress and review their work before the due date. You can manage this issue, including adjusting its complexity and points, here.

🌊 Happy Wave 🌊

[grantfox-oss]

🎉 This issue has been marked as completed on GrantFox as part of the Official Campaign | FWC26 campaign!

@Danielodingz's PR #1158 was approved and merged by @OSEH-svg.

🏆 @Danielodingz: You earned 35 FoxPoints for this contribution! Your current tier: Explorer (449 total points). Track your full progress on GrantFox.

👏 Great work, @Danielodingz! Keep contributing to Agora-Events.

[drips-wave]

This issue has been completed by @Danielodingz as part of the Stellar Wave Program's 7th Wave 🥳

😎 @Danielodingz: You earned 200 Points for completing this issue! After the current Wave ends, you'll be eligible for a percentage of the Wave's reward pool based on the percentage of total points you've earned. Learn more here. You can also Leave a review to share your experience working on this issue.

🧑‍💻 Repo maintainers: How'd the contributor do? Leave a review to share your experience working with them.