From eb089f7ac1f86ba64873c9a9f924fc56b9f2855c Mon Sep 17 00:00:00 2001
From: plebbitor <mottoes_recap0u@icloud.com>
Date: Thu, 16 Mar 2023 13:55:39 +0100
Subject: [PATCH] fix post-menu-button

---
 src/components/Board.jsx               | 16 ++---
 src/components/Thread.jsx              | 16 ++---
 src/components/styles/Board.styled.jsx | 82 +++++++++++++-------------
 3 files changed, 56 insertions(+), 58 deletions(-)

diff --git a/src/components/Board.jsx b/src/components/Board.jsx
index c4822558..28a3e452 100644
--- a/src/components/Board.jsx
+++ b/src/components/Board.jsx
@@ -557,7 +557,7 @@ const Board = ({ setBodyStyle }) => {
                           File:&nbsp;
                           <a key={`fa-${thread.cid}`} href={`${thread.link}`} target="_blank">filename.something</a>&nbsp;(metadata)
                         </div>
-                        <Link to="" key={`fta-${thread.cid}`} onClick={handleVoidClick} target="_blank" className="file-thumb">
+                        <Link to="" key={`fta-${thread.cid}`} onClick={handleVoidClick} className="file-thumb">
                           <img key={`fti-${thread.cid}`} src="/assets/plebchan-psycho.png" alt="filename.something" />
                         </Link>
                       </div>
@@ -614,13 +614,13 @@ const Board = ({ setBodyStyle }) => {
                           <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>
                           &nbsp;
-                          <span key={`rl1-${thread.cid}`}>
+                          <span key={`rl1-${thread.cid}`}>&nbsp;
                             [
                             <Link key={`rl2-${thread.cid}`} to={`/${selectedAddress}/thread/${thread.cid}`} onClick={() => handleClickThread(thread.cid)} className="reply-link" >Reply</Link>
                             ]
                           </span>
-                        </span>
-                        <Link to="" key={`pmb-${thread.cid}`} className="post-menu-button" onClick={handleVoidClick} title="Post menu" data-cmd="post-menu">▶</Link>
+                        </span>&nbsp;
+                        <button key={`pmb-${thread.cid}`} className="post-menu-button" title="Post menu" style={{ all: 'unset', cursor: 'pointer' }} data-cmd="post-menu">▶</button>
                         <div key={`bi-${thread.cid}`} id="backlink-id" className="backlink">
                           {thread.replies?.pages.topAll.comments
                             .sort((a, b) => a.timestamp - b.timestamp)
@@ -712,8 +712,8 @@ const Board = ({ setBodyStyle }) => {
                       <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>
-                      </span>
-                      <Link to="" key={`pmb-${reply.cid}`} className="post-menu-button" onClick={handleVoidClick} title="Post menu" data-cmd="post-menu">▶</Link>
+                      </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">
                         {reply.replies?.pages.topAll.comments
                           .sort((a, b) => a.timestamp - b.timestamp)
@@ -760,7 +760,7 @@ const Board = ({ setBodyStyle }) => {
                 <div key={`mob-c-${thread.cid}`} className="op-container">
                   <div key={`mob-po-${thread.cid}`} className="post op">
                     <div key={`mob-pi-${thread.cid}`} className="post-info-mobile">
-                      <Link to="" key={`mob-pb-${thread.cid}`} className="post-menu-button-mobile" onClick={handleVoidClick}>...</Link>
+                      <button key={`mob-pb-${thread.cid}`} className="post-menu-button-mobile" onClick={handleVoidClick} style={{ all: 'unset', cursor: 'pointer' }}>...</button>
                       <span key={`mob-nbm-${thread.cid}`} className="name-block-mobile">
                         {thread.author.displayName
                         ? thread.author.displayName.length > 15
@@ -852,7 +852,7 @@ const Board = ({ setBodyStyle }) => {
                   <div key={`mob-rc-${reply.cid}`} className="reply-container">
                     <div key={`mob-pr-${reply.cid}`} className="post-reply">
                       <div key={`mob-pi-${reply.cid}`} className="post-info-mobile">
-                        <a key={`pmbm-${reply.cid}`} className="post-menu-button-mobile" title="Post menu">...</a>
+                        <button key={`pmbm-${reply.cid}`} className="post-menu-button-mobile" title="Post menu" style={{ all: 'unset', cursor: 'pointer' }}>...</button>
                         <span key={`mob-nb-${reply.cid}`} className="name-block-mobile">
                           {reply.author.displayName
                           ? reply.author.displayName.length > 12
diff --git a/src/components/Thread.jsx b/src/components/Thread.jsx
index b38a51b1..1c3178b8 100644
--- a/src/components/Thread.jsx
+++ b/src/components/Thread.jsx
@@ -527,7 +527,7 @@ const Thread = ({ setBodyStyle }) => {
                           File:&nbsp;
                           <a key={`fa-${comment.cid}`} href={`${comment.link}`} target="_blank">filename.something</a>&nbsp;(metadata)
                         </div>
-                        <Link to="" key={`fta-${comment.cid}`} onClick={handleVoidClick} target="_blank" className="file-thumb">
+                        <Link to="" key={`fta-${comment.cid}`} onClick={handleVoidClick} className="file-thumb">
                           <img key={`fti-${comment.cid}`} src="/assets/plebchan-psycho.png" alt="filename.something" />
                         </Link>
                       </div>
@@ -587,8 +587,8 @@ const Thread = ({ setBodyStyle }) => {
                       <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>
-                      </span>
-                      <Link to="" key={`pmb-${comment.cid}`} className="post-menu-button" onClick={handleVoidClick} title="Post menu" data-cmd="post-menu">▶</Link>
+                      </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">
                         {comment.replies?.pages.topAll.comments
                           .sort((a, b) => a.timestamp - b.timestamp)
@@ -660,8 +660,8 @@ const Thread = ({ setBodyStyle }) => {
                           <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>
-                          </span>
-                          <Link to="" key={`pmb-${reply.cid}`} className="post-menu-button" onClick={handleVoidClick} title="Post menu" data-cmd="post-menu">▶</Link>
+                          </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">
                             {reply.replies?.pages.topAll.comments
                               .sort((a, b) => a.timestamp - b.timestamp)
@@ -695,7 +695,7 @@ const Thread = ({ setBodyStyle }) => {
               <div className="op-container">
                   <div key={`mob-po-${comment.cid}`} className="post op">
                     <div key={`mob-pi-${comment.cid}`} className="post-info-mobile">
-                      <Link to="" key={`mob-pb-${comment.cid}`} className="post-menu-button-mobile" onClick={handleVoidClick}>...</Link>
+                      <button style={{ all: 'unset', cursor: 'pointer' }} key={`mob-pb-${comment.cid}`} className="post-menu-button-mobile" onClick={handleVoidClick}>...</button>
                       <span className="name-block-mobile">
                         {comment.author.displayName
                         ? comment.author.displayName.length > 15
@@ -754,7 +754,7 @@ const Thread = ({ setBodyStyle }) => {
                       </span>
                     </div>
                     <div key={`mob-f-${comment.cid}`} className="file-mobile">
-                      <Link to="" key={`mob-ft${comment.cid}`} className="file-thumb-mobile" onClick={handleVoidClick} target="_blank">
+                      <Link to="" key={`mob-ft${comment.cid}`} className="file-thumb-mobile" onClick={handleVoidClick}>
                         <img key={`mob-img-${comment.cid}`} src="/assets/plebchan-psycho.png" alt="" />
                         <div key={`mob-fi-${comment.cid}`} className="file-info-mobile">58 KB JPG</div>
                       </Link>
@@ -776,7 +776,7 @@ const Thread = ({ setBodyStyle }) => {
                   <div key={`mob-rc-${reply.cid}`} className="reply-container">
                     <div key={`mob-pr-${reply.cid}`} className="post-reply">
                       <div key={`mob-pi-${reply.cid}`} className="post-info-mobile">
-                        <a className="post-menu-button-mobile" title="Post menu">...</a>
+                        <button className="post-menu-button-mobile" title="Post menu" style={{ all: 'unset', cursor: 'pointer' }}>...</button>
                         <span key={`mob-nb-${reply.cid}`} className="name-block-mobile">
                           {reply.author.displayName
                           ? reply.author.displayName.length > 12
diff --git a/src/components/styles/Board.styled.jsx b/src/components/styles/Board.styled.jsx
index 619afc5e..27a35f92 100644
--- a/src/components/styles/Board.styled.jsx
+++ b/src/components/styles/Board.styled.jsx
@@ -1592,7 +1592,7 @@ export const BoardForm = styled.div`
               }
     
               .post-menu-button-mobile {
-                color: #00e;
+                color: #00e !important;
               }
     
               .name-mobile {
@@ -1660,7 +1660,7 @@ export const BoardForm = styled.div`
                 background-color: #ead6ca;
 
                 .post-menu-button-mobile {
-                  color: #00e;
+                  color: #00e !important;
                 }
 
                 .name-mobile {
@@ -1710,7 +1710,7 @@ export const BoardForm = styled.div`
               }
     
               .post-menu-button-mobile {
-                color: #34345c;
+                color: #34345c !important;
               }
     
               .name-mobile {
@@ -1778,7 +1778,7 @@ export const BoardForm = styled.div`
                 background-color: #c9cde8;
 
                 .post-menu-button-mobile {
-                  color: #34345c;
+                  color: #34345c !important;
                 }
 
                 .name-mobile {
@@ -1824,7 +1824,7 @@ export const BoardForm = styled.div`
               }
     
               .post-menu-button-mobile {
-                color: #00e;
+                color: #00e !important;
               }
     
               .name-mobile {
@@ -1892,7 +1892,7 @@ export const BoardForm = styled.div`
                 background-color: #ead6ca;
 
                 .post-menu-button-mobile {
-                  color: #00e;
+                  color: #00e !important;
                 }
 
                 .name-mobile {
@@ -1941,7 +1941,7 @@ export const BoardForm = styled.div`
               }
     
               .post-menu-button-mobile {
-                color: #34345c;
+                color: #34345c !important;
               }
     
               .name-mobile {
@@ -2009,7 +2009,7 @@ export const BoardForm = styled.div`
                 background-color: #c9cde8;
 
                 .post-menu-button-mobile {
-                  color: #34345c;
+                  color: #34345c !important;
                 }
 
                 .name-mobile {
@@ -2054,7 +2054,7 @@ export const BoardForm = styled.div`
               }
     
               .post-menu-button-mobile {
-                color: #81A2BE;
+                color: #81A2BE !important;
               }
     
               .name-mobile {
@@ -2128,7 +2128,7 @@ export const BoardForm = styled.div`
                 background-color: #212326;
 
                 .post-menu-button-mobile {
-                  color: #81A2BE;
+                  color: #81A2BE !important;
                 }
 
                 .name-mobile {
@@ -2177,7 +2177,7 @@ export const BoardForm = styled.div`
               }
     
               .post-menu-button-mobile {
-                color: #f60;
+                color: #f60 !important;
               }
     
               .name-mobile {
@@ -2246,7 +2246,7 @@ export const BoardForm = styled.div`
                 background-color: #ddd;
 
                 .post-menu-button-mobile {
-                  color: #f60;
+                  color: #f60 !important;
                 }
 
                 .name-mobile {
@@ -2343,18 +2343,17 @@ export const BoardForm = styled.div`
       }
   
       .post-menu-button-mobile {
-        text-decoration: none;
-        line-height: 1em;
-        width: 1em;
-        text-align: center;
-        outline: none;
-        transform: rotate(90deg);
+        line-height: 1em !important;
+        width: 1em !important;
+        text-align: center !important;
+        outline: none !important;
+        transform: rotate(90deg) !important;
         margin: 4px -5px 0 4px !important;
-        float: left;
-        font-weight: 700;
+        float: left !important;
+        font-weight: 700 !important;
         opacity: 1 !important;
         height: .5em !important;
-        font-size: 16px;
+        font-size: 16px !important;
       }
   
       .name-block-mobile {
@@ -2448,18 +2447,17 @@ export const BoardForm = styled.div`
         clear: left !important;
 
         .post-menu-button-mobile {
-          text-decoration: none;
-          line-height: 1em;
-          width: 1em;
-          text-align: center;
-          outline: none;
-          transform: rotate(90deg);
+          line-height: 1em !important;
+          width: 1em !important;
+          text-align: center !important;
+          outline: none !important;
+          transform: rotate(90deg)!important;
           margin: 4px -5px 0 4px !important;
-          float: left;
-          font-weight: 700;
+          float: left !important;
+          font-weight: 700 !important;
           opacity: 1 !important;
           height: .5em !important;
-          font-size: 16px;
+          font-size: 16px !important;
         }
 
         .name-block-mobile {
@@ -2554,7 +2552,7 @@ export const BoardForm = styled.div`
       }
 
       .post-menu-button {
-        color: #000080;
+        color: #000080 !important;
         margin-left: 5px;
         text-decoration: none;
         line-height: 1em;
@@ -2568,7 +2566,7 @@ export const BoardForm = styled.div`
       }
 
       .post-menu-button:hover {
-        color: red;
+        color: red !important;
       }
 
       .backlink {
@@ -2712,7 +2710,7 @@ export const BoardForm = styled.div`
       }
 
       .post-menu-button {
-        color: #34345c;
+        color: #34345c !important;
         margin-left: 5px;
         text-decoration: none;
         line-height: 1em;
@@ -2726,7 +2724,7 @@ export const BoardForm = styled.div`
       }
 
       .post-menu-button:hover {
-        color: #d00;
+        color: #d00 !important;
       }
 
       .backlink {
@@ -2864,7 +2862,7 @@ export const BoardForm = styled.div`
       }
 
       .post-menu-button {
-        color: #00e;
+        color: #00e !important;
         margin-left: 5px;
         text-decoration: none;
         line-height: 1em;
@@ -2878,7 +2876,7 @@ export const BoardForm = styled.div`
       }
 
       .post-menu-button:hover {
-        color: red;
+        color: red !important;
       }
 
       .backlink {
@@ -3024,7 +3022,7 @@ export const BoardForm = styled.div`
       }
 
       .post-menu-button {
-        color: #34345c;
+        color: #34345c !important;
         margin-left: 5px;
         text-decoration: none;
         line-height: 1em;
@@ -3038,7 +3036,7 @@ export const BoardForm = styled.div`
       }
 
       .post-menu-button:hover {
-        color: red;
+        color: red !important;
       }
 
       .backlink {
@@ -3177,7 +3175,7 @@ export const BoardForm = styled.div`
       }
 
       .post-menu-button {
-        color: #81a2be;
+        color: #81a2be !important;
         margin-left: 5px;
         text-decoration: none;
         line-height: 1em;
@@ -3191,7 +3189,7 @@ export const BoardForm = styled.div`
       }
 
       .post-menu-button:hover {
-        color: #5f89ab;
+        color: #5f89ab !important;
       }
 
       .backlink {
@@ -3335,7 +3333,7 @@ export const BoardForm = styled.div`
       }
 
       .post-menu-button {
-        color: #f60;
+        color: #f60 !important;
         margin-left: 5px;
         text-decoration: none;
         line-height: 1em;
@@ -3349,7 +3347,7 @@ export const BoardForm = styled.div`
       }
 
       .post-menu-button:hover {
-        color: #ff3300;
+        color: #ff3300 !important;
       }
 
       .backlink {