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,37 +1,64 @@
+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>
+              <div className="m-auto">
+                <XCircle strokeWidth={1.5} className="h-16 w-16" />
+              </div>
+              <div>
                 <p className="mb-4 text-xl text-foreground">
-          Please click the 'Reset Application' button to restore the
+                  Sorry, we found an unexpected error!
-          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">
+              </div>
-          <button
+            </CardHeader>
-            onClick={resetErrorBoundary}
+
-            className="mr-4 rounded bg-primary px-4 py-2 font-bold text-background hover:bg-ring"
+            <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 "
                   >
-            Reset Application
+                    GitHub Issues
-          </button>
+                  </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"
-            className="rounded bg-status-red px-4 py-2 font-bold text-background hover:bg-error-foreground"
                 >
-            Create Issue
+                  <Button className="ml-3" variant={"outline"}>
+                    Report on GitHub
+                  </Button>
                 </a>
               </div>
+            </CardFooter>
+          </Card>
+        </div>
       </div>
     </div>
   );