From 8e122aa4688e7769fd988fbfa59984686b4ac4cb Mon Sep 17 00:00:00 2001
From: Ajax Davis <thomasalwyndavis@gmail.com>
Date: Wed, 26 Nov 2025 03:47:00 +1000
Subject: [PATCH] fix(web): make header navigation text visible on dark
 background
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add explicit text-foreground color to all ghost button nav items
- Add text color to header title links
- Fixes invisible navigation text on black header background

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 apps/web/src/app/page.tsx            | 36 +++++++++++++++++++++++-----
 apps/web/src/app/playground/page.tsx | 12 ++++++++--
 2 files changed, 40 insertions(+), 8 deletions(-)

diff --git a/apps/web/src/app/page.tsx b/apps/web/src/app/page.tsx
index 3989d45..8e3b25d 100644
--- a/apps/web/src/app/page.tsx
+++ b/apps/web/src/app/page.tsx
@@ -14,26 +14,50 @@ export default function HomePage(): React.ReactElement {
 		<div className="min-h-screen flex flex-col">
 			{/* Header */}
 			<Header
-				title={<Link href="/">TPMJS</Link>}
+				title={
+					<Link href="/" className="text-foreground hover:text-foreground">
+						TPMJS
+					</Link>
+				}
 				size="md"
 				sticky={true}
 				actions={
 					<div className="flex items-center gap-4">
 						<Link href="/playground">
-							<Button variant="ghost" size="sm">
+							<Button
+								variant="ghost"
+								size="sm"
+								className="text-foreground hover:text-foreground"
+							>
 								Playground
 							</Button>
 						</Link>
-						<Button variant="ghost" size="sm">
+						<Button
+							variant="ghost"
+							size="sm"
+							className="text-foreground hover:text-foreground"
+						>
 							Pro
 						</Button>
-						<Button variant="ghost" size="sm">
+						<Button
+							variant="ghost"
+							size="sm"
+							className="text-foreground hover:text-foreground"
+						>
 							Teams
 						</Button>
-						<Button variant="ghost" size="sm">
+						<Button
+							variant="ghost"
+							size="sm"
+							className="text-foreground hover:text-foreground"
+						>
 							Pricing
 						</Button>
-						<Button variant="ghost" size="sm">
+						<Button
+							variant="ghost"
+							size="sm"
+							className="text-foreground hover:text-foreground"
+						>
 							Documentation
 						</Button>
 						<Button variant="secondary" size="sm">
diff --git a/apps/web/src/app/playground/page.tsx b/apps/web/src/app/playground/page.tsx
index 1cd546e..c3f477c 100644
--- a/apps/web/src/app/playground/page.tsx
+++ b/apps/web/src/app/playground/page.tsx
@@ -30,13 +30,21 @@ export default function PlaygroundPage() {
 		<div className="min-h-screen flex flex-col">
 			{/* Header */}
 			<Header
-				title={<Link href="/">TPMJS Playground</Link>}
+				title={
+					<Link href="/" className="text-foreground hover:text-foreground">
+						TPMJS Playground
+					</Link>
+				}
 				size="md"
 				sticky={true}
 				actions={
 					<div className="flex items-center gap-4">
 						<Link href="/">
-							<Button variant="ghost" size="sm">
+							<Button
+								variant="ghost"
+								size="sm"
+								className="text-foreground hover:text-foreground"
+							>
 								Home
 							</Button>
 						</Link>