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

fix(mobile): mobile menu unreadable + secondary nav overflowing + forum auth white-on-light

Browse Source 
Critical mobile bugs flagged from an iPhone screenshot.

1) Mobile hamburger menu — all main nav items (HOME / SHOW COVERAGE /
   DIRECTORY / FORUM / READING LIST) were `text-white` on
   `bg-[#F8FAFC]`, i.e. white-on-light. Effectively invisible. Legacy
   styling from the dark-theme era that never got updated. Flipped to
   `text-[#0F172A]` + `hover:bg-[#FFFFFF]` + `border-[#DCE6F2]` to match
   the My Profile / WP Import links right below them that were already
   correctly themed.

2) Secondary top nav (social icons / language switcher / Sign In + Join
   / newsletter email input) was a single h-8 flex row that always
   rendered — on a phone-width viewport the row spills the email input
   off the right edge. Added `hidden md:flex` so the whole bar
   disappears on mobile. Affordances stay reachable via the hamburger
   menu, in-forum Sign In/Join buttons, and the footer.

3) Forum auth pages (login, register, forgot-password, reset-password)
   had `text-white` on every H1 AND on every form input that uses
   `bg-[#F8FAFC]`. So users opening any of those four pages saw a blank
   white card with invisible labels and couldn't see what they were
   typing into the password fields. Same dark-theme regression as #1.
   Blanket-replaced `text-white` with `text-[#0F172A]` across all four
   files, then restored `text-white` only inside classNames that also
   contain `bg-[#1D4ED8]` / `bg-[#1E3A8A]` / `brand-gradient` (the
   submit buttons — those WERE correct).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Local Administrator
2026-06-04 22:22:18 +00:00
parent 761ebf0cdc
commit a8dc457742
5 changed files with 23 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/forum/forgot-password/page.tsx
View File

