From 6585e0cbefeaf839e24a829dadff609f7b6e7ded Mon Sep 17 00:00:00 2001
From: Sor4chi <80559385+sor4chi@users.noreply.github.com>
Date: Sun, 27 Oct 2024 23:03:33 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20NotFound=E3=83=9A=E3=83=BC=E3=82=B8?=
 =?UTF-8?q?=E3=81=AE=E3=82=B9=E3=82=BF=E3=82=A4=E3=83=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 webapp/app/root.tsx | 38 ++++++++++++++++++++++++++++++--------
 1 file changed, 30 insertions(+), 8 deletions(-)

diff --git a/webapp/app/root.tsx b/webapp/app/root.tsx
index 9cf95aa..c7aceab 100644
--- a/webapp/app/root.tsx
+++ b/webapp/app/root.tsx
@@ -17,14 +17,36 @@ export function ErrorBoundary() {
   const error = useRouteError()
   if (isRouteErrorResponse(error)) {
     return (
-      <main>
-        <h1>
-          {error.status} - {error.statusText}
-        </h1>
-        <p>{error.data}</p>
-        <p>Are you trying malicious login? 🤔</p>
-        <p>&copy; Maximum - Programming Circle at Saitama University.</p>
-      </main>
+      <div
+        className={css({
+          display: 'grid',
+          placeItems: 'center',
+          height: '100dvh',
+          width: '100vw',
+        })}
+      >
+        <div
+          className={css({
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            gap: 2,
+          })}
+        >
+          <h1
+            className={css({
+              fontSize: '4xl',
+              fontWeight: 'bold',
+              color: 'text',
+            })}
+          >
+            {error.status} - {error.statusText}
+          </h1>
+          <p>{error.data}</p>
+          <p>Are you trying malicious login? 🤔</p>
+          <p>&copy; Maximum - Programming Circle at Saitama University.</p>
+        </div>
+      </div>
     )
   }
 }