From 4876decb26a354a483d2ee1270763db249302508 Mon Sep 17 00:00:00 2001
From: Paul Pan <i@0x7f.app>
Date: Wed, 21 Feb 2024 22:47:04 +0800
Subject: [PATCH] feat: refined ErrorPage

---
 src/pages/ErrorPage.tsx | 41 ++++++++++++++++++++++++-----------------
 1 file changed, 24 insertions(+), 17 deletions(-)

diff --git a/src/pages/ErrorPage.tsx b/src/pages/ErrorPage.tsx
index 5d1e3f1..7be7099 100644
--- a/src/pages/ErrorPage.tsx
+++ b/src/pages/ErrorPage.tsx
@@ -1,5 +1,6 @@
 import { isRouteErrorResponse, useNavigate, useRouteError } from "react-router-dom";
-import { Alert, AlertDescription, AlertIcon, AlertTitle, Button, ButtonGroup } from "@chakra-ui/react";
+import { Box, Button, ButtonGroup, Flex, Heading, Text } from "@chakra-ui/react";
+import { CloseIcon } from "@chakra-ui/icons";
 
 export const ErrorPage = () => {
     const navigate = useNavigate();
@@ -19,21 +20,27 @@ export const ErrorPage = () => {
     };
 
     return (
-        <Alert
-            status="error"
-            variant="subtle"
-            flexDirection="column"
-            alignItems="center"
-            justifyContent="center"
-            textAlign="center"
-            height="200px"
-        >
-            <AlertIcon boxSize="40px" mr={0} />
-            <AlertTitle mt={4} mb={1} fontSize="lg">
-                {" "}
-                Sorry, an unexpected error has occurred.{" "}
-            </AlertTitle>
-            <AlertDescription maxWidth="sm">{convertError(error)}</AlertDescription>
+        <Box textAlign="center" py={10} px={6}>
+            <Box display="inline-block">
+                <Flex
+                    flexDirection="column"
+                    justifyContent="center"
+                    alignItems="center"
+                    bg={"red.500"}
+                    rounded={"50px"}
+                    w={"55px"}
+                    h={"55px"}
+                    textAlign="center"
+                >
+                    <CloseIcon boxSize={"20px"} color={"white"} />
+                </Flex>
+            </Box>
+            <Heading as="h2" size="lg" mt={6} mb={2}>
+                Sorry, an unexpected error has occurred.
+            </Heading>
+            <Text color={"gray.500"} mb={3}>
+                {convertError(error)}
+            </Text>
             <ButtonGroup>
                 <Button variant="solid" colorScheme="orange" onClick={() => navigate(-1)}>
                     Previous Page
@@ -42,6 +49,6 @@ export const ErrorPage = () => {
                     Home
                 </Button>
             </ButtonGroup>
-        </Alert>
+        </Box>
     );
 };