feat: add chirpy to error page

Author: danditomaso

public/images/chirpy.svg

@@ -38,7 +38,7 @@ export const App = (): JSX.Element => {
             <DeviceSelector />
             <div className="flex grow flex-col">
               {device ? (
-                <div className="flex h-screen">
+                <div className="flex h-screen w-full">
                   <DialogManager />
                   <KeyBackupReminder />
                   <CommandPalette />

src/App.tsx

@@ -10,44 +10,50 @@ export function ErrorPage({ error }: { error: Error }) {
   }
 
   return (
-    <article>
+    <article className="w-full">
       <section className="prose mx-auto mb-20 mt-28 max-w-prose px-8 text-2xl transition-all duration-150 ease-linear space-y-2">
-        <Heading as="h2" className="text-text-primary">
-          This is a little embarrassing...
-        </Heading>
-        <P>
-          We are really sorry but an error occured in the web client that caused
-          it to crash. This is not supposed to happen and we are working hard to
-          fix it.
-        </P>
-        <P>
-          The best way to prevent this from happening again to you or anyone
-          else is to report the issue to us.
-        </P>
-        <P>Please include the following information in your report:</P>
-        <ul className="list-disc list-inside text-sm">
-          <li>What you were doing when the error occured</li>
-          <li>What you expected to happen</li>
-          <li>What actually happened</li>
-          <li>Any other information you think might be relevant</li>
-        </ul>
-        <P>
-          You can report the issue to our{" "}
-          <Link
-            href={newGithubIssueUrl({
-              repoUrl: "https://github.com/meshtastic/web",
-              template: "bug.yml",
-              title: "[Bug]: An unhandled error occurred. <Add details here>",
-              logs: error?.stack,
-            })}
-          >
-            Github
-          </Link>
-          <ExternalLink size={24} className="inline-block ml-2" />
-        </P>
-        <P>
-          Return to the <Link href="/">dashboard</Link>
-        </P>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-1 place-items-center">
+          <div className="w-/12">
+            <Heading as="h2" className="text-text-primary">
+              This is a little embarrassing...
+            </Heading>
+            <P>
+              We are really sorry but an error occured in the web client that
+              caused it to crash. This is not supposed to happen and we are
+              working hard to fix it.
+            </P>
+            <P>
+              The best way to prevent this from happening again to you or anyone
+              else is to report the issue to us.
+            </P>
+            <P>Please include the following information in your report:</P>
+            <ul className="list-disc list-inside text-sm">
+              <li>What you were doing when the error occured</li>
+              <li>What you expected to happen</li>
+              <li>What actually happened</li>
+              <li>Any other information you think might be relevant</li>
+            </ul>
+            <P>
+              You can report the issue to our{" "}
+              <Link
+                href={newGithubIssueUrl({
+                  repoUrl: "https://github.com/meshtastic/web",
+                  template: "bug.yml",
+                  title:
+                    "[Bug]: An unhandled error occurred. <Add details here>",
+                  logs: error?.stack,
+                })}
+              >
+                Github
+              </Link>
+              <ExternalLink size={24} className="inline-block ml-2" />
+            </P>
+            <P>
+              Return to the <Link href="/">dashboard</Link>
+            </P>
+          </div>
+          <img src="/images/chirpy.svg" alt="Error" className="w-1/2" />
+        </div>
 
         <details className="mt-6 text-md">
           <summary className="cursor-pointer">Error Details</summary>

src/components/UI/ErrorPage.tsx

@@ -1,7 +1,10 @@
+import { cn } from "@app/core/utils/cn";
+
 export interface PProps {
   children: React.ReactNode;
+  className?: string;
 }
 
-export const P = ({ children }: PProps) => (
-  <p className="leading-7 not-first:mt-6">{children}</p>
+export const P = ({ children, className }: PProps) => (
+  <p className={cn("leading-7 not-first:mt-6", className)}>{children}</p>
 );