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});

src/components/UI/Modal/Modal.css

@@ -17,3 +17,11 @@
   transform: translate(-50%, -50%);
   z-index: 2001;
 }
+
+.Modal.Critical {
+  z-index: 2100;
+}
+
+.Content.Critical {
+  z-index: 2101;
+}

src/components/UI/Modal/Modal.js

@@ -3,11 +3,20 @@ import CSSModules from 'react-css-modules';
 import styles from './Modal.css'
 
 export default CSSModules((props) => {
+  let modalStyles = [];
+  let contentStyles = [];
+  modalStyles.push('Modal');
+  contentStyles.push('Content');
+  if (props.critical) {
+    modalStyles.push('Critical');
+    contentStyles.push('Critical');
+  }
+
   return (
     <div
-      styleName='Modal'
+      styleName={modalStyles.join(' ')}
       onClick={props.clicked}>
-      <div styleName='Content'>
+      <div styleName={contentStyles.join(' ')}>
         {props.children}
       </div>
     </div>);