AOSSIE-Org / AOSSIE-Org/DebateAI

Bug: Notification bar and popovers don't follow theme in dark/system modes

Open
#338 1 comment 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
84
Forks
198
Avg merge
2d 19h
Merged PRs (30d)
30

Description

Describe the bug
The notification panel, user profile popover, and mobile drawer in `Header.tsx` use hardcoded Tailwind color classes (e.g. `text-gray-900`, `bg-gray-50`, `bg-white`, `border-gray-100`) that only render correctly in light mode. In dark or system modes, text becomes unreadable, backgrounds don't adapt, and the overall UI breaks visually.

Steps to Reproduce
1. Switch the app to dark or system mode
2. Click the notification bell icon in the header
3. Observe that the notification panel has incorrect background and text colors
4. Also check the profile popover and mobile drawer — same issue

Expected Behavior
The notification panel and all header popovers should correctly reflect the active theme across all modes (light, dark, system).

Actual Behavior
Hardcoded gray/white colors are displayed regardless of the active theme, making the UI unreadable in dark/system modes.

Environment
- App: DebateAI Web
- File affected: `frontend/src/components/Header.tsx`

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.