Improve 404 page :)

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'

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'
 

web/src/pages/NotFoundPage/NotFoundPage.tsx

@@ -1,44 +1,35 @@
+import { Link, routes } from '@redwoodjs/router'
+
 export default () => (
-  <main>
+  <div className="flex min-h-screen min-w-max items-center justify-center p-3">
-    <style
+    <div className="mockup-phone font-inter">
-      dangerouslySetInnerHTML={{
+      <div className="camera"></div>
-        __html: `
+      <div className="display">
-              html, body {
+        <div className="artboard phone-1 bg-base-100 p-2">
-                margin: 0;
+          <div className="pt-6">{message1('W-what, where am I?')}</div>
-              }
+          {message2('Leave, now.')}
-              html * {
+          {message1('What, why?')}
-                box-sizing: border-box;
+          {message2("You're being watched, this is the 404 zone.")}
-              }
+          {message1('I better get going then...')}
-              main {
+          <div className="flex h-56 items-center justify-center">
-                display: flex;
+            <Link to={routes.home()} className="btn">
-                align-items: center;
+              Back to safety
-                font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
+            </Link>
-                text-align: center;
+          </div>
-                background-color: #E2E8F0;
+        </div>
-                height: 100vh;
+      </div>
-              }
+    </div>
-              section {
+  </div>
-                background-color: white;
+)
-                border-radius: 0.25rem;
+
-                width: 32rem;
+const message1 = (message: string) => (
-                padding: 1rem;
+  <div className="chat chat-end">
-                margin: 0 auto;
+    <div className="chat-bubble chat-bubble-info">{message}</div>
-                box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+  </div>
-              }
+)
-              h1 {
+
-                font-size: 2rem;
+const message2 = (message: string) => (
-                margin: 0;
+  <div className="chat chat-start">
-                font-weight: 500;
+    <div className="chat-bubble bg-gray-200 text-base-content">{message}</div>
-                line-height: 1;
+  </div>
-                color: #2D3748;
-              }
-            `,
-      }}
-    />
-    <section>
-      <h1>
-        <span>404 Page Not Found</span>
-      </h1>
-    </section>
-  </main>
 )