Rework error page (#1670)

* Remake error page

* Fix types

* Update error id styles

src/components/AppLayout/AppLayout.tsx

@@ -223,6 +223,7 @@ const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
                     <ErrorPage
                       id={appState.error.id}
                       onBack={handleErrorBack}
+                      onRefresh={() => window.location.reload()}
                     />
                   )
                 : children}

src/components/ErrorPage/ErrorPage.tsx

@@ -1,109 +1,59 @@
 import notFoundImage from "@assets/images/what.svg";
 import { Typography } from "@material-ui/core";
-import { Button, makeStyles } from "@saleor/macaw-ui";
+import { Button } from "@saleor/macaw-ui";
 import React from "react";
 import SVG from "react-inlinesvg";
 import { FormattedMessage } from "react-intl";
 
+import messages from "./messages";
+import useStyles from "./styles";
+
 export interface ErrorPageProps {
   id?: string | null;
   onBack: () => void;
+  onRefresh: () => void;
 }
 
-const useStyles = makeStyles(
-  theme => ({
-    bottomHeader: {
-      fontWeight: 600 as 600,
-      textTransform: "uppercase"
-    },
-    button: {
-      marginTop: theme.spacing(2),
-      padding: 20
-    },
-    container: {
-      [theme.breakpoints.down("sm")]: {
-        gridTemplateColumns: "1fr",
-        padding: theme.spacing(3),
-        width: "100%"
-      },
-      display: "grid",
-      gridTemplateColumns: "1fr 487px",
-      margin: "0 auto",
-      width: 830
-    },
-    errorId: {
-      marginTop: theme.spacing(3)
-    },
-    innerContainer: {
-      [theme.breakpoints.down("sm")]: {
-        order: 1,
-        textAlign: "center"
-      },
-      display: "flex",
-      flexDirection: "column",
-      justifyContent: "center"
-    },
-    notFoundImage: {
-      "& svg": {
-        width: "100%"
-      }
-    },
-    root: {
-      alignItems: "center",
-      display: "flex",
-      height: "calc(100vh - 180px)"
-    },
-    upperHeader: {
-      fontWeight: 600 as 600
-    }
-  }),
-  { name: "ErrorPage" }
-);
-
-const ErrorPage: React.FC<ErrorPageProps> = props => {
-  const { onBack, id } = props;
-
-  const classes = useStyles(props);
+const ErrorPage: React.FC<ErrorPageProps> = ({ onBack, onRefresh, id }) => {
+  const classes = useStyles();
 
   return (
     <div className={classes.root}>
       <div className={classes.container}>
+        <SVG className={classes.notFoundImage} src={notFoundImage} />
         <div className={classes.innerContainer}>
           <div>
-            <Typography className={classes.upperHeader} variant="h4">
-              <FormattedMessage defaultMessage="Ooops!..." />
-            </Typography>
-            <Typography className={classes.bottomHeader} variant="h3">
-              <FormattedMessage defaultMessage="Error" />
+            <Typography className={classes.header} variant="h1">
+              <FormattedMessage {...messages.header} />
             </Typography>
             <Typography>
-              <FormattedMessage defaultMessage="We've encountered a problem..." />
-            </Typography>
-            <Typography>
-              <FormattedMessage defaultMessage="Don't worry, everything is gonna be fine" />
+              <FormattedMessage {...messages.content} />
             </Typography>
             {!!id && (
-              <Typography variant="subtitle2" className={classes.errorId}>
-                Error ID: {id}
-              </Typography>
+              <div>
+                <Typography
+                  variant="caption"
+                  color="textSecondary"
+                  className={classes.errorId}
+                >
+                  Error ID
+                </Typography>
+                <Typography variant="body1">{id}</Typography>
+              </div>
             )}
           </div>
-          <div>
-            <Button
-              className={classes.button}
-              variant="primary"
-              onClick={onBack}
-            >
-              <FormattedMessage
-                defaultMessage="Back to home"
-                description="button"
-              />
+          <div className={classes.buttonContainer}>
+            <Button variant="primary" onClick={onBack}>
+              <FormattedMessage {...messages.btnDashboard} />
+            </Button>
+            <div className={classes.conjunction}>
+              <FormattedMessage {...messages.or} />
+            </div>
+            <Button variant="secondary" onClick={onRefresh}>
+              <FormattedMessage {...messages.btnRefresh} />
             </Button>
           </div>
         </div>
-        <div>
-          <SVG className={classes.notFoundImage} src={notFoundImage} />
-        </div>
       </div>
     </div>
   );

src/components/ErrorPage/messages.ts

@@ -0,0 +1,26 @@
+import { defineMessages } from "react-intl";
+
+const messages = defineMessages({
+  header: {
+    defaultMessage: "We’ve encountered an unexpected error"
+  },
+  content: {
+    defaultMessage:
+      "Don’t worry we will fix it soon. Try to refresh the page or go back to dashboard."
+  },
+  btnDashboard: {
+    defaultMessage: "Dashboard",
+    description: "button linking to dashboard"
+  },
+  btnRefresh: {
+    defaultMessage: "Refresh page",
+    description: "button refreshing page"
+  },
+  or: {
+    defaultMessage: "or",
+    description:
+      "conjunction, choice between going to dashboard or refreshing page"
+  }
+});
+
+export default messages;

src/components/ErrorPage/styles.ts

@@ -0,0 +1,54 @@
+import { makeStyles } from "@saleor/macaw-ui";
+
+const useStyles = makeStyles(
+  theme => ({
+    buttonContainer: {
+      marginTop: theme.spacing(2)
+    },
+    container: {
+      [theme.breakpoints.down("sm")]: {
+        gridTemplateColumns: "1fr",
+        padding: theme.spacing(3),
+        width: "100%"
+      },
+      display: "grid",
+      gridTemplateColumns: "1fr 487px",
+      margin: "0 auto",
+      gap: theme.spacing(5),
+      width: `calc(480px * 2 + ${theme.spacing(5)})`
+    },
+    conjunction: {
+      display: "inline-block",
+      margin: theme.spacing(0, 1)
+    },
+    errorId: {
+      marginTop: theme.spacing(3),
+      letterSpacing: "0.1rem",
+      textTransform: "uppercase",
+      fontWeight: 500
+    },
+    innerContainer: {
+      [theme.breakpoints.down("sm")]: {
+        order: 1,
+        textAlign: "center"
+      },
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "center"
+    },
+    notFoundImage: {
+      width: "100%"
+    },
+    root: {
+      alignItems: "center",
+      display: "flex",
+      height: "calc(100vh - 180px)"
+    },
+    header: {
+      marginBottom: theme.spacing(2)
+    }
+  }),
+  { name: "ErrorPage" }
+);
+
+export default useStyles;

src/storybook/stories/components/ErrorPage.tsx

@@ -5,9 +5,13 @@ import React from "react";
 import Decorator from "../../Decorator";
 
 const props: Omit<ErrorPageProps, "classes"> = {
-  onBack: () => undefined
+  onBack: () => undefined,
+  onRefresh: () => undefined
 };
 
 storiesOf("Views / Error page", module)
   .addDecorator(Decorator)
-  .add("default", () => <ErrorPage {...props} />);
+  .add("default", () => <ErrorPage {...props} />)
+  .add("with error id", () => (
+    <ErrorPage {...props} id="LS5E4RahA4Dc+mNICEUKXPaVkOR1ChT=" />
+  ));