From 37239ee2676abd5b17e179cec88dd3d91543cc94 Mon Sep 17 00:00:00 2001
From: HF <pixelplanetdev@gmail.com>
Date: Wed, 17 Mar 2021 22:40:11 +0100
Subject: [PATCH] change z order of Modal and Alert

---
 src/components/Alert.jsx     |  4 +++-
 src/components/Captcha.jsx   |  2 +-
 src/components/ModalRoot.jsx |  4 +++-
 src/styles/default.css       | 13 ++++++++++---
 4 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/src/components/Alert.jsx b/src/components/Alert.jsx
index b1ded24..00b4efe 100644
--- a/src/components/Alert.jsx
+++ b/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}
diff --git a/src/components/Captcha.jsx b/src/components/Captcha.jsx
index 607f864..3a6a04e 100644
--- a/src/components/Captcha.jsx
+++ b/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>
diff --git a/src/components/ModalRoot.jsx b/src/components/ModalRoot.jsx
index a65c500..40f032a 100644
--- a/src/components/ModalRoot.jsx
+++ b/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}
diff --git a/src/styles/default.css b/src/styles/default.css
index 25b029a..c08b87c 100644
--- a/src/styles/default.css
+++ b/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;
 }