Skip to content

Commit 9d0b7f8

Browse files
authored
bring 404 page closer to the designs (#2197)
## Description Currently the 404 page doesn't respect light mode / dark mode (as it doesn't use next-themes, app layout or nextra). I just wanted to spend 5 minutes to improve it incrementally, and not there yet, but we're closer. To make it match designs, we'll need to add a mask-blurred stripes decoration and render the footer and navbar (not super trivial as the navbar takes props from Nextra.)
1 parent 82ac0f2 commit 9d0b7f8

File tree

1 file changed

+41
-11
lines changed

1 file changed

+41
-11
lines changed

src/app/not-found.tsx

Lines changed: 41 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,14 @@
22

33
import { usePathname } from "next/navigation"
44
import { useMounted } from "nextra/hooks"
5+
// @ts-expect-error
6+
import { ThemeProvider } from "next-themes"
7+
8+
import { NewFontsStyleTag } from "./fonts"
9+
import { Button } from "./conf/_design-system/button"
10+
11+
import "@/globals.css"
12+
import "@/app/colors.css"
513

614
export default function Page() {
715
const pathname = usePathname()
@@ -22,16 +30,38 @@ export default function Page() {
2230
}/issues/new?title=${encodeURIComponent(title)}&labels=${labels}`
2331

2432
return (
25-
<div className="flex h-dvh flex-col items-center justify-center">
26-
<h1 className="text-4xl text-white">404: Page Not Found</h1>
27-
<a
28-
href={url}
29-
target="_blank"
30-
rel="noreferrer"
31-
className="mt-6 text-primary underline decoration-from-font [text-underline-position:from-font]"
32-
>
33-
Submit an issue about broken link →
34-
</a>
35-
</div>
33+
<ThemeProvider attribute="class">
34+
<div className="flex h-dvh flex-col items-center justify-center gap-8 bg-neu-0 font-sans lg:gap-10">
35+
<NewFontsStyleTag />
36+
<FourOhFourIcon className="text-pri-base" />
37+
<h1 className="text-4xl text-neu-900">Page not found</h1>
38+
<div className="flex gap-4">
39+
<Button variant="primary" href={url}>
40+
Submit an issue about broken link
41+
</Button>
42+
<Button variant="secondary" href="/">
43+
Go back home
44+
</Button>
45+
</div>
46+
</div>
47+
</ThemeProvider>
48+
)
49+
}
50+
51+
function FourOhFourIcon({ className }: { className?: string }) {
52+
return (
53+
<svg
54+
xmlns="http://www.w3.org/2000/svg"
55+
width="204"
56+
height="80"
57+
viewBox="0 0 204 80"
58+
fill="currentColor"
59+
className={className}
60+
>
61+
<title>404</title>
62+
<path d="M45.2399 80V57.4806H0V33.8414H11.3411V22.5194H22.5576V11.3219H34.0234V0H57.9519V80H45.2399ZM12.5874 44.9145H45.2399V12.5661H35.2696V23.7636H23.8039V34.9611H12.5874V44.9145Z" />
63+
<path d="M84.3652 80V68.8025H73.0241V11.3219H84.3652V0H119.51V11.3219H130.976V68.8025H119.51V80H84.3652ZM85.6115 67.5583H118.264V12.5661H85.6115V67.5583Z" />
64+
<path d="M191.288 80V57.4806H146.048V33.8414H157.389V22.5194H168.606V11.3219H180.071V0H204V80H191.288ZM158.636 44.9145H191.288V12.5661H181.318V23.7636H169.852V34.9611H158.636V44.9145Z" />
65+
</svg>
3666
)
3767
}

0 commit comments

Comments
 (0)