From 9298e7e073970011f7711cf37ffce5c5defe1a8d Mon Sep 17 00:00:00 2001
From: Jake Howell <jake@hwll.me>
Date: Fri, 31 Oct 2025 14:55:14 +1100
Subject: [PATCH] chore: remove `@emotion/react` from `<404Page />` (#20530)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This PR removes the dependency on `@emotion/react` from the 404 page as
part of our ongoing effort to eliminate `@mui/` dependencies across the
codebase.

I’m slightly concerned that these Tailwind classes might not apply
correctly if Tailwind fails to load. If thats an issue, it might be
worth converting this page to raw CSS.
---
 site/src/pages/404Page/404Page.tsx | 25 +++++--------------------
 1 file changed, 5 insertions(+), 20 deletions(-)

diff --git a/site/src/pages/404Page/404Page.tsx b/site/src/pages/404Page/404Page.tsx
index b3be31f270..a04b1d95a5 100644
--- a/site/src/pages/404Page/404Page.tsx
+++ b/site/src/pages/404Page/404Page.tsx
@@ -2,26 +2,11 @@ import type { FC } from "react";
 
 const NotFoundPage: FC = () => {
 	return (
-		<div
-			css={{
-				width: "100%",
-				height: "100%",
-				display: "flex",
-				flexDirection: "row",
-				justifyContent: "center",
-				alignItems: "center",
-			}}
-		>
-			<div
-				css={(theme) => ({
-					margin: 8,
-					padding: 8,
-					borderRight: theme.palette.divider,
-				})}
-			>
-				<h4>404</h4>
-			</div>
-			<p>This page could not be found.</p>
+		<div className="w-full h-full flex flex-row justify-center items-center">
+			<p className="flex gap-4">
+				<span className="font-bold">404</span>
+				This page could not be found.
+			</p>
 		</div>
 	);
 };