Update ErrorPage UI

src/assets/icons/Reload.tsx

@@ -0,0 +1,22 @@
+import { Icon, IconProps } from "@chakra-ui/react";
+
+import colors from "../../style/colors";
+
+export const ReloadIcon: React.FC<IconProps> = props => (
+  <Icon
+    width="24px"
+    height="24px"
+    fill="none"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M16.1791 5.82018C15.5007 5.13713 14.6938 4.59511 13.8049 4.22539C12.916 3.85568 11.9627 3.66556 10.9999 3.66602C6.94828 3.66602 3.67578 6.94768 3.67578 10.9993C3.67578 15.051 6.94828 18.3327 10.9999 18.3327C14.4191 18.3327 17.2699 15.9952 18.0858 12.8327H16.1791C15.8015 13.9047 15.1005 14.8332 14.1728 15.4899C13.2452 16.1467 12.1366 16.4994 10.9999 16.4993C7.96578 16.4993 5.49995 14.0335 5.49995 10.9993C5.49995 7.96518 7.96578 5.49935 10.9999 5.49935C12.5216 5.49935 13.8783 6.13185 14.8683 7.13102L11.9166 10.0827H18.3333V3.66602L16.1791 5.82018Z"
+      fill={colors.blue}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="0.5"
+    />
+  </Icon>
+);

src/assets/icons/index.tsx

@@ -45,6 +45,7 @@ export * from "./OutgoingArrow";
 export * from "./Pen";
 export * from "./Plus";
 export * from "./RefreshClock";
+export * from "./Reload";
 export * from "./Rotate";
 export * from "./Slash";
 export * from "./Sliders";

src/components/ErrorPage.tsx

@@ -1,9 +1,13 @@
-import { Box, Button, Center, Flex, Heading, Link } from "@chakra-ui/react";
+import { Box, Button, Center, Link, VStack } from "@chakra-ui/react";
+
+import { ModalContentWrapper } from "./Onboarding/ModalContentWrapper";
+import { NoticeIcon, ReloadIcon } from "../assets/icons";
+import BackgroundImage from "../assets/onboarding/background_image.png";
+import colors from "../style/colors";
 
 const feedbackEmailBodyTemplate =
   "What is it about? (if a bug report please consider including your account address) %0A PLEASE FILL %0A%0A What is the feedback? %0A PLEASE FILL";
 
-// TODO: prepare for Beta release properly
 export const ErrorPage: React.FC = () => {
   const onRefresh = () => {
     window.location.reload();
@@ -27,33 +31,57 @@ export const ErrorPage: React.FC = () => {
   };
 
   return (
-    <Flex alignItems="stretch">
-      <Center width="100%" marginTop="200px">
-        <Box>
-          <Heading marginBottom={3} textAlign="center">
-            Ooops, something went wrong!
-          </Heading>
-
-          <Button marginRight={2} onClick={onRefresh}>
-            Refresh the page
-          </Button>
-          <Button marginRight={2} onClick={onBackup} variant="secondary">
-            Download Backup
-          </Button>
-          <Button marginRight={2} onClick={onOffboard} variant="warning">
-            Offboard
-          </Button>
-          <Button variant="tertiary">
-            <Link
-              href={`mailto:[email protected]?subject=Umami V2 feedback&body=${feedbackEmailBodyTemplate}`}
-              rel="noopener noreferrer"
-              target="_blank"
+    <Center height="100vh" padding="60px" backgroundImage={BackgroundImage} backgroundSize="cover">
+      <Box
+        width="100%"
+        maxWidth="460px"
+        height="100%"
+        maxHeight="480px"
+        padding="40px"
+        background={colors.gray[900]}
+        border="1px"
+        borderColor={colors.gray[700]}
+        borderRadius="8px"
+        boxShadow="0px 0px 30px rgba(0, 0, 0, 0.30)"
+      >
+        <ModalContentWrapper
+          icon={<NoticeIcon />}
+          subtitle="Please refresh the app or use one of the following options:"
+          title="Oops! Something went wrong!"
+        >
+          <VStack width="100%" spacing="16px">
+            <Button width="100%" onClick={onBackup} size="lg">
+              Save Backup
+            </Button>
+
+            <Button width="100%" onClick={onOffboard} size="lg" variant="warning">
+              Off-board Wallet
+            </Button>
+
+            <Button width="100%" size="lg" variant="tertiary">
+              <Link
+                href={`mailto:[email protected]?subject=Umami V2 feedback&body=${feedbackEmailBodyTemplate}`}
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                Report Error
+              </Link>
+            </Button>
+
+            <Button
+              width="100%"
+              marginTop="8px"
+              color={colors.blue}
+              leftIcon={<ReloadIcon stroke={colors.blue} />}
+              onClick={onRefresh}
+              size="lg"
+              variant="ghost"
             >
-              Report Error
-            </Link>
-          </Button>
-        </Box>
-      </Center>
-    </Flex>
+              Refresh
+            </Button>
+          </VStack>
+        </ModalContentWrapper>
+      </Box>
+    </Center>
   );
 };