AOSSIE-Org / AOSSIE-Org/DebateAI

[BUG]: Reset Password form inputs have no visible border in High Contrast theme

Open
#505 1 comment 0 reactions 1 assignee Claimed by @RounakKumarAgarwal View on GitHub
bug
Dominant language
TypeScript
Stars
84
Forks
198
Avg merge
2d 19h
Merged PRs (30d)
30

Description

### Bug Description

On the "Reset Your Password" form (`/auth` → Forgot Password → after entering email → the code/new-password step), the three input fields — **Enter Code**, **New Password**, **Confirm New Password** — have no visible border in the High Contrast theme. They appear as floating placeholder text with no boxes.

This is the same class of issue as #458 (Sign In inputs, fixed in #459), but on the **Reset Your Password** form, which #459 did not cover. Verified visually: the Sign In, Sign Up, and Forgot Password (email) inputs all render borders correctly in High Contrast — only the Reset Your Password step's inputs are affected.

**Root cause** — in `frontend/src/Pages/Authentication/forms.tsx` (`ResetPasswordForm`), the new-password and confirm-password inputs use only `dark:border-white`, which applies a border only in Dark theme, with no High Contrast variant:
- New Password (line ~374): `className="w-full mb-2 dark:border-white"`
- Confirm New Password (line ~381): `className="w-full mb-4 dark:border-white"`
(The Enter Code input at ~367 has a base `border` but still reads borderless in HC — worth aligning all three.)

**Fix:** add a High Contrast border variant consistent with the pattern used elsewhere, e.g. `border [.contrast_&]:border-white`, matching how #459 handled the Sign In inputs.

@Ri1tik I found this while working on #485 (reset-code expiry). I've verified all the auth screens in High Contrast — Sign In, Sign Up, and Forgot Password inputs render borders fine; only the Reset Your Password form is affected. Could you assign this to me? Happy to fix it alongside the reset-password work.

### Steps to Reproduce

1. Go to `/auth` and switch the theme to High Contrast.
2. Click "Forgot your password? Reset Password", enter an email, submit.
3. On the "Reset Your Password" step, observe the Enter Code / New Password / Confirm New Password inputs have no visible borders — just floating text.

### Logs and Screenshots

frontend/src/Pages/Authentication/forms.tsx (ResetPasswordForm):
// code (has base border)
// new password (no HC/base border)
// confirm password (no HC/base border)

Image

Image

### Environment Details

- File: frontend/src/Pages/Authentication/forms.tsx (ResetPasswordForm inputs)
- Page: /auth → Reset Your Password step
- Frontend: Vite + React + Tailwind
- Branch: main
- Related: #458 / #459 (same class, Sign In) — verified this is the only remaining affected form; Sign In, Sign Up, and Forgot Password inputs render borders correctly in HC

### 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

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.