fix: #3607228 Make the resources listing text visible and match the design

Issue link: https://www.drupal.org/project/horizonaid/issues/3607228

Body: Card titles and teasers were invisible on the resources listing: the listing rows used the impressed_card_medium view mode, whose Canvas template hardcodes text_color: text-white, so navy-on-white text rendered white on white. The listing now uses the impressed_card_medium_light view mode that already exists for the light band, and the rest of the listing text was matched to the design (Figma news-listing-view).

Checked against the design and fixed:

  • Card title is now navy #0d2c54 at 24px and the teaser navy at 16px. The teaser was 14px, the design specifies 16px, so the light card template uses fs-5 instead of fs-6.
  • The listing shows 12 cards per page, as the design does. It was 9.
  • The result summary reads "Showing 1-12 of 26" with the range in bold, instead of "Shown articles: 1-9 of 26".
  • Exposed filter labels read Search Keyword, Program and Type. The search label is shown rather than visually hidden, and its placeholder reads "Search keywords".
  • The Program filter identifier is program rather than industry, so its select no longer reads "Select industry"; its empty option is rewritten to "Search Program" to match the design.

Verified on a fresh install of this branch in a real browser: title rgb(13, 44, 84) at 24px, teaser rgb(13, 44, 84) at 16px, 12 cards, "Showing 1-12 of 26", and the three filters labelled and placeheld as above.

Two design values are deliberately left out of this MR because they are not Bootstrap steps and belong in the theme: the filter panel corner radius of 20px (currently 16px from rounded-4) and the card grid gap of 32px (currently 24px from g-4). Those go to the Vartheme BS5 Horizon Aid theme rather than being approximated with the wrong utility class here.

AI-Generated: Yes

Checkpoints:

  • File an issue
  • Addition/Change/Update/Fix
  • Testing to ensure no regression
  • Automated unit testing coverage
  • Automated functional testing coverage
  • UX/UI designer responsibilities
  • Readability
  • Accessibility
  • Performance
  • Security
  • Developer Documentation
  • User Guide Documentation
  • Reviewed by human
  • Code review by maintainers
  • Full testing and approval
  • Credit contributors
  • Review with the product owner
  • Release notes snippet
  • Release
Edited by Rajab Natshah

Merge request reports

Loading