From 46228ffa5d800aecc1821a8c6967212f0dc3f61e Mon Sep 17 00:00:00 2001
From: Tom <mottoes_recap0u@icloud.com>
Date: Thu, 11 May 2023 15:24:46 +0200
Subject: [PATCH] enable overlay for ReplyModal mobile

---
 src/components/CaptchaModal.jsx             | 2 +-
 src/components/ReplyModal.jsx               | 4 ++--
 src/components/styled/ReplyModal.styled.jsx | 4 ----
 3 files changed, 3 insertions(+), 7 deletions(-)

diff --git a/src/components/CaptchaModal.jsx b/src/components/CaptchaModal.jsx
index 47395c75..bfe43563 100644
--- a/src/components/CaptchaModal.jsx
+++ b/src/components/CaptchaModal.jsx
@@ -18,7 +18,7 @@ const CaptchaModal = () => {
   const [imageSources, setImageSources] = useState([]);
   const [currentChallengeIndex, setCurrentChallengeIndex] = useState(0);
   const [totalChallenges, setTotalChallenges] = useState(0);
-    const [isMobile, setIsMobile] = useState(window.innerWidth <= 480);
+  const [isMobile, setIsMobile] = useState(window.innerWidth <= 480);
   const responseRef = useRef();
   const nodeRef = useRef(null);
 
diff --git a/src/components/ReplyModal.jsx b/src/components/ReplyModal.jsx
index 434a5087..6fd761a1 100644
--- a/src/components/ReplyModal.jsx
+++ b/src/components/ReplyModal.jsx
@@ -205,9 +205,9 @@ const ReplyModal = ({ isOpen, closeModal }) => {
     onRequestClose={closeModal}
     contentLabel="Reply Modal"
     shouldCloseOnEsc={false}
-    shouldCloseOnOverlayClick={false}
+    shouldCloseOnOverlayClick={isMobile}
     selectedStyle={selectedStyle}
-    overlayClassName="hide-modal-overlay">
+    style={isMobile ? ({ overlay: { backgroundColor: "rgba(0,0,0,.25)" }}) : ({ overlay: { backgroundColor: "rgba(0,0,0,0)" }})}>
       <Draggable handle=".modal-header" nodeRef={nodeRef} disabled={isMobile}>
         <div className="modal-content" ref={nodeRef}>
           <div className="modal-header">
diff --git a/src/components/styled/ReplyModal.styled.jsx b/src/components/styled/ReplyModal.styled.jsx
index 6f5a003f..ae46d0c0 100644
--- a/src/components/styled/ReplyModal.styled.jsx
+++ b/src/components/styled/ReplyModal.styled.jsx
@@ -2,10 +2,6 @@ import styled from "styled-components";
 import Modal from "react-modal";
 
 export const StyledModal = styled(Modal)`
-  .hide-modal-overlay {
-    display: none;
-  }
-
   .modal-content {
     position: fixed;
     top: calc(50% - 150px);