add fully styled author edits ui and tested logic

src/components/EditModal.jsx

@@ -7,6 +7,7 @@ import Draggable from 'react-draggable';
 
 const EditModal = ({ isOpen, closeModal, originalCommentContent }) => {
   const {
+    setEditedComment,
     selectedStyle,
   } = useGeneralStore(state => state);
 
@@ -27,6 +28,10 @@ const EditModal = ({ isOpen, closeModal, originalCommentContent }) => {
   }, [setIsMobile]);
 
 
+  const handleSaveEdit = () => {
+    setEditedComment(commentRef.current.value);
+    closeModal();
+  };
 
   return (
     <StyledModal
@@ -47,13 +52,14 @@ const EditModal = ({ isOpen, closeModal, originalCommentContent }) => {
             <div className="textarea-wrapper">
               <textarea className="textarea" 
               rows="4" 
+              style={{paddingTop: '0'}}
               placeholder="Comment" 
               defaultValue={originalCommentContent}
               wrap="soft" 
               ref={commentRef} />
             </div>
             <div>
-              <button id="next">Save</button>
+              <button id="next" onClick={handleSaveEdit}>Save</button>
             </div>
           </div>
         </div>

src/components/styled/Thread.styled.jsx

@@ -3208,17 +3208,76 @@ export const Footer = styled.div`
 
 export const AuthorDeleteAlert = styled.div`
   .author-delete-alert {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
     padding: 20px;
-    background: #fff;
-    border-radius: 5px;
-    box-shadow: 0 0 10px 0 rgba(0,0,0,.25);
+    border: 1px solid #ccc;
     position: absolute;
-    top: 50%;
+    top: 40%;
     left: 50%;
     transform: translate(-50%, -50%);
+
+    .author-delete-buttons {
+      display: flex;
+      justify-content: center;
+
+      & > button {
+        margin-top: 10px;
       }
+    
+      & > button:first-child {
+        margin-right: 20px;
+      }
+    }
+  }
+
+
+  
+
+  ${({ selectedStyle }) => {
+    switch (selectedStyle) {
+      case 'Yotsuba':
+        return `
+        .author-delete-alert {
+          background-color: #f0e0d6;
+          border: 1px solid #d9bfb7;
+        }`;
+
+      case 'Yotsuba-B':
+        return `
+        .author-delete-alert {
+          background-color: #d6daf0;
+          border: 1px solid #b7c5d9;
+        }`;
+
+      case 'Futaba':
+        return `
+        .author-delete-alert {
+          background-color: #f0e0d6;
+          border: 1px solid #d9bfb7;
+        }`;
+
+      case 'Burichan':
+        return `
+        .author-delete-alert {
+          background-color: #d6daf0;
+          border: 1px solid #b7c5d9;
+        }`;
+
+      case 'Tomorrow':
+        return `
+        .author-delete-alert {
+          background-color: #282a2e;
+          border: 1px solid #111;
+        }`;
+
+      case 'Photon':
+        return `
+        .author-delete-alert {
+          background-color: #ddd;
+          border: 1px solid #ccc;
+        }`; 
+        
+        default:
+          return '';
+      }
+  }}
 `;

src/components/views/Thread.jsx

@@ -37,6 +37,7 @@ const Thread = () => {
     captchaResponse, setCaptchaResponse,
     setChallengesArray,
     defaultSubplebbits,
+    editedComment,
     setIsCaptchaOpen,
     isModerationOpen, setIsModerationOpen,
     isSettingsOpen, setIsSettingsOpen,
@@ -78,7 +79,6 @@ const Thread = () => {
   const [isImageSearchOpen, setIsImageSearchOpen] = useState(false);
   const [isModerator, setIsModerator] = useState(false);
   const [commentCid, setCommentCid] = useState(null);
-  const [editedComment, setEditedComment] = useState(null);
   
   useError(errorMessage, [errorMessage]);
   useSuccess(successMessage, [successMessage]);
@@ -339,6 +339,7 @@ const Thread = () => {
 
   const [publishCommentEditOptions, setPublishCommentEditOptions] = useState({
     commentCid: commentCid,
+    content: editedComment || undefined,
     subplebbitAddress: selectedAddress,
     onChallenge,
     onChallengeVerification,
@@ -366,6 +367,7 @@ const Thread = () => {
           <AuthorDeleteAlert selectedStyle={selectedStyle}>
             <div className='author-delete-alert'>
               <p>Are you sure you want to delete this post?</p>
+              <div className="author-delete-buttons">
                 <button onClick={onClose}>No</button>
                 <button
                   onClick={() => {
@@ -381,6 +383,7 @@ const Thread = () => {
                   Yes
                 </button>
               </div>
+            </div>
           </AuthorDeleteAlert>
         );
       }
@@ -399,8 +402,16 @@ const Thread = () => {
     setPublishCommentEditOptions((prevOptions) => ({
       ...prevOptions,
       commentCid: commentCid,
+      content: editedComment || undefined,
     }));
-  }, [commentCid]);
+  }, [commentCid, editedComment]);
+
+
+  useEffect(() => {
+    if (editedComment !== '') {
+      setTriggerPublishCommentEdit(true);
+    }
+  }, [editedComment]);
 
   
   useEffect(() => {
@@ -803,7 +814,7 @@ const Thread = () => {
                             {comment?.author?.shortAddress === account?.author?.shortAddress ? (
                               <>
                                 <li onClick={() => handleAuthorEditClick(comment)}>Edit post</li>
-                                    <li onClick={() => handleAuthorDeleteClick(comment.cid)}>Delete post</li>
+                                <li onClick={() => handleAuthorDeleteClick(comment.cid, selectedStyle)}>Delete post</li>
                               </>
                             ) : null}
                             {isModerator ? (

src/hooks/stores/useGeneralStore.js

@@ -20,6 +20,9 @@ const useGeneralStore = create((set) => ({
   defaultSubplebbits: [],
   setDefaultSubplebbits: (subplebbits) => set({ defaultSubplebbits: subplebbits }),
 
+  editedComment: '',
+  setEditedComment: (comment) => set({ editedComment: comment }),
+
   isCaptchaOpen: false,
   setIsCaptchaOpen: (isOpen) => set({ isCaptchaOpen: isOpen }),