feat: refined ErrorPage

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
+        <Box textAlign="center" py={10} px={6}>
-            status="error"
+            <Box display="inline-block">
-            variant="subtle"
+                <Flex
-            flexDirection="column"
+                    flexDirection="column"
-            alignItems="center"
+                    justifyContent="center"
-            justifyContent="center"
+                    alignItems="center"
-            textAlign="center"
+                    bg={"red.500"}
-            height="200px"
+                    rounded={"50px"}
-        >
+                    w={"55px"}
-            <AlertIcon boxSize="40px" mr={0} />
+                    h={"55px"}
-            <AlertTitle mt={4} mb={1} fontSize="lg">
+                    textAlign="center"
-                {" "}
+                >
-                Sorry, an unexpected error has occurred.{" "}
+                    <CloseIcon boxSize={"20px"} color={"white"} />
-            </AlertTitle>
+                </Flex>
-            <AlertDescription maxWidth="sm">{convertError(error)}</AlertDescription>
+            </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>
     );
 };