Refactor of Error Page Layout (#1443)

This pull request introduces a comprehensive refactor of our
application's error page layout. The primary goal of these changes is to
enhance user experience during error states by providing clearer, more
helpful information and improving the overall aesthetics of the error
page.

src/frontend/src/components/CrashErrorComponent/index.tsx

@@ -1,36 +1,63 @@
+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,
   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="z-50 flex h-screen w-screen 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">
+      <div className="flex h-screen w-screen flex-col  bg-background text-start shadow-lg">
-        <h1 className="mb-4 text-3xl text-status-red">
+        <div className="m-auto grid w-1/2 justify-center gap-5 text-center">
-          Oops! An unknown error has occurred.
+          <Card className="p-8">
-        </h1>
+            <CardHeader>
-        <p className="mb-4 text-xl text-foreground">
+              <div className="m-auto">
-          Please click the 'Reset Application' button to restore the
+                <XCircle strokeWidth={1.5} className="h-16 w-16" />
-          application's state. If the error persists, please create an issue on
+              </div>
-          our GitHub page. We apologize for any inconvenience this may have
+              <div>
-          caused.
+                <p className="mb-4 text-xl text-foreground">
-        </p>
+                  Sorry, we found an unexpected error!
-        <div className="flex justify-center">
+                </p>
-          <button
+              </div>
-            onClick={resetErrorBoundary}
+            </CardHeader>
-            className="mr-4 rounded bg-primary px-4 py-2 font-bold text-background hover:bg-ring"
+
-          >
+            <CardContent className="grid">
-            Reset Application
+              <div>
-          </button>
+                <p>
-          <a
+                Please report errors with detailed tracebacks on the{" "}
-            href="https://github.com/logspace-ai/langflow/issues/new"
+                  <a
-            target="_blank"
+                    href="https://github.com/logspace-ai/langflow/issues"
-            rel="noopener noreferrer"
+                    target="_blank"
-            className="rounded bg-status-red px-4 py-2 font-bold text-background hover:bg-error-foreground"
+                    rel="noopener noreferrer"
-          >
+                    className="font-medium  hover:underline "
-            Create Issue
+                  >
-          </a>
+                    GitHub Issues
+                  </a>{" "}
+                  page.
+                  <br></br>
+                   Thank you!
+                </p>
+              </div>
+            </CardContent>
+
+            <CardFooter>
+              <div className="m-auto mt-4 flex justify-center">
+                <Button onClick={resetErrorBoundary}>Restart Langflow</Button>
+
+                <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>