Skip to content

Fix dark mode accessibility and card layout consistency on Ingest page#52

Open
IshankAggarwal09 wants to merge 1 commit intonumfocus:mainfrom
IshankAggarwal09:IshankAggarwal09/49
Open

Fix dark mode accessibility and card layout consistency on Ingest page#52
IshankAggarwal09 wants to merge 1 commit intonumfocus:mainfrom
IshankAggarwal09:IshankAggarwal09/49

Conversation

@IshankAggarwal09
Copy link

Description

This PR fixes dark mode accessibility issues and a layout inconsistency on the Ingest page.
Text and UI elements were previously using hardcoded light-theme colors, which caused low contrast in dark mode and made the bottom border of the second ingest card (“Discover & Ingest by Keywords”) appear missing.

The changes ensure consistent theming using existing CSS variables, improve WCAG color contrast, and correct spacing so both ingest cards render correctly without visual overlap.

No new dependencies are required.

Fixes #49


Type of change

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • This change requires a documentation update

How Has This Been Tested?

The changes were tested manually in both light and dark modes.

  • Verified color contrast using browser dark mode and WCAG contrast checks

  • Confirmed both ingest cards display consistent borders and spacing

  • Ensured buttons no longer overlap card borders

  • Tested form interactions (disabled state, loading state, success/error messages)

  • Manual UI testing (light mode)

  • Manual UI testing (dark mode)

  • I have added the unit tests (if applicable)

Test Configuration :

  • Firmware version: N/A
  • Hardware: Desktop (Windows)
  • Toolchain: Node.js + Vite
  • SDK: N/A

Checklist:

  • My code follows the style guidelines of this project
  • I have performed a self-review of my code
  • Existing tests pass locally with my changes
  • I have written new tests that prove my fix is effective or that my feature works
    (UI-only change; no automated tests applicable)
  • I have commented my code, particularly in hard-to-understand areas
  • I have linted my code locally before submission
  • Any dependent changes have been merged and published in downstream modules
    (Not applicable)
  • I have added an explanation of what my changes do and why I'd like them to be included
  • I have checked to ensure there aren't other open Pull Requests for the same update/change

Before

Screenshot 2026-01-23 160233

After

localhost_5173_ingest

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Browser darkmode color contrast may need adjustments

1 participant