Error handling

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