Error handling

src/components/ErrorDetails/ErrorDetails.css

@@ -0,0 +1,11 @@
+.Heading {
+  color: var(--text_color_error);
+  text-align: center;
+  margin-bottom: 4px;
+}
+
+.Content {
+  max-height: 60vh;
+  overflow-y: auto;
+  margin-bottom: 8px;
+}

src/components/ErrorDetails/ErrorDetails.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import Box from '../UI/Box/Box';
+import Button from '../UI/Button/Button';
+import CSSModules from 'react-css-modules';
+import styles from './ErrorDetails.css';
+
+export default CSSModules((props) => {
+  return (
+    <Box dxStyle={{padding: '8px'}}>
+      <h1 styleName='Heading'>Application Error</h1>
+      <div styleName='Content'>
+        <p>{props.error.toString()}</p>
+      </div>
+      <Button clicked={props.closed}>Dismiss</Button>
+    </Box>
+  );
+
+}, styles, {allowMultiple: true});