AOSSIE-Org / AOSSIE-Org/DebateAI

[BUG]: Novice badge icon uses hardcoded text-blue-500 instead of a theme token — doesn't adapt across themes

Đang mở
#500 1 bình luận 0 reaction 1 người được giao Được @RounakKumarAgarwal nhận Xem trên GitHub
bug
Ngôn ngữ chính
TypeScript
Star
84
Fork
198
Merge trung bình
2 ngày 19 giờ
Pull request đã merge (30 ngày)
30

Mô tả

### Bug Description

The Novice badge icon is hardcoded to `text-blue-500`, so it stays the same blue in every theme (Light, Dark, High Contrast) instead of adapting to the active theme. This is inconsistent with the fallback badge icon in the same code, which correctly uses the `text-primary` theme token.

Hardcoded locations:
- `frontend/src/Pages/Profile.tsx:862` — `Novice: `
- `frontend/src/components/BadgeUnlocked.tsx:14` — `Novice: `

For contrast, the fallback icons in the same files use a theme token and adapt correctly:
- `Profile.tsx:875` — ``
- `BadgeUnlocked.tsx:56` — ``

Because `text-blue-500` is a fixed color, the Novice icon can clash with the active theme — most noticeably in High Contrast, where the rest of the UI uses the yellow/black accent system but the badge icon stays blue. The fix is to use a theme-aware token (e.g. `text-primary`, matching the fallback) instead of the hardcoded blue.

### Steps to Reproduce

1. Complete a debate so the Novice badge is earned (or view a profile that has it), at `/profile`.
2. Look at the Novice badge icon under the "Badges" section.
3. Switch between Light, Dark, and High Contrast themes.
4. Observe the Novice badge icon stays the same blue in all themes, rather than adapting like other theme-aware elements.

### Logs and Screenshots

Hardcoded (does not adapt):
Profile.tsx:862 Novice:
BadgeUnlocked.tsx:14 Novice:

Theme-aware fallback (for contrast, in the same files):
Profile.tsx:875
BadgeUnlocked.tsx:56

Image

Image

Image

Image

### Environment Details

- Page: /profile (Badges section) and the BadgeUnlocked popup
- Files: frontend/src/Pages/Profile.tsx:862, frontend/src/components/BadgeUnlocked.tsx:14
- Frontend: Vite + React + Tailwind
- Branch: main
- Fix: replace hardcoded text-blue-500 with a theme token (e.g. text-primary), matching the fallback icons

### Impact

Low - Minor inconvenience

### Code of Conduct

- [x] I have joined the [Discord server](https://discord.gg/hjUhu33uAn) and will post updates there
- [x] I have searched existing issues to avoid duplicates

Hướng dẫn đóng góp

Chưa lập chỉ mục được hướng dẫn đóng góp cho kho mã nguồn này

Đánh giá

Issue này chưa được đánh giá.

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.