change z order of Modal and Alert

src/components/Alert.jsx

@@ -39,7 +39,9 @@ const Alert = () => {
     (render || alertOpen) && (
       <div>
         <div
-          className={(alertOpen && render) ? 'Overlay show' : 'Overlay'}
+          className={(alertOpen && render)
+            ? 'OverlayAlert show'
+            : 'OverlayAlert'}
           onTransitionEnd={onTransitionEnd}
           tabIndex={-1}
           onClick={close}

src/components/Captcha.jsx

@@ -54,7 +54,7 @@ const Captcha = ({ callback, close }) => {
           }}
           src={captchaUrl}
           alt="CAPTCHA"
-          onLoad={() => {setImgLoaded(true)}}
+          onLoad={() => { setImgLoaded(true); }}
           onError={() => setErrors([t`Could not load captcha`])}
         />
       </div>

src/components/ModalRoot.jsx

@@ -69,7 +69,9 @@ const ModalRoot = () => {
     (render || modalOpen) && (
       <div>
         <div
-          className={(modalOpen && render) ? 'Overlay show' : 'Overlay'}
+          className={(modalOpen && render)
+            ? 'OverlayModal show'
+            : 'OverlayModal'}
           onTransitionEnd={onTransitionEnd}
           tabIndex={-1}
           onClick={close}

src/styles/default.css

@@ -351,7 +351,7 @@ tr:nth-child(even) {
   max-height: 100%;
   padding: 15px;
   text-align: center;
-  z-index: 6;
+  z-index: 7;
 }
 
 .modaltext, .modalcotext {
@@ -461,18 +461,25 @@ tr:nth-child(even) {
   }
 }
 
-.Overlay {
+.OverlayModal, .OverlayAlert {
   position: fixed;
   top: 0px;
   left: 0px;
   right: 0px;
   bottom: 0px;
   background-color: rgba(255, 255, 255, 0.75);
-  z-index: 4;
   opacity: 0;
   transition: opacity 200ms ease-in-out;
 }
 
+.OverlayModal {
+  z-index: 4;
+}
+
+.OverlayAlert {
+  z-index: 6;
+}
+
 .chatbox div .chatarea  {
   height: 174px;
 }