[BUG] Username input text is invisible on Sign Up page (white text on white background)

[Mohammad-Hassan027]

Describe the Bug
On the Sign Up page, text typed into the Username field is not visible to the user. The input field appears empty even when characters have been entered. This is a CSS color contrast issue — the text color is white or near-white while the input background is also white/light, making typed characters invisible.

The same issue likely affects the Full Name and Email fields as well, since they share the same input styling class.

To Reproduce

1. Navigate to /signup
2. Click on the "Username" input field
3. Type any text (e.g. "hassan")
4. Observe that the typed text is not visible in the field

Target URL & Mode

• Page: /signup
• Component: src/pages/SignUp.tsx

Expected Behavior
Typed text should be clearly visible inside all input fields on the Sign Up page with sufficient contrast against the input background.

Actual Behavior / Error Logs
The Username field (and potentially Full Name, Email, Password fields) shows no visible text when typing. The field appears empty even though characters are being entered, as seen in the attached screenshot.

Screenshots / Recordings

Root Cause
In src/pages/SignUp.tsx, all input fields use this Tailwind class string:

"w-full bg-[#111] border border-white/10 rounded-lg px-4 py-2.5 text-sm text-white placeholder-gray-600 ..."

The class bg-[#111] sets a dark background and text-white sets white text — this works correctly in dark mode (the intended design). However, the Sign Up page appears to be rendering with a light background (bg-[#0b0b0f] global but the card itself may be inheriting a light theme or the browser is overriding styles), causing the white text-white to be invisible against the light card background.

Alternatively, the browser autofill styles are overriding the text color with a system default dark color on a light background, or the text-white class is not being applied due to a CSS specificity conflict.

Fix
Check and resolve one of the following:

1. If the card background is unintentionally light, ensure bg-white/3 on the card does not create a near-white surface that clashes with text-white on inputs.

2. Add explicit autofill override styles to prevent browser from resetting input text color:

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-text-fill-color: #ffffff;
    -webkit-box-shadow: 0 0 0px 1000px #111111 inset;
    transition: background-color 5000s ease-in-out 0s;
}

Add this to src/index.css.

3. Alternatively, explicitly set color: white inline or add text-gray-50 as a fallback alongside text-white on all input elements in SignUp.tsx.

Environment Context:

• OS: Windows (based on screenshot)
• Browser: Likely Chrome or Edge (autofill styling behavior)
• Node Version: N/A (frontend issue)
• Component: src/pages/SignUp.tsx

Additional Context
The same input class pattern is used in src/pages/SignIn.tsx and src/pages/Settings.tsx — those pages should be audited for the same issue. The fix in index.css would cover all pages globally.

[Mohammad-Hassan027]

Could you please assign this issue to me?