Skip to content

Add Light Mode Support for Tabs and Enable Enter Key Submission in Patient Registration

Bug Summary

Light mode tab/card UI is not properly visible, and Patient Registration search does not submit with Enter key on large screens.

Current Behavior

  • The dashboard tabs/cards are styled mainly for dark mode.
  • When switching to light mode, some card/tab colors, borders, and text contrast are not properly adapted.
  • In Patient Registration, after entering the book number, the user must click the Find Patient button manually.
  • Pressing the Enter key does not trigger the search/submit action.

Expected Behavior

  • Dashboard tabs/cards should be clearly visible in both dark mode and light mode.
  • Theme toggle should properly update card backgrounds, borders, icons, and text colors.
  • In Patient Registration, pressing Enter inside the book number input should trigger the same action as clicking Find Patient.

Impact

  • 🚨 Critical - System broken, users cannot complete core tasks
  • ⚠️ High - Major feature broken, workaround exists but difficult
  • 📌 Medium - Minor feature broken, workaround exists and easy
  • ℹ️ Low - Cosmetic issue, no functional impact

Affected Users: volunteer
Affected Modules: Volunteer Dashboard, Patient Registration, Theme Toggle

Reproduction Steps

  1. Open the eHRS website in local development.
  2. Go to the volunteer dashboard.
  3. Toggle between dark mode and light mode.
  4. Observe the tabs/cards UI visibility.
  5. Go to Patient Registration.
  6. Enter a book number in the existing patient input field.
  7. Press the Enter key.

Reproduction Rate: [x] Always [ ] Sometimes [ ] Rarely

Environment

Does the bug occur on:

  • Local development
  • Staging environment
  • Production environment

Test-Driven Bug Verification

Bug Reproduction Test Cases

Test ID Test Description Steps to Reproduce Expected Result Actual Result Status
TC-BUG-001 Verify light mode styling for dashboard tabs/cards 1. Open volunteer dashboard
2. Switch to light mode
3. Check all tabs/cards		 Cards/tabs should be readable with proper background, border, and text colors Some cards/tabs remain dark or have poor contrast ❌ Fail
TC-BUG-002 Verify Enter key submits existing patient search 1. Open Patient Registration
2. Enter book number
3. Press Enter		 Patient search should trigger automatically Nothing happens until button is clicked ❌ Fail

Regression Test Cases

Scenario 1: Bug is Fixed

Given the volunteer is on the Patient Registration page
  And a valid book number is entered
 When the user presses the Enter key
 Then the patient search should be submitted
  And no error should be shown