From 0893c834614562138c681f5fcc97a708454f246e Mon Sep 17 00:00:00 2001
From: swve <bdswve@gmail.com>
Date: Mon, 4 Mar 2024 19:58:49 +0100
Subject: [PATCH] fix: redesign error page and add reload button

---
 .../components/StyledElements/Error/Error.tsx | 36 ++++++++++++-------
 1 file changed, 24 insertions(+), 12 deletions(-)

diff --git a/apps/web/components/StyledElements/Error/Error.tsx b/apps/web/components/StyledElements/Error/Error.tsx
index 1d9bee58..ead83f1f 100644
--- a/apps/web/components/StyledElements/Error/Error.tsx
+++ b/apps/web/components/StyledElements/Error/Error.tsx
@@ -1,18 +1,30 @@
-import { XCircle } from 'lucide-react'
+'use client'
+import { AlertTriangle, RefreshCcw } from 'lucide-react'
+import { useRouter } from 'next/navigation'
 import React from 'react'
+
 function ErrorUI() {
+  const router = useRouter()
+
+  function reloadPage() {
+    router.refresh()
+    window.location.reload()
+  }
+
   return (
-    <div className="flex items-center justify-center h-screen">
-      <div className="mx-auto bg-red-100 w-[800px] p-3 rounded-xl m-5 ">
-        <div className="flex flex-row">
-          <div className="p-3 pr-4 items-center">
-            <XCircle size={40} className="text-red-600" />
-          </div>
-          <div className="p-3 ">
-            <h1 className="text-2xl font-bold text-red-600">Error</h1>
-            <p className="pt-0 text-md text-red-600">Something went wrong</p>
-          </div>
-        </div>
+    <div className="flex flex-col py-10 mx-auto antialiased items-center space-y-6 bg-gradient-to-b from-rose-100 to-rose-100/5 ">
+      <div className="flex flex-row  items-center space-x-5  rounded-xl ">
+        <AlertTriangle className="text-rose-700" size={45} />
+        <p className="text-3xl font-bold text-rose-700">Something went wrong</p>
+      </div>
+      <div>
+        <button
+          onClick={() => reloadPage()}
+          className="flex space-x-2 items-center rounded-full px-4 py-1 text-rose-200 bg-rose-700 hover:bg-rose-800 transition-all ease-linear shadow-lg "
+        >
+          <RefreshCcw className="text-rose-200" size={17} />
+          <span className="text-md font-bold">Retry</span>
+        </button>
       </div>
     </div>
   )