Bug: Input text invisible in DebateRoom debate input field in Dark Theme

[ProthamD]

🐞 Bug: Input text invisible in DebateRoom debate input field

Description

The text inside the input field in the DebateRoom becomes invisible due to a styling mismatch between the container background and the input text color.

What's happening

• Container uses bg-white (hardcoded light background)
• Input uses bg-transparent and inherits theme-based text color
• Result: white/light text on white background → invisible input text

This is a UI bug that affects usability during debates.

Expected Behavior

The input text should always remain visible regardless of theme settings.

Actual Behavior

The input text appears invisible and cannot be seen against the white container background.

Screenshots

Root Cause

The Input component in frontend/src/Pages/DebateRoom.tsx (around line 841) does not explicitly define a text color, while its parent container enforces a white background.

Current code:

className="flex-1 border-gray-300 focus:border-orange-400 rounded-md text-sm"

Suggested Fix

Add explicit text-gray-900 and bg-white classes to ensure visibility:

className="flex-1 border-gray-300 focus:border-orange-400 rounded-md text-sm text-gray-900 bg-white"

Environment

• File: frontend/src/Pages/DebateRoom.tsx
• Component: Input field in debate chat

---

I have identified this bug and a few more related invisible text issues in the "Practice with Bot" flow. I have fixes ready, though I would still like to ask for some opinions on a few of the fixes. If it's alright, I'd like to work on this and open a PR. Could you please assign this issue to me?