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="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">
+          <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 unexpected error!
+                </p>
+              </div>
+            </CardHeader>
+
+            <CardContent className="grid">
+              <div>
+                <p>
+                Please report errors with detailed tracebacks on the{" "}
+                  <a
+                    href="https://github.com/logspace-ai/langflow/issues"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="font-medium  hover:underline "
+                  >
+                    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>