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

[compiler041]

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

[compiler041]

i am working on it.