From 6eccf9620470bd645bbb0155cddd8f833f61f8f9 Mon Sep 17 00:00:00 2001
From: Ahmed Al-Taiar <ahmed.altaiar.06@gmail.com>
Date: Sat, 25 Nov 2023 18:39:55 -0500
Subject: [PATCH] Improve 404 page :)

---
 embold.yaml                                   | 19 +++++
 .../pages/FatalErrorPage/FatalErrorPage.tsx   |  9 ---
 web/src/pages/NotFoundPage/NotFoundPage.tsx   | 75 ++++++++-----------
 3 files changed, 52 insertions(+), 51 deletions(-)
 create mode 100644 embold.yaml

diff --git a/embold.yaml b/embold.yaml
new file mode 100644
index 0000000..59cb63c
--- /dev/null
+++ b/embold.yaml
@@ -0,0 +1,19 @@
+version: 1
+sources:
+  exclusions:
+    - 'test'
+    - 'generated'
+    - 'mock'
+    - 'thirdparty'
+    - 'third-party'
+    - '3rd-party'
+    - '3rdparty'
+    - 'external'
+    - 'build'
+    - 'node_modules'
+    - 'assets'
+    - 'gulp'
+    - 'grunt'
+    - 'library'
+    - '.git'
+    - '.yarn'
diff --git a/web/src/pages/FatalErrorPage/FatalErrorPage.tsx b/web/src/pages/FatalErrorPage/FatalErrorPage.tsx
index b2bb436..03aed9a 100644
--- a/web/src/pages/FatalErrorPage/FatalErrorPage.tsx
+++ b/web/src/pages/FatalErrorPage/FatalErrorPage.tsx
@@ -1,12 +1,3 @@
-// This page will be rendered when an error makes it all the way to the top of the
-// application without being handled by a Javascript catch statement or React error
-// boundary.
-//
-// You can modify this page as you wish, but it is important to keep things simple to
-// avoid the possibility that it will cause its own error. If it does, Redwood will
-// still render a generic error page, but your users will prefer something a bit more
-// thoughtful :)
-
 // This import will be automatically removed when building for production
 import { DevFatalErrorPage } from '@redwoodjs/web/dist/components/DevFatalErrorPage'
 
diff --git a/web/src/pages/NotFoundPage/NotFoundPage.tsx b/web/src/pages/NotFoundPage/NotFoundPage.tsx
index 92ef916..c65d652 100644
--- a/web/src/pages/NotFoundPage/NotFoundPage.tsx
+++ b/web/src/pages/NotFoundPage/NotFoundPage.tsx
@@ -1,44 +1,35 @@
+import { Link, routes } from '@redwoodjs/router'
+
 export default () => (
-  <main>
-    <style
-      dangerouslySetInnerHTML={{
-        __html: `
-              html, body {
-                margin: 0;
-              }
-              html * {
-                box-sizing: border-box;
-              }
-              main {
-                display: flex;
-                align-items: center;
-                font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
-                text-align: center;
-                background-color: #E2E8F0;
-                height: 100vh;
-              }
-              section {
-                background-color: white;
-                border-radius: 0.25rem;
-                width: 32rem;
-                padding: 1rem;
-                margin: 0 auto;
-                box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
-              }
-              h1 {
-                font-size: 2rem;
-                margin: 0;
-                font-weight: 500;
-                line-height: 1;
-                color: #2D3748;
-              }
-            `,
-      }}
-    />
-    <section>
-      <h1>
-        <span>404 Page Not Found</span>
-      </h1>
-    </section>
-  </main>
+  <div className="flex min-h-screen min-w-max items-center justify-center p-3">
+    <div className="mockup-phone font-inter">
+      <div className="camera"></div>
+      <div className="display">
+        <div className="artboard phone-1 bg-base-100 p-2">
+          <div className="pt-6">{message1('W-what, where am I?')}</div>
+          {message2('Leave, now.')}
+          {message1('What, why?')}
+          {message2("You're being watched, this is the 404 zone.")}
+          {message1('I better get going then...')}
+          <div className="flex h-56 items-center justify-center">
+            <Link to={routes.home()} className="btn">
+              Back to safety
+            </Link>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+)
+
+const message1 = (message: string) => (
+  <div className="chat chat-end">
+    <div className="chat-bubble chat-bubble-info">{message}</div>
+  </div>
+)
+
+const message2 = (message: string) => (
+  <div className="chat chat-start">
+    <div className="chat-bubble bg-gray-200 text-base-content">{message}</div>
+  </div>
 )