localadministrator/avbeat-com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(contrast): white-on-white text bug — homepage 2x2 titles, .nav-link-bb, /news date inputs

Browse Source 
The 2026 rebrand swept surface hexes from dark to light but left near-white text colors baked into components. Three approved fixes:

- FeaturedBento.tsx:255 — 2x2 grid card titles base color #e0e0e0 -> #0F172A (brand-navy). Hover stays #1D4ED8.
- tailwind.css .nav-link-bb — base color #cccccc -> var(--brand-text). Hover unchanged.
- ArticleFeed.tsx :375 + :385 — date input text #888 -> #475569 (brand-text-muted) and dropped [color-scheme:dark] so Chrome stops rendering the dark date-picker chrome on a now-white input.

Findings #2, #3, #6 in the audit were not touched — Ryan flagged them as unverified.
This commit is contained in:
Local Administrator
2026-06-03 13:11:57 +00:00
parent 61363f81be
commit a1148e213b
3 changed files with 4 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/home-page/components/ArticleFeed.tsx
View File

@@ -372,7 +372,7 @@ export default function ArticleFeed() {
value={dateFrom} value={dateFrom}
onChange={(e) => { setDateFrom(e.target.value); setPage(1); }} onChange={(e) => { setDateFrom(e.target.value); setPage(1); }}
max={dateTo || undefined} max={dateTo || undefined}
className="bg-[#FFFFFF] border border-[#DCE6F2] text-[#888] text-xs font-body px-3 py-2 rounded-sm focus:outline-none focus:border-[#1D4ED8] transition-colors [color-scheme:dark]" className="bg-[#FFFFFF] border border-[#DCE6F2] text-[#475569] text-xs font-body px-3 py-2 rounded-sm focus:outline-none focus:border-[#1D4ED8] transition-colors"
title="From date" title="From date"
aria-label="Filter articles from date" aria-label="Filter articles from date"
/> />
@@ -382,7 +382,7 @@ export default function ArticleFeed() {
value={dateTo} value={dateTo}
onChange={(e) => { setDateTo(e.target.value); setPage(1); }} onChange={(e) => { setDateTo(e.target.value); setPage(1); }}
min={dateFrom || undefined} min={dateFrom || undefined}
className="bg-[#FFFFFF] border border-[#DCE6F2] text-[#888] text-xs font-body px-3 py-2 rounded-sm focus:outline-none focus:border-[#1D4ED8] transition-colors [color-scheme:dark]" className="bg-[#FFFFFF] border border-[#DCE6F2] text-[#475569] text-xs font-body px-3 py-2 rounded-sm focus:outline-none focus:border-[#1D4ED8] transition-colors"
title="To date" title="To date"
aria-label="Filter articles to date" aria-label="Filter articles to date"
/> />

2
src/app/home-page/components/FeaturedBento.tsx
View File

@@ -252,7 +252,7 @@ export default function FeaturedBento() {
</div> </div>
</div> </div>
<div className="p-2 md:p-2.5 flex-1 flex flex-col justify-between"> <div className="p-2 md:p-2.5 flex-1 flex flex-col justify-between">
<h3 className="font-heading text-[#e0e0e0] text-[12px] md:text-[13px] font-bold leading-snug line-clamp-3 group-hover:text-[#1D4ED8] transition-colors duration-200 mb-1.5 md:mb-2"> <h3 className="font-heading text-[#0F172A] text-[12px] md:text-[13px] font-bold leading-snug line-clamp-3 group-hover:text-[#1D4ED8] transition-colors duration-200 mb-1.5 md:mb-2">
{article?.title} {article?.title}
</h3> </h3>
<span className="read-more inline-block text-[11px]">Read More »</span> <span className="read-more inline-block text-[11px]">Read More »</span>

2
src/styles/tailwind.css
View File

@@ -218,7 +218,7 @@ body {
font-size: 12px; font-size: 12px;
letter-spacing: 0.04em; letter-spacing: 0.04em;
text-transform: uppercase; text-transform: uppercase;
color: #cccccc; color: var(--brand-text);
text-decoration: none; text-decoration: none;
padding: 4px 0; padding: 4px 0;
transition: color var(--transition-fast); transition: color var(--transition-fast);