From e922d5a0bdfa90e8e13e789755db8def8fafa869 Mon Sep 17 00:00:00 2001
From: cristhianzl <cristhian.lousa@gmail.com>
Date: Mon, 19 Feb 2024 10:59:50 -0300
Subject: [PATCH] add new error page

---
 .../components/CrashErrorComponent/index.tsx  | 89 +++++++++++++------
 1 file changed, 63 insertions(+), 26 deletions(-)

diff --git a/src/frontend/src/components/CrashErrorComponent/index.tsx b/src/frontend/src/components/CrashErrorComponent/index.tsx
index f5018f885..ce6fc027b 100644
--- a/src/frontend/src/components/CrashErrorComponent/index.tsx
+++ b/src/frontend/src/components/CrashErrorComponent/index.tsx
@@ -5,32 +5,69 @@ export default function CrashErrorComponent({
   resetErrorBoundary,
 }: crashComponentPropsType): JSX.Element {
   return (
-    <div className="fixed left-0 top-0 z-50 flex h-full w-full items-center justify-center bg-foreground bg-opacity-50">
-      <div className="flex h-1/3 min-h-fit max-w-4xl flex-col justify-evenly rounded-lg bg-background p-8 text-start shadow-lg">
-        <h1 className="mb-4 text-3xl text-status-red">
-          Oops! An unknown error has occurred.
-        </h1>
-        <p className="mb-4 text-xl text-foreground">
-          Please click the 'Reset Application' button to restore the
-          application's state. If the error persists, please create an issue on
-          our GitHub page. We apologize for any inconvenience this may have
-          caused.
-        </p>
-        <div className="flex justify-center">
-          <button
-            onClick={resetErrorBoundary}
-            className="mr-4 rounded bg-primary px-4 py-2 font-bold text-background hover:bg-ring"
-          >
-            Reset Application
-          </button>
-          <a
-            href="https://github.com/logspace-ai/langflow/issues/new"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="rounded bg-status-red px-4 py-2 font-bold text-background hover:bg-error-foreground"
-          >
-            Create Issue
-          </a>
+    <div className="z-50 flex h-screen w-screen items-center justify-center bg-foreground bg-opacity-50">
+      <div className="flex h-screen w-screen flex-col  bg-background text-start shadow-lg">
+        <div className="m-auto grid w-1/2 justify-center gap-5 text-center">
+          <div>
+            <h1 className="text-3xl text-status-red">
+              🚀 Whoops! We've Hit a Snag.
+            </h1>
+            <small>
+              Hey there, it looks like we've encountered a bit of a hiccup.
+            </small>
+          </div>
+          <div>
+            <p className="mb-4 text-xl text-foreground">
+              But don't worry, it happens to the best of us! We're all about
+              making things better together.
+            </p>
+          </div>
+
+          <div>
+            <p>
+              🔧 Quick Fix: Try hitting the{" "}
+              <span className="font-bold">'Restart the Adventure'</span> button
+              to get things moving again. It's like a magic wand for minor
+              glitches!
+            </p>
+          </div>
+
+          <div>
+            <p>
+              📝 Still Stuck? Let's Solve It Together: If our magic wand didn't
+              do the trick, we'd love your help to dig a bit deeper. By
+              reporting this hiccup on our{" "}
+              <a
+                href="https://github.com/logspace-ai/langflow/issues/new"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="font-medium text-blue-600 hover:underline dark:text-blue-500"
+              >
+                GitHub
+              </a>{" "}
+              page, you're not just fixing your own experience but also helping
+              the whole community.
+            </p>
+          </div>
+
+          <div className="mt-4 flex justify-center">
+            <button
+              onClick={resetErrorBoundary}
+              className="cursor-pointer rounded-lg border-2 border-blue-600 px-3 py-2 font-bold text-blue-600 hover:bg-blue-600 hover:text-blue-100"
+            >
+              Restart the Adventure
+            </button>
+
+            <a
+              href="https://github.com/logspace-ai/langflow/issues/new"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <button className="ml-3 cursor-pointer rounded-lg border-2 border-gray-600 px-3 py-2 font-bold text-gray-600 hover:bg-gray-600 hover:text-gray-100">
+                Report on GitHub
+              </button>
+            </a>
+          </div>
         </div>
       </div>
     </div>