engineering/tpmjs
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 2.2k

fix(web): make header navigation text visible on dark background

Browse source 
- 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>
This commit is contained in:
Ajax Davis 2025-11-26 03:47:00 +10:00
parent 157cd750e4
commit 8e122aa468
2 changed files with 40 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

36
apps/web/src/app/page.tsx
View file

@ -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">

12
apps/web/src/app/playground/page.tsx
View file

@ -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>