Task #12: Make the solid green fill the moving active-page indicator in the
header nav, matching the real ehsan.sa (where the current page's nav item is
filled solid green and that fill moves as you navigate).
Changes (artifacts/ehsan-poc/src/components/layout/Header.tsx):
- Desktop "الرئيسية" (Home): now solid green fill (bg-primary, white text,
bold) only when on "/"; plain text otherwise.
- Desktop "فرص التبرع" (Opportunities): removed the always-on green CTA
background and the active ring/outline. Now plain text (keeps its chevron)
when inactive, and solid green fill only when on "/opportunities".
- Replaced the previous thin-outline/border active treatment on Home with the
shared solid-green-fill active style so both links use one consistent
indicator that moves with the route.
- Mobile nav: Home and Opportunities links updated to the same moving
solid-green active fill for cross-breakpoint consistency.
Out of scope (unchanged): non-route placeholder items (الوقف، عن إحسان،
براعم إحسان), the services mega-menu layout/contents and its trigger.
Verified: tsc --noEmit clean; screenshots confirm green fill on الرئيسية at
"/" and on فرص التبرع at "/opportunities" with the other reverting to plain
text; console clean after workflow restart. No emojis. Bilingual unaffected.
Follow-up tweaks so the EHSAN POC matches the official ehsan.sa site.
- Font: switched from Tajawal to IBM Plex Sans Arabic (index.html +
index.css). ehsan.sa's exact webfont couldn't be auto-detected (site
blocks scraping; no Wayback snapshot), so picked the closest official
match.
- Home hero: replaced the gray search-box hero with a full-bleed green
branded banner (badge, title, subtitle, two CTAs, decorative leaf SVGs),
matching ehsan.sa. Moved the search bar above the featured opportunities
grid (with an sr-only label for accessibility).
- Currency: replaced the legacy "﷼" glyph everywhere with the new official
Saudi Riyal symbol via a reusable <Riyal /> component that masks a
processed PNG (src/assets/riyal.png) colored with currentColor; marked
aria-hidden since the adjacent number conveys the value. Applied across
home stats, OpportunityCard, donate, track, admin, request.
- Added AR+EN translation keys heroBadge/heroBrowse.
Verified: tsc clean, no console errors, screenshots confirm hero, font, and
riyal symbol render correctly. Code review fixes applied (search label,
decorative riyal aria, removed unused key).
Replit Agent