initial commit

interface/src/components/ApplicationError.tsx

@@ -0,0 +1,59 @@
+import React, { FC } from 'react';
+import { makeStyles } from '@material-ui/styles';
+import { Paper, Typography, Box, CssBaseline } from "@material-ui/core";
+import WarningIcon from "@material-ui/icons/Warning"
+
+const styles = makeStyles(
+  {
+    siteErrorPage: {
+      display: "flex",
+      height: "100vh",
+      justifyContent: "center",
+      flexDirection: "column"
+    },
+    siteErrorPagePanel: {
+      textAlign: "center",
+      padding: "280px 0 40px 0",
+      backgroundImage: 'url("/app/icon.png")',
+      backgroundRepeat: "no-repeat",
+      backgroundPosition: "50% 40px",
+      backgroundSize: "200px auto",
+      width: "100%",
+    }
+  }
+);
+
+interface ApplicationErrorProps {
+  error?: string;
+}
+
+const ApplicationError: FC<ApplicationErrorProps> = ({ error }) => {
+  const classes = styles();
+  return (
+    <div className={classes.siteErrorPage}>
+      <CssBaseline />
+      <Paper className={classes.siteErrorPagePanel} elevation={10}>
+        <Box display="flex" flexDirection="row" justifyContent="center" alignItems="center" mb={2}>
+          <WarningIcon fontSize="large" color="error" />
+          <Box ml={2}>
+            <Typography variant="h4">
+              Application error
+            </Typography>
+          </Box>
+        </Box>
+        <Typography variant="subtitle1" gutterBottom>
+          Failed to configure the application, please refresh to try again.
+        </Typography>
+        {error &&
+          (
+            <Typography variant="subtitle2" gutterBottom>
+              Error: {error}
+            </Typography>
+          )
+        }
+      </Paper>
+    </div>
+  );
+}
+
+export default ApplicationError;