From 34d83d82b558cee881c930244ae2c97f831e02c1 Mon Sep 17 00:00:00 2001
From: cristhianzl <cristhian.lousa@gmail.com>
Date: Wed, 28 Feb 2024 16:35:00 -0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20style(CrashErrorComponent/index.?=
 =?UTF-8?q?tsx):=20refactor=20CrashErrorComponent=20to=20use=20UI=20compon?=
 =?UTF-8?q?ents=20for=20improved=20readability=20and=20maintainability=20?=
 =?UTF-8?q?=F0=9F=90=9B=20fix(CrashErrorComponent/index.tsx):=20fix=20typo?=
 =?UTF-8?q?=20in=20error=20message=20for=20better=20user=20understanding?=
 =?UTF-8?q?=20=E2=9C=A8=20feat(CrashErrorComponent/index.tsx):=20add=20res?=
 =?UTF-8?q?tart=20button=20to=20reset=20the=20app=20and=20provide=20a=20li?=
 =?UTF-8?q?nk=20to=20report=20errors=20on=20GitHub=20for=20community=20sup?=
 =?UTF-8?q?port?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/CrashErrorComponent/index.tsx  | 103 ++++++++----------
 1 file changed, 46 insertions(+), 57 deletions(-)

diff --git a/src/frontend/src/components/CrashErrorComponent/index.tsx b/src/frontend/src/components/CrashErrorComponent/index.tsx
index ce6fc027b..818b706cb 100644
--- a/src/frontend/src/components/CrashErrorComponent/index.tsx
+++ b/src/frontend/src/components/CrashErrorComponent/index.tsx
@@ -1,4 +1,7 @@
+import { XCircle } from "lucide-react";
 import { crashComponentPropsType } from "../../types/components";
+import { Button } from "../ui/button";
+import { Card, CardContent, CardFooter, CardHeader } from "../ui/card";
 
 export default function CrashErrorComponent({
   error,
@@ -8,66 +11,52 @@ export default function CrashErrorComponent({
     <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>
+          <Card className="p-8">
+            <CardHeader>
+              <div className="m-auto">
+                <XCircle strokeWidth={1.5} className="h-16 w-16" />
+              </div>
+              <div>
+                <p className="mb-4 text-xl text-foreground">
+                  Sorry, we found an unexpectable error!
+                </p>
+              </div>
+            </CardHeader>
 
-          <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>
+            <CardContent className="grid">
+              <div>
+                <p>
+                  Click <span className="font-bold">'Restart Langflow'</span>{" "}
+                  button to reset the app. Please report errors on our{" "}
+                  <a
+                    href="https://github.com/logspace-ai/langflow/issues/new"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="font-medium  hover:underline "
+                  >
+                    GitHub Issues
+                  </a>{" "}
+                  page to help the community. Thank you!
+                </p>
+              </div>
+            </CardContent>
 
-          <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>
+            <CardFooter>
+              <div className="m-auto mt-4 flex justify-center">
+                <Button onClick={resetErrorBoundary}>Restart Langflow</Button>
 
-          <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>
+                <a
+                  href="https://github.com/logspace-ai/langflow/issues/new"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  <Button className="ml-3" variant={"outline"}>
+                    Report on GitHub
+                  </Button>
+                </a>
+              </div>
+            </CardFooter>
+          </Card>
         </div>
       </div>
     </div>