reply modal design

src/components/Board.jsx

@@ -4,6 +4,7 @@ import useBoardStore from '../useBoardStore';
 import { Container, NavBar, Header, Break, PostFormLink, PostFormTable, PostForm, TopBar, BoardForm } from './styles/Board.styled';
 import ImageBanner from './ImageBanner';
 import CaptchaModal from './CaptchaModal';
+import ReplyModal from './ReplyModal';
 import SettingsModal from './SettingsModal';
 import { useFeed, useAccountsActions } from '@plebbit/plebbit-react-hooks';
 import InfiniteScroll from 'react-infinite-scroller';
@@ -36,6 +37,7 @@ const Board = ({ setBodyStyle }) => {
   const [comment, setComment] = useState('');
   const { publishComment } = useAccountsActions();
   const [isCaptchaOpen, setIsCaptchaOpen] = useState(false);
+  const [isReplyOpen, setIsReplyOpen] = useState(false);
   const [isSettingsOpen, setIsSettingsOpen] = useState(false);
   const [captchaImage, setCaptchaImage] = useState('');
   const navigate = useNavigate();
@@ -303,6 +305,14 @@ const Board = ({ setBodyStyle }) => {
     setIsCaptchaOpen(false);
   };
 
+  const handleReplyClose = () => {
+    setIsReplyOpen(false);
+  };
+  
+  const handleReplyOpen = () => {
+    setIsReplyOpen(true);
+  };
+
   const handleSettingsClose = () => {
     setIsSettingsOpen(false);
   }
@@ -408,6 +418,10 @@ const Board = ({ setBodyStyle }) => {
       isOpen={isCaptchaOpen} 
       closeModal={handleCaptchaClose} 
       captchaImage={captchaImage} />
+      <ReplyModal 
+      selectedStyle={selectedStyle}
+      isOpen={isReplyOpen}
+      closeModal={handleReplyClose} />
       <SettingsModal
       selectedStyle={selectedStyle}
       isOpen={isSettingsOpen}
@@ -612,7 +626,7 @@ const Board = ({ setBodyStyle }) => {
                         &nbsp;
                         <span key={`pn-${thread.cid}`} className="post-number">
                           <Link to="" key={`pl1-${thread.cid}`} onClick={handleVoidClick} title="Link to this post">c/</Link>
-                          <Link to="" key={`pl2-${thread.cid}`} onClick={handleVoidClick} title="Reply to this post">{thread.cid.slice(0, 8)}</Link>
+                          <button id="reply-button" style={{ all: 'unset', cursor: 'pointer' }} key={`pl2-${thread.cid}`} onClick={handleReplyOpen} title="Reply to this post">{thread.cid.slice(0, 8)}</button>
                           &nbsp;
                           <span key={`rl1-${thread.cid}`}>&nbsp;
                             [
@@ -711,7 +725,7 @@ const Board = ({ setBodyStyle }) => {
                       &nbsp;
                       <span key={`pn-${reply.cid}`} className="post-number">
                         <Link to="" key={`pl1-${reply.cid}`} onClick={handleVoidClick} title="Link to this post">c/</Link>
-                        <Link to="" key={`pl2-${reply.cid}`} onClick={handleVoidClick} title="Reply to this post">{reply.cid.slice(0, 8)}</Link>
+                        <button id="reply-button" style={{ all: 'unset', cursor: 'pointer' }} key={`pl2-${reply.cid}`} onClick={handleReplyOpen} title="Reply to this post">{reply.cid.slice(0, 8)}</button>
                       </span>&nbsp;
                       <button key={`pmb-${reply.cid}`} className="post-menu-button" onClick={handleVoidClick} title="Post menu" style={{ all: 'unset', cursor: 'pointer' }} data-cmd="post-menu">▶</button>
                       <div id="backlink-id" className="backlink">
@@ -816,7 +830,7 @@ const Board = ({ setBodyStyle }) => {
                         {getDate(thread.timestamp)}
                         &nbsp;
                         <Link to="" key={`mob-no-${thread.cid}`} onClick={handleVoidClick} title="Link to this post">c/</Link>
-                        <Link to="" key={`mob-no2-${thread.cid}`} onClick={handleVoidClick} title="Reply to this post">{thread.cid.slice(0, 8)}</Link>
+                        <button id="reply-button" style={{ all: 'unset', cursor: 'pointer' }} key={`mob-no2-${thread.cid}`} onClick={handleReplyOpen} title="Reply to this post">{thread.cid.slice(0, 8)}</button>
                       </span>
                     </div>
                     <div key={`mob-f-${thread.cid}`} className="file-mobile">
@@ -892,7 +906,7 @@ const Board = ({ setBodyStyle }) => {
                         <span key={`mob-dt-${reply.cid}`} className="date-time-mobile">
                         {getDate(reply.timestamp)}&nbsp;
                           <Link to="" key={`mob-pl1-${reply.cid}`} onClick={handleVoidClick} title="Link to this post">c/</Link>
-                          <Link to="" key={`mob-pl2-${reply.cid}`} onClick={handleVoidClick} title="Reply to this post">{reply.cid.slice(0, 8)}</Link>
+                          <button id="reply-button" style={{ all: 'unset', cursor: 'pointer' }} key={`mob-pl2-${reply.cid}`} onClick={handleReplyOpen} title="Reply to this post">{reply.cid.slice(0, 8)}</button>
                         </span>
                       </div>
                       {reply.content ? (

src/components/CaptchaModal.jsx

@@ -12,9 +12,8 @@ const StyledModal = styled(Modal)`
 
   .modal-content {
     position: fixed;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
+    top: calc(50% - 150px);
+    left: calc(50% - 150px);
     display: block;
     padding: 2px;
     font-size: 10pt;

src/components/ReplyModal.jsx

@@ -0,0 +1,290 @@
+import React from 'react';
+import useBoardStore from '../useBoardStore';
+import Modal from 'react-modal';
+import styled from 'styled-components';
+import Draggable from 'react-draggable';
+
+
+const StyledModal = styled(Modal)`
+  .hide-modal-overlay {
+    display: none;
+  }
+
+  .modal-content {
+    position: fixed;
+    top: calc(50% - 150px);
+    left: calc(50% - 150px);
+    display: block;
+    padding: 2px;
+    font-size: 10pt;
+    border-left: none;
+    border-top: none;
+  }
+
+  .modal-header {
+    font-size: 10pt;
+    text-align: center;
+    margin-bottom: 1px;
+    padding: 0;
+    height: 18px;
+    line-height: 18px;
+    cursor: move;
+    font-weight: 700;
+  }
+
+  .icon {
+    all: unset;
+    float: right;
+    cursor: pointer;
+    margin-bottom: -4px;
+    width: 18px;
+    height: 18px;
+    border: none;
+  }
+
+  #name {
+    border: 1px solid #aaa;
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: 10pt;
+    outline: medium none;
+    width: 298px;
+    padding: 2px;
+  }
+
+  textarea {
+    min-width: 296px;
+    float: left;
+    font-size: 10pt;
+    font-family: Arial, Helvetica, sans-serif;
+  }
+
+  #captcha-container {
+    position: relative;
+    clear: both;
+    width: 302px;
+    overflow: hidden;
+    margin-bottom: 3px;
+  }
+
+  #response {
+    width: 100%;
+    box-sizing: border-box;
+    font-size: 11px;
+    height: 18px;
+    margin: 0px;
+    padding: 0px 2px;
+    font-family: monospace;
+    vertical-align: middle;
+  }
+
+  img {
+    height: 100%;
+    width: 100%;
+    margin-top: 2px;
+    position: relative;
+    display: block;
+  }
+
+  #next {
+    float: right;
+    margin: 0;
+    width: 75px;
+  }
+
+  ${({ selectedStyle }) => {
+    switch (selectedStyle) {
+      case 'Yotsuba':
+        return `
+        .modal-content {
+          background-color: #f0e0d6;
+          border: 1px solid #d9bfb7;
+        }
+
+        .modal-header {
+          background-color: #ea8;
+          color: #800;
+          border: 1px solid #800;
+        }
+
+        .icon {
+          background-image: url(/assets/buttons/cross_red.png);
+        }
+
+        span {
+          color: maroon;
+        }`;
+
+      case 'Yotsuba-B':
+        return `
+        .modal-content {
+          background-color: #d6daf0;
+          border: 1px solid #b7c5d9;
+        }
+
+        .modal-header {
+          background-color: #98e;
+          color: #000;
+          border: 1px solid #000;
+        }
+
+        .icon {
+          background-image: url(/assets/buttons/cross_blue.png);
+        }
+
+        span {
+          color: #000;
+        }`;
+
+      case 'Futaba':
+        return `
+        .modal-content {
+          background-color: #f0e0d6;
+          border: 1px solid #d9bfb7;
+        }
+
+        .modal-header {
+          background-color: #ea8;
+          color: #800;
+          border: 1px solid #800;
+        }
+
+        .icon {
+          background-image: url(/assets/buttons/cross_red.png);
+        }
+
+        span {
+          color: maroon;
+        }`;
+
+      case 'Burichan':
+        return `
+        .modal-content {
+          background-color: #d6daf0;
+          border: 1px solid #b7c5d9;
+        }
+
+        .modal-header {
+          background-color: #98e;
+          color: #000;
+          border: 1px solid #000;
+        }
+
+        .icon {
+          background-image: url(/assets/buttons/cross_blue.png);
+        }
+
+        span {
+          color: #000;
+        }`;
+
+      case 'Tomorrow':
+        return `
+        .modal-content {
+          background-color: #282a2e;
+          border: 1px solid #111;
+        }
+
+        .modal-header {
+          background-color: #282a2e;
+          color: #c5c8c6;
+        }
+
+        .icon {
+          background-image: url(/assets/buttons/cross_dark.png);
+        }
+
+        #name {
+          background-color: #282a2e;
+          color: #c5c8c6;
+          border: 1px solid #515151;
+          width: 296px;
+        }
+
+        textarea {
+          background-color: #282a2e;
+          color: #c5c8c6;
+          border: 1px solid #515151;
+        }
+
+        #response {
+          background-color: #282a2e;
+          color: #c5c8c6;
+          outline: none;
+          border: 1px solid #515151;
+        }
+
+        span {
+          color: #c5c8c6;
+        }
+        
+        #next {
+          filter: brightness(80%);
+        }`;
+
+      case 'Photon':
+        return `
+        .modal-content {
+          background-color: #ddd;
+          border: 1px solid #ccc;
+        }
+
+        .modal-header {
+          background-color: #ddd;
+          color: #333;
+        }
+
+        .icon {
+          background-image: url(/assets/buttons/cross_photon.png);
+        }
+
+        span {
+          color: #333;
+        }`; 
+    }
+  }}
+`;
+
+
+const ReplyModal = ({ isOpen, closeModal }) => {
+  const selectedStyle = useBoardStore(state => state.selectedStyle);
+
+  const handleCloseModal = () => {
+    closeModal();
+  };
+
+  return (
+    <StyledModal
+    isOpen={isOpen}
+    onRequestClose={closeModal}
+    contentLabel="Reply Modal"
+    shouldCloseOnEsc={false}
+    shouldCloseOnOverlayClick={false}
+    selectedStyle={selectedStyle}
+    overlayClassName="hide-modal-overlay">
+      <Draggable handle=".modal-header">
+        <div className="modal-content">
+          <div className="modal-header">
+            Reply to Thread
+            <button className="icon" onClick={handleCloseModal} title="close" />
+          </div>
+          <div id="form">
+            <div>
+              <input id="name" type="text" placeholder="Name" disabled></input>
+            </div>
+            <div>
+              <textarea rows="4" placeholder="Comment" wrap="soft" disabled></textarea>
+            </div>
+            <div>
+              <span>Challenge 1 of 3</span>
+              <button id="next">Next</button>
+            </div>
+          </div>
+        </div>
+      </Draggable>
+    </StyledModal>
+  );
+};
+
+Modal.setAppElement('#root');
+
+export default ReplyModal;

src/components/Thread.jsx

@@ -6,6 +6,7 @@ import { ReplyFormLink, TopBar, BottomBar } from './styles/Thread.styled';
 import { useComment, useAccountsActions } from '@plebbit/plebbit-react-hooks';
 import ImageBanner from './ImageBanner';
 import CaptchaModal from './CaptchaModal';
+import ReplyModal from './ReplyModal';
 import SettingsModal from './SettingsModal';
 import { Tooltip } from 'react-tooltip';
 import onError from '../utils/onError';
@@ -37,6 +38,7 @@ const Thread = ({ setBodyStyle }) => {
   const [commentContent, setCommentContent] = useState('');
   const { publishComment } = useAccountsActions();
   const [isCaptchaOpen, setIsCaptchaOpen] = useState(false);
+  const [isReplyOpen, setIsReplyOpen] = useState(false);
   const [isSettingsOpen, setIsSettingsOpen] = useState(false);
   const [captchaImage, setCaptchaImage] = useState('');
   const navigate = useNavigate();
@@ -275,6 +277,14 @@ const Thread = ({ setBodyStyle }) => {
     setIsCaptchaOpen(false);
   };
 
+  const handleReplyClose = () => {
+    setIsReplyOpen(false);
+  };
+  
+  const handleReplyOpen = () => {
+    setIsReplyOpen(true);
+  };
+
   const handleSettingsClose = () => {
     setIsSettingsOpen(false);
   }
@@ -379,6 +389,10 @@ const Thread = ({ setBodyStyle }) => {
       isOpen={isCaptchaOpen} 
       closeModal={handleCaptchaClose} 
       captchaImage={captchaImage} />
+      <ReplyModal 
+      selectedStyle={selectedStyle}
+      isOpen={isReplyOpen}
+      closeModal={handleReplyClose} />
       <SettingsModal
       selectedStyle={selectedStyle}
       isOpen={isSettingsOpen}
@@ -601,7 +615,7 @@ const Thread = ({ setBodyStyle }) => {
                       &nbsp;
                       <span className="post-number">
                         <Link to="" onClick={handleVoidClick} title="Link to this post">c/</Link>
-                        <Link to="" onClick={handleVoidClick} title="Reply to this post">{comment.cid.slice(0, 8)}</Link>
+                        <button id="reply-button" style={{ all: 'unset', cursor: 'pointer' }} onClick={handleReplyOpen} title="Reply to this post">{comment.cid.slice(0, 8)}</button>
                       </span>&nbsp;&nbsp;
                       <button key={`pmb-${comment.cid}`} className="post-menu-button" onClick={handleVoidClick} title="Post menu" style={{ all: 'unset', cursor: 'pointer' }}>▶</button>
                       <div id="backlink-id" className="backlink">
@@ -674,7 +688,7 @@ const Thread = ({ setBodyStyle }) => {
                           &nbsp;
                           <span key={`pn-${reply.cid}`} className="post-number">
                             <Link to="" key={`pl1-${reply.cid}`} onClick={handleVoidClick} title="Link to this post">c/</Link>
-                            <Link to="" key={`pl2-${reply.cid}`} onClick={handleVoidClick} title="Reply to this post">{reply.cid.slice(0, 8)}</Link>
+                            <button id="reply-button" style={{ all: 'unset', cursor: 'pointer' }} key={`pl2-${reply.cid}`} onClick={handleReplyOpen} title="Reply to this post">{reply.cid.slice(0, 8)}</button>
                           </span>&nbsp;
                           <button key={`pmb-${reply.cid}`} className="post-menu-button" onClick={handleVoidClick} title="Post menu" style={{ all: 'unset', cursor: 'pointer' }}>▶</button>
                           <div id="backlink-id" className="backlink">
@@ -764,7 +778,7 @@ const Thread = ({ setBodyStyle }) => {
                       <span key={`mob-dt-${comment.cid}`} className="date-time-mobile">
                         {getDate(comment.timestamp)}
                         &nbsp;
-                        <Link to="" key={`mob-no-${comment.cid}`} onClick={handleVoidClick} title="Link to this post">c/</Link>
+                        <button id="reply-button" style={{ all: 'unset', cursor: 'pointer' }} key={`mob-no-${comment.cid}`} onClick={handleReplyOpen} title="Link to this post">c/</button>
                         <Link to="" key={`mob-no2-${comment.cid}`} onClick={handleVoidClick} title="Reply to this post">{comment.cid.slice(0, 8)}</Link>
                       </span>
                     </div>
@@ -831,7 +845,7 @@ const Thread = ({ setBodyStyle }) => {
                         <span key={`mob-dt-${reply.cid}`} className="date-time-mobile">
                           {getDate(reply.timestamp)}&nbsp;
                           <Link to="" key={`mob-pl1-${reply.cid}`} onClick={handleVoidClick} title="Link to this post">c/</Link>
-                          <Link to="" key={`mob-pl2-${reply.cid}`} onClick={handleVoidClick} title="Reply to this post">{reply.cid.slice(0, 8)}</Link>
+                          <button id="reply-button" style={{ all: 'unset', cursor: 'pointer' }} key={`mob-pl2-${reply.cid}`} onClick={handleReplyOpen} title="Reply to this post">{reply.cid.slice(0, 8)}</button>
                         </span>
                       </div>
                       <blockquote key={`mob-pm-${reply.cid}`} className="post-message-mobile">

src/components/styles/Board.styled.jsx

@@ -2534,6 +2534,10 @@ export const BoardForm = styled.div`
         color: red;
       }
 
+      #reply-button:hover {
+        color: red !important;
+      }
+
       .reply-link:not(:hover) {
         color: #00e !important;
       }
@@ -2692,6 +2696,10 @@ export const BoardForm = styled.div`
         color: #d00;
       }
 
+      #reply-button:hover {
+        color: #d00 !important;
+      }
+
       .reply-link:not(:hover) {
         color: #34345c !important;
       }
@@ -2844,6 +2852,10 @@ export const BoardForm = styled.div`
       .post-number a:hover {
         color: red;
       }
+
+      #reply-button:hover {
+        color: red !important;
+      }
       
       .reply-link {
         text-decoration: underline !important;
@@ -3001,6 +3013,10 @@ export const BoardForm = styled.div`
         color: red;
       }
 
+      #reply-button:hover {
+        color: red !important;
+      }
+
       .reply-link {
         text-decoration: underline !important;
        }
@@ -3153,6 +3169,10 @@ export const BoardForm = styled.div`
         color: #5f89ab;
       }
 
+      #reply-button:hover {
+        color: #5f89ab !important;
+      }
+
       .reply-link:not(:hover) {
         color: #81a2be;
       }
@@ -3315,6 +3335,10 @@ export const BoardForm = styled.div`
         color: #ff3300;
       }
 
+      #reply-button:hover {
+        color: #ff3300 !important;
+      }
+
       .reply-link:not(:hover) {
         color: #f60 !important;
       }