Style the error boundaries component (#1910)

* style it

* catter for dark design

Co-authored-by: Andrew Snaith <asnaith@users.noreply.github.com>
Co-authored-by: Tanmoy Basak Anjan <tanmoy3399@gmail.com>

packages/files-ui/src/App.tsx

@@ -1,9 +1,9 @@
-import React, { useCallback } from "react"
-import { init as initSentry, ErrorBoundary, showReportDialog } from "@sentry/react"
+import React from "react"
+import { init as initSentry, ErrorBoundary } from "@sentry/react"
 import { Web3Provider } from "@chainsafe/web3-context"
 import { ThemeSwitcher } from "@chainsafe/common-theme"
 import "@chainsafe/common-theme/dist/font-faces.css"
-import { Button, CssBaseline, Modal, Router, ToastProvider, Typography } from "@chainsafe/common-components"
+import { CssBaseline, Router, ToastProvider } from "@chainsafe/common-components"
 import { FilesProvider } from "./Contexts/FilesContext"
 import FilesRoutes from "./Components/FilesRoutes"
 import AppWrapper from "./Components/Layouts/AppWrapper"
@@ -18,6 +18,7 @@ import { BillingProvider } from "./Contexts/BillingContext"
 import { PosthogProvider } from "./Contexts/PosthogContext"
 import { NotificationsProvider } from "./Contexts/NotificationsContext"
 import { StylesProvider, createGenerateClassName } from "@material-ui/styles"
+import ErrorModal from "./Components/Modules/ErrorModal"
 
 // making material and jss use one className generator
 const generateClassName = createGenerateClassName({
@@ -77,37 +78,14 @@ const App = () => {
   // This will default to testnet unless mainnet is specifically set in the ENV
   const directAuthNetwork = (process.env.REACT_APP_DIRECT_AUTH_NETWORK === "mainnet") ? "mainnet" : "testnet"
 
-  const fallBack = useCallback(({ error, componentStack, eventId, resetError }) => (
-    <Modal
-      active
-      closePosition="none"
-      onClose={resetError}
-    >
-      <Typography>
-        An error occurred and has been logged. If you would like to
-        provide additional info to help us debug and resolve the issue,
-        click the `&quot;`Provide Additional Details`&quot;` button
-      </Typography>
-      <Typography>{error?.message.toString()}</Typography>
-      <Typography>{componentStack}</Typography>
-      <Typography>{eventId}</Typography>
-      <Button
-        onClick={() => showReportDialog({ eventId: eventId || "" })}
-      >
-        Provide Additional Details
-      </Button>
-      <Button onClick={resetError}>Reset error</Button>
-    </Modal>
-  ), [])
-
   return (
     <StylesProvider generateClassName={generateClassName}>
       <ThemeSwitcher
         storageKey="csf.themeKey"
         themes={{ light: lightTheme, dark: darkTheme }}
       >
         <ErrorBoundary
-          fallback={fallBack}
+          fallback={ErrorModal}
           onReset={() => window.location.reload()}
         >
           <CssBaseline />

packages/files-ui/src/Components/Modules/ErrorModal.tsx

@@ -0,0 +1,107 @@
+/* eslint-disable max-len */
+import React from "react"
+import { Button, Modal, Typography } from "@chainsafe/common-components"
+import { ROUTE_LINKS } from "../FilesRoutes"
+
+interface Props {
+  error: Error
+  componentStack: string | null
+  eventId: string | null
+  resetError: () => void
+}
+
+const ErrorModal = ({ error, componentStack, resetError }: Props) => {
+
+  const generalStyle = {
+    margin: "1rem",
+    backgrounColor: "var(--gray1)",
+    color: "var(--gray9)"
+  }
+
+  return <Modal
+    active
+    closePosition="none"
+    onClose={resetError}
+  >
+    <Typography
+      variant="h2"
+      style={{
+        marginTop: "3rem",
+        display: "inline-block",
+        ...generalStyle
+      }}
+    >
+        An unexpected error occured
+    </Typography>
+    <Typography
+      component="p"
+      style={{ ...generalStyle }}
+    >
+        If you would like to provide additional info to help us debug and resolve the issue, reach out on <a
+        target="_blank"
+        rel="noopener noreferrer"
+        href={ROUTE_LINKS.DiscordInvite}
+      >
+        Discord
+      </a>
+    </Typography>
+    <br/>
+    <Typography
+      variant="h4"
+      style={{
+        ...generalStyle,
+        display: "inline-block"
+      }}
+    >
+        Error:
+    </Typography>
+    <Typography
+      style={{
+        ...generalStyle,
+        backgroundColor: "ghostwhite",
+        padding: "1rem",
+        marginTop: 0,
+        color: "black"
+      }}
+      component="p"
+    >
+      <pre>{error?.message.toString()}</pre>
+    </Typography>
+    <Typography
+      variant="h4"
+      style={{
+        ...generalStyle,
+        display: "inline-block"
+      }}
+    >
+        Stack:
+    </Typography>
+    <Typography
+      component="p"
+      style={{
+        ...generalStyle,
+        height: "5rem",
+        overflow: "auto",
+        padding: "1rem",
+        border: "2px solid ghostwhite",
+        marginTop: 0
+      }}
+    >
+      {componentStack}
+    </Typography>
+    <div
+      style={{
+        ...generalStyle,
+        display: "flex",
+        justifyContent: "center"
+
+      }}
+    >
+      <Button onClick={resetError}>
+        Close
+      </Button>
+    </div>
+  </Modal>
+}
+
+export default ErrorModal