[WEB-4858] chore: error page ui revamp #7747

apps/web/app/error.tsx

@@ -1,14 +1,17 @@
 "use client";
 
-import Link from "next/link";
+import Image from "next/image";
+import { useTheme } from "next-themes";
 // plane imports
 import { API_BASE_URL } from "@plane/constants";
-import { Button, TOAST_TYPE, getButtonStyling, setToast } from "@plane/ui";
+import { Button, TOAST_TYPE, setToast } from "@plane/ui";
-import { cn } from "@plane/utils";
 // hooks
 import { useAppRouter } from "@/hooks/use-app-router";
 // layouts
 import DefaultLayout from "@/layouts/default-layout";
+// images
+import maintenanceModeDarkModeImage from "@/public/instance/maintenance-mode-dark.svg";
+import maintenanceModeLightModeImage from "@/public/instance/maintenance-mode-light.svg";
 // services
 import { AuthService } from "@/services/auth.service";
 
@@ -16,7 +19,10 @@ import { AuthService } from "@/services/auth.service";
 const authService = new AuthService();
 
 export default function CustomErrorComponent() {
+  // routers
   const router = useAppRouter();
+  // hooks
+  const { resolvedTheme } = useTheme();
 
   const handleSignOut = async () => {
     await authService
@@ -31,14 +37,27 @@ export default function CustomErrorComponent() {
       .finally(() => router.push("/"));
   };
 
+  // derived values
+  const maintenanceModeImage = resolvedTheme === "dark" ? maintenanceModeDarkModeImage : maintenanceModeLightModeImage;
+
   return (
     <DefaultLayout>
-      <div className={`h-screen w-full overflow-hidden bg-custom-background-100`}>
+      <div className="relative container mx-auto h-full w-full max-w-xl flex flex-col gap-2 items-center justify-center gap-y-6 bg-custom-background-100 text-center px-6">
-        <div className="grid h-full place-items-center p-4">
+        <div className="relative w-full">
-          <div className="space-y-8 text-center">
+          <Image
-            <div className="space-y-2 relative flex flex-col justify-center items-center">
+            src={maintenanceModeImage}
-              <h3 className="text-lg font-semibold">Yikes! That doesn{"'"}t look good.</h3>
+            height="176"
-              <p className="mx-auto md:w-1/2 text-sm text-custom-text-200">
+            width="288"
+            alt="ProjectSettingImg"
+            className="w-full h-full object-fill object-center"
+          />
+        </div>
+        <div className="w-full relative flex flex-col gap-4 mt-4">
+          <div className="flex flex-col gap-2.5">
+            <h1 className="text-xl font-semibold text-custom-text-100 text-left">
+              &#x1F6A7; Yikes! That doesn&apos;t look good.
+            </h1>
+            <span className="text-base font-medium text-custom-text-200 text-left">
               That crashed Plane, pun intended. No worries, though. Our engineers have been notified. If you have more
               details, please write to{" "}
               <a href="mailto:support@plane.so" className="text-custom-primary">
@@ -54,19 +73,19 @@ export default function CustomErrorComponent() {
                 Discord
               </a>
               .
-              </p>
+            </span>
           </div>
-            <div className="flex items-center justify-center gap-2">
+
-              <Link href="/" className={cn(getButtonStyling("primary", "md"))}>
+          <div className="flex items-center justify-start gap-2">
+            <Button variant="primary" size="md" onClick={() => router.push("/")}>
               Go to home
-              </Link>
+            </Button>
             <Button variant="neutral-primary" size="md" onClick={handleSignOut}>
               Sign out
             </Button>
           </div>
         </div>
       </div>
-      </div>
     </DefaultLayout>
   );
 }