@@ -34,7 +34,7 @@ function ForgotInner() {
<div className="max-w-md mx-auto px-4 py-16"> <div className="max-w-md mx-auto px-4 py-16">
<div className="text-center mb-6"> <div className="text-center mb-6">
<div className="text-[10px] uppercase tracking-widest text-[#1D4ED8] font-mono mb-2">Account recovery</div> <div className="text-[10px] uppercase tracking-widest text-[#1D4ED8] font-mono mb-2">Account recovery</div>
<h1 className="text-3xl font-heading font-bold text-white">Reset your password</h1> <h1 className="text-3xl font-heading font-bold text-[#0F172A]">Reset your password</h1>
<p className="text-[#888] font-body text-sm mt-2"> <p className="text-[#888] font-body text-sm mt-2">
Enter your email — we&rsquo;ll send a link to set a new password. Enter your email — we&rsquo;ll send a link to set a new password.
</p> </p>
@@ -63,7 +63,7 @@ function ForgotInner() {
onChange={(e) => setEmail(e.target.value)} onChange={(e) => setEmail(e.target.value)}
autoComplete="email" autoComplete="email"
required required
className="w-full bg-[#F8FAFC] border border-[#DCE6F2] rounded-lg px-3 py-2 text-white font-body text-sm focus:outline-none focus:border-[#1D4ED8]" className="w-full bg-[#F8FAFC] border border-[#DCE6F2] rounded-lg px-3 py-2 text-[#0F172A] font-body text-sm focus:outline-none focus:border-[#1D4ED8]"
/> />
</div> </div>
<button <button

6
src/app/forum/login/page.tsx
View File

@@ -55,7 +55,7 @@ function ForumLoginInner() {
<div className="max-w-md mx-auto px-4 py-16"> <div className="max-w-md mx-auto px-4 py-16">
<div className="text-center mb-6"> <div className="text-center mb-6">
<div className="text-[10px] uppercase tracking-widest text-[#1D4ED8] font-mono mb-2">Welcome back</div> <div className="text-[10px] uppercase tracking-widest text-[#1D4ED8] font-mono mb-2">Welcome back</div>
<h1 className="text-3xl font-heading font-bold text-white">Sign in to AV Beat</h1> <h1 className="text-3xl font-heading font-bold text-[#0F172A]">Sign in to AV Beat</h1>
<p className="text-[#888] font-body text-sm mt-2"> <p className="text-[#888] font-body text-sm mt-2">
Your account covers the forum, newsletter preferences, and saved articles. Your account covers the forum, newsletter preferences, and saved articles.
</p> </p>
@@ -79,7 +79,7 @@ function ForumLoginInner() {
onChange={(e) => setEmail(e.target.value)} onChange={(e) => setEmail(e.target.value)}
autoComplete="email" autoComplete="email"
required required
className="w-full bg-[#F8FAFC] border border-[#DCE6F2] rounded-lg px-3 py-2 text-white font-body text-sm focus:outline-none focus:border-[#1D4ED8]" className="w-full bg-[#F8FAFC] border border-[#DCE6F2] rounded-lg px-3 py-2 text-[#0F172A] font-body text-sm focus:outline-none focus:border-[#1D4ED8]"
/> />
</div> </div>
<div> <div>
@@ -92,7 +92,7 @@ function ForumLoginInner() {
onChange={(e) => setPassword(e.target.value)} onChange={(e) => setPassword(e.target.value)}
autoComplete="current-password" autoComplete="current-password"
required required
className="w-full bg-[#F8FAFC] border border-[#DCE6F2] rounded-lg px-3 py-2 text-white font-body text-sm focus:outline-none focus:border-[#1D4ED8]" className="w-full bg-[#F8FAFC] border border-[#DCE6F2] rounded-lg px-3 py-2 text-[#0F172A] font-body text-sm focus:outline-none focus:border-[#1D4ED8]"
/> />
</div> </div>
<button <button

14
src/app/forum/register/page.tsx
View File

@@ -106,7 +106,7 @@ function ForumRegisterInner() {
{/* Left rail — what membership gets you */} {/* Left rail — what membership gets you */}
<aside className="hidden lg:block"> <aside className="hidden lg:block">
<div className="text-[10px] uppercase tracking-widest text-[#1D4ED8] font-mono mb-3">Membership</div> <div className="text-[10px] uppercase tracking-widest text-[#1D4ED8] font-mono mb-3">Membership</div>
<h1 className="font-heading text-white text-4xl xl:text-5xl font-bold leading-tight mb-4"> <h1 className="font-heading text-[#0F172A] text-4xl xl:text-5xl font-bold leading-tight mb-4">
Join AV Beat Join AV Beat
</h1> </h1>
<p className="text-[#cbd5e1] text-base leading-relaxed mb-6 max-w-md"> <p className="text-[#cbd5e1] text-base leading-relaxed mb-6 max-w-md">
@@ -122,7 +122,7 @@ function ForumRegisterInner() {
<li key={String(title)} className="flex gap-3 items-start"> <li key={String(title)} className="flex gap-3 items-start">
<span className="text-xl leading-none flex-shrink-0">{icon}</span> <span className="text-xl leading-none flex-shrink-0">{icon}</span>
<div> <div>
<div className="font-semibold text-white">{title}</div> <div className="font-semibold text-[#0F172A]">{title}</div>
<div className="text-xs text-[#9ca3af] mt-0.5">{desc}</div> <div className="text-xs text-[#9ca3af] mt-0.5">{desc}</div>
</div> </div>
</li> </li>
@@ -137,7 +137,7 @@ function ForumRegisterInner() {
{/* Mobile-only hero (collapsed copy) */} {/* Mobile-only hero (collapsed copy) */}
<div className="lg:hidden text-center mb-2"> <div className="lg:hidden text-center mb-2">
<h1 className="font-heading text-white text-2xl font-bold">Join AV Beat</h1> <h1 className="font-heading text-[#0F172A] text-2xl font-bold">Join AV Beat</h1>
<p className="text-[#888] font-body text-sm mt-1"> <p className="text-[#888] font-body text-sm mt-1">
One account for the forum, newsletter preferences, and saved articles. One account for the forum, newsletter preferences, and saved articles.
</p> </p>
@@ -171,7 +171,7 @@ function ForumRegisterInner() {
onChange={(e) => setFullName(e.target.value)} onChange={(e) => setFullName(e.target.value)}
autoComplete="name" autoComplete="name"
required required
className="w-full bg-[#F8FAFC] border border-[#DCE6F2] rounded-lg px-3 py-2 text-white font-body text-sm focus:outline-none focus:border-[#1D4ED8]" className="w-full bg-[#F8FAFC] border border-[#DCE6F2] rounded-lg px-3 py-2 text-[#0F172A] font-body text-sm focus:outline-none focus:border-[#1D4ED8]"
/> />
</div> </div>
<div> <div>
@@ -184,7 +184,7 @@ function ForumRegisterInner() {
onChange={(e) => setEmail(e.target.value)} onChange={(e) => setEmail(e.target.value)}
autoComplete="email" autoComplete="email"
required required
className="w-full bg-[#F8FAFC] border border-[#DCE6F2] rounded-lg px-3 py-2 text-white font-body text-sm focus:outline-none focus:border-[#1D4ED8]" className="w-full bg-[#F8FAFC] border border-[#DCE6F2] rounded-lg px-3 py-2 text-[#0F172A] font-body text-sm focus:outline-none focus:border-[#1D4ED8]"
/> />
</div> </div>
<div> <div>
@@ -198,7 +198,7 @@ function ForumRegisterInner() {
autoComplete="new-password" autoComplete="new-password"
required required
minLength={6} minLength={6}
className="w-full bg-[#F8FAFC] border border-[#DCE6F2] rounded-lg px-3 py-2 text-white font-body text-sm focus:outline-none focus:border-[#1D4ED8]" className="w-full bg-[#F8FAFC] border border-[#DCE6F2] rounded-lg px-3 py-2 text-[#0F172A] font-body text-sm focus:outline-none focus:border-[#1D4ED8]"
/> />
</div> </div>
<div> <div>
@@ -211,7 +211,7 @@ function ForumRegisterInner() {
onChange={(e) => setConfirm(e.target.value)} onChange={(e) => setConfirm(e.target.value)}
autoComplete="new-password" autoComplete="new-password"
required required
className="w-full bg-[#F8FAFC] border border-[#DCE6F2] rounded-lg px-3 py-2 text-white font-body text-sm focus:outline-none focus:border-[#1D4ED8]" className="w-full bg-[#F8FAFC] border border-[#DCE6F2] rounded-lg px-3 py-2 text-[#0F172A] font-body text-sm focus:outline-none focus:border-[#1D4ED8]"
/> />
</div> </div>
<button <button

6
src/app/forum/reset-password/page.tsx
View File

@@ -44,7 +44,7 @@ function ResetInner() {
<div className="max-w-md mx-auto px-4 py-16"> <div className="max-w-md mx-auto px-4 py-16">
<div className="text-center mb-6"> <div className="text-center mb-6">
<div className="text-[10px] uppercase tracking-widest text-[#1D4ED8] font-mono mb-2">Reset password</div> <div className="text-[10px] uppercase tracking-widest text-[#1D4ED8] font-mono mb-2">Reset password</div>
<h1 className="text-3xl font-heading font-bold text-white">Set a new password</h1> <h1 className="text-3xl font-heading font-bold text-[#0F172A]">Set a new password</h1>
</div> </div>
{hasSession === false ? ( {hasSession === false ? (
<div className="bg-[#FFFFFF] border border-[#DCE6F2] rounded-lg p-6 text-center"> <div className="bg-[#FFFFFF] border border-[#DCE6F2] rounded-lg p-6 text-center">
@@ -84,7 +84,7 @@ function ResetInner() {
autoComplete="new-password" autoComplete="new-password"
minLength={8} minLength={8}
required required
className="w-full bg-[#F8FAFC] border border-[#DCE6F2] rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-[#1D4ED8]" className="w-full bg-[#F8FAFC] border border-[#DCE6F2] rounded-lg px-3 py-2 text-[#0F172A] text-sm focus:outline-none focus:border-[#1D4ED8]"
/> />
</div> </div>
<div> <div>
@@ -97,7 +97,7 @@ function ResetInner() {
onChange={(e) => setConfirm(e.target.value)} onChange={(e) => setConfirm(e.target.value)}
autoComplete="new-password" autoComplete="new-password"
required required
className="w-full bg-[#F8FAFC] border border-[#DCE6F2] rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-[#1D4ED8]" className="w-full bg-[#F8FAFC] border border-[#DCE6F2] rounded-lg px-3 py-2 text-[#0F172A] text-sm focus:outline-none focus:border-[#1D4ED8]"
/> />
</div> </div>
<button <button

12
src/components/Header.tsx
View File

@@ -321,7 +321,7 @@ export default function Header() {
key={link?.label} key={link?.label}
href={link?.href} href={link?.href}
ref={(el) => { navLinksRef.current[i] = el; }} ref={(el) => { navLinksRef.current[i] = el; }}
className="px-2 py-2.5 text-sm font-body font-bold uppercase tracking-wide text-white hover:text-white/80 hover:bg-[#1E3A8A] border-b border-[#222] transition-colors focus:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-[#1D4ED8]" className="px-2 py-2.5 text-sm font-body font-bold uppercase tracking-wide text-[#0F172A] hover:text-[#1D4ED8] hover:bg-[#FFFFFF] border-b border-[#DCE6F2] transition-colors focus:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-[#1D4ED8]"
onClick={() => setMobileOpen(false)}> onClick={() => setMobileOpen(false)}>
{link?.label} {link?.label}
</Link> </Link>
@@ -329,7 +329,7 @@ export default function Header() {
{/* Reading List mobile link */} {/* Reading List mobile link */}
<Link <Link
href="/reading-list" href="/reading-list"
className="px-2 py-2.5 text-sm font-body font-bold uppercase tracking-wide text-white hover:text-white/80 hover:bg-[#1E3A8A] border-b border-[#222] transition-colors focus:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-[#1D4ED8] flex items-center gap-2" className="px-2 py-2.5 text-sm font-body font-bold uppercase tracking-wide text-[#0F172A] hover:text-[#1D4ED8] hover:bg-[#FFFFFF] border-b border-[#DCE6F2] transition-colors focus:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-[#1D4ED8] flex items-center gap-2"
onClick={() => setMobileOpen(false)}> onClick={() => setMobileOpen(false)}>
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true"> <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true">
<path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z" /> <path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z" />
@@ -365,7 +365,7 @@ export default function Header() {
{navLinks {navLinks
.filter((n) => n.dropdown && n.dropdown.length > 0) .filter((n) => n.dropdown && n.dropdown.length > 0)
.map((section) => ( .map((section) => (
<div key={section.label} className="border-b border-[#222]"> <div key={section.label} className="border-b border-[#DCE6F2]">
<div className="px-2 py-2 text-[10px] font-body font-bold text-[#1D4ED8] uppercase tracking-widest bg-[#F8FAFC]"> <div className="px-2 py-2 text-[10px] font-body font-bold text-[#1D4ED8] uppercase tracking-widest bg-[#F8FAFC]">
{section.label} {section.label}
</div> </div>
@@ -418,7 +418,11 @@ export default function Header() {
wrapper so it scrolls off, with a hairline separator below to keep wrapper so it scrolls off, with a hairline separator below to keep
it visually distinct from the browse bar. */} it visually distinct from the browse bar. */}
<div className="max-w-container mx-auto px-4"> <div className="max-w-container mx-auto px-4">
<div className="bg-[#FFFFFF] border-b border-[#2a3a50] h-8 flex items-center justify-between px-4"> {/* Secondary nav (social + language + auth + newsletter input) — hidden
on mobile because the row can't shrink to phone width without
spilling off-screen. Mobile users access these affordances via the
hamburger menu, Sign In/Join buttons in the forum, and the footer. */}
<div className="hidden md:flex bg-[#FFFFFF] border-b border-[#2a3a50] h-8 items-center justify-between px-4">
<p className="text-[#999999] text-xs font-body hidden sm:block"> <p className="text-[#999999] text-xs font-body hidden sm:block">
Pro AV, Display and Live Production Tech Pro AV, Display and Live Production Tech
</p> </p>