From 17f70fdc039c0c684bca805c286fa2cae02354b6 Mon Sep 17 00:00:00 2001
From: plebbitor <mottoes_recap0u@icloud.com>
Date: Fri, 21 Apr 2023 09:58:25 +0200
Subject: [PATCH] fixed UI in posting modals

---
 src/components/CaptchaModal.jsx             | 25 +++++++++++++--------
 src/components/styled/ReplyModal.styled.jsx |  2 +-
 src/components/views/Thread.jsx             |  4 ++--
 3 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/src/components/CaptchaModal.jsx b/src/components/CaptchaModal.jsx
index 40802fd7..fb9ac4e4 100644
--- a/src/components/CaptchaModal.jsx
+++ b/src/components/CaptchaModal.jsx
@@ -11,7 +11,8 @@ const CaptchaModal = () => {
     pendingComment,
     selectedStyle,
     setCaptchaResponse,
-    isCaptchaOpen, setIsCaptchaOpen
+    isCaptchaOpen, setIsCaptchaOpen,
+    selectedShortCid,
    } = useGeneralStore(state => state);
 
   const [imageSources, setImageSources] = useState([]);
@@ -57,7 +58,7 @@ const CaptchaModal = () => {
         <div className="modal-content" ref={nodeRef}>
           <div className="modal-header">
             {pendingComment.parentCid ? 
-            ("Challenges for Reply c/" + pendingComment.cid) : 
+            ("Challenges for Reply to c/" + selectedShortCid) : 
             "Challenges for New Thread"}
             <button className="icon" onClick={() => setIsCaptchaOpen(false)} title="close" />
           </div>
@@ -102,13 +103,19 @@ const CaptchaModal = () => {
               <span style={{lineHeight: '1.7'}}>
                 Challenge {currentChallengeIndex + 1} of {totalChallenges}
               </span>
-              <button id="nav" onClick={() => {
-                setCurrentChallengeIndex((currentChallengeIndex + 1) % totalChallenges)
-              }
-              }>&gt;</button>
-              <button id="nav" onClick={()=> {
-                setCurrentChallengeIndex((currentChallengeIndex - 1 + totalChallenges) % totalChallenges)
-              }}>&lt;</button>
+              <button
+                id="nav"
+                onClick={() => {
+                  if (currentChallengeIndex + 1 < totalChallenges) {
+                    setCurrentChallengeIndex((currentChallengeIndex + 1) % totalChallenges);
+                  } else {
+                    setCaptchaResponse(responseRef.current.value);
+                    setIsCaptchaOpen(false);
+                  }
+                }}
+              >
+                {currentChallengeIndex + 1 < totalChallenges ? "Next" : "Post"}
+              </button>
             </div>
           </div>
         </div>
diff --git a/src/components/styled/ReplyModal.styled.jsx b/src/components/styled/ReplyModal.styled.jsx
index 8594f392..9f66017e 100644
--- a/src/components/styled/ReplyModal.styled.jsx
+++ b/src/components/styled/ReplyModal.styled.jsx
@@ -68,7 +68,7 @@ export const StyledModal = styled(Modal)`
     position: absolute;
     top: 4px;
     left: 5px;
-    color: #999;
+    color: black;
     text-decoration: underline;
     pointer-events: none;
   }
diff --git a/src/components/views/Thread.jsx b/src/components/views/Thread.jsx
index fd63a513..55c5d36d 100644
--- a/src/components/views/Thread.jsx
+++ b/src/components/views/Thread.jsx
@@ -308,12 +308,12 @@ const Thread = () => {
           </div>
           <div id="post-form-link-desktop">
             [
-              <a onClick={handleClickForm} onMouseOver={(event) => event.target.style.cursor='pointer'}>Post a Reply</a>
+              <a onClick={() => {handleClickForm(); setSelectedShortCid(comment.shortCid)}} onMouseOver={(event) => event.target.style.cursor='pointer'}>Post a Reply</a>
             ]
           </div>
           <div id="post-form-link-mobile">
             <span className="btn-wrap">
-              <a onClick={handleClickForm} onMouseOver={(event) => event.target.style.cursor='pointer'}>Post a Reply</a>
+              <a onClick={() => {handleClickForm(); setSelectedShortCid(comment.shortCid)}} onMouseOver={(event) => event.target.style.cursor='pointer'}>Post a Reply</a>
             </span>
           </div>
         </ReplyFormLink>