From c8be8e6b19340e4beaacbd42d29ae87ee52abb9a Mon Sep 17 00:00:00 2001
From: "plebeius.eth" <mottoes_recap0u@icloud.com>
Date: Thu, 29 Jun 2023 09:00:21 +0200
Subject: [PATCH] fix icon alignment to be identical to 4chan

---
 src/components/styled/views/Board.styled.jsx |  4 ++--
 src/components/views/Board.jsx               | 24 ++++++++++----------
 src/components/views/Description.jsx         |  8 +++----
 src/components/views/Rules.jsx               |  8 +++----
 src/components/views/Thread.jsx              |  4 ++--
 5 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/src/components/styled/views/Board.styled.jsx b/src/components/styled/views/Board.styled.jsx
index 8a9d1a60..0779b1fc 100644
--- a/src/components/styled/views/Board.styled.jsx
+++ b/src/components/styled/views/Board.styled.jsx
@@ -1678,13 +1678,13 @@ export const BoardForm = styled.div`
 
     .offline-sub {
       width: 16px;
-      margin: -5px -4px -4px 3px;
+      margin: -5px -4px -2px 3px;
       position: relative;
     }
 
     .offline-reply {
       width: 16px;
-      margin: -5px -4px -4px 3px;
+      margin: -5px -4px -2px 3px;
       position: relative;
     }
 
diff --git a/src/components/views/Board.jsx b/src/components/views/Board.jsx
index e1089c42..74223bdb 100755
--- a/src/components/views/Board.jsx
+++ b/src/components/views/Board.jsx
@@ -836,10 +836,10 @@ const Board = () => {
                                 &nbsp;
                                 <span className="date-time">{getDate(subplebbit.createdAt)}</span>
                                 &nbsp;
-                                <img src="assets/sticky.gif" alt="Sticky" title="Sticky" style={{marginBottom: "-3px",
+                                <img src="assets/sticky.gif" alt="Sticky" title="Sticky" style={{marginBottom: "-1px",
                                   imageRendering: "pixelated",}} />
                                 &nbsp;
-                                <img src="assets/closed.gif" alt="Closed" title="Closed" style={{marginBottom: "-3px",
+                                <img src="assets/closed.gif" alt="Closed" title="Closed" style={{marginBottom: "-1px",
                                   imageRendering: "pixelated",}} />
                                 <span>&nbsp;
                                     [
@@ -913,10 +913,10 @@ const Board = () => {
                                 &nbsp;
                                 <span className="thread-icons-mobile"
                                 style={{float: "right", marginRight: "18px"}}>
-                                  <img src="assets/sticky.gif" alt="Sticky" title="Sticky" style={{marginBottom: "-3px",
+                                  <img src="assets/sticky.gif" alt="Sticky" title="Sticky" style={{marginTop: "-1px", marginRight: "2px",
                                   imageRendering: "pixelated",}} />
                                   &nbsp;
-                                  <img src="assets/closed.gif" alt="Closed" title="Closed" style={{marginBottom: "-3px",
+                                  <img src="assets/closed.gif" alt="Closed" title="Closed" style={{marginTop: "-1px", marginRight: "2px",
                                   imageRendering: "pixelated",}} />
                                 </span>
                                 <br />
@@ -985,10 +985,10 @@ const Board = () => {
                                 &nbsp;
                                 <span className="date-time">{getDate(subplebbit.createdAt)}</span>
                                 &nbsp;
-                                <img src="assets/sticky.gif" alt="Sticky" title="Sticky" style={{marginBottom: "-3px",
+                                <img src="assets/sticky.gif" alt="Sticky" title="Sticky" style={{marginBottom: "-1px",
                                   imageRendering: "pixelated",}} />
                                 &nbsp;
-                                <img src="assets/closed.gif" alt="Closed" title="Closed" style={{marginBottom: "-3px",
+                                <img src="assets/closed.gif" alt="Closed" title="Closed" style={{marginBottom: "-1px",
                                   imageRendering: "pixelated",}} />
                                 <span>&nbsp;
                                     [
@@ -1060,10 +1060,10 @@ const Board = () => {
                                 &nbsp;
                                 <span className="thread-icons-mobile"
                                 style={{float: "right", marginRight: "18px"}}>
-                                  <img src="assets/sticky.gif" alt="Sticky" title="Sticky" style={{marginBottom: "-3px",
+                                  <img src="assets/sticky.gif" alt="Sticky" title="Sticky" style={{marginTop: "-1px", marginRight: "2px",
                                   imageRendering: "pixelated",}} />
                                   &nbsp;
-                                  <img src="assets/closed.gif" alt="Closed" title="Closed" style={{marginBottom: "-3px",
+                                  <img src="assets/closed.gif" alt="Closed" title="Closed" style={{marginTop: "-1px", marginRight: "2px",
                                   imageRendering: "pixelated",}} />
                                 </span>
                                 <br />
@@ -1228,7 +1228,7 @@ const Board = () => {
                                 <>
                                   &nbsp;
                                   <img src="assets/sticky.gif" alt="Sticky" title="Sticky"
-                                  style={{marginBottom: "-3px",
+                                  style={{marginBottom: "-1px",
                                   imageRendering: "pixelated",}} />
                                 </>
                               ) : null}
@@ -1237,7 +1237,7 @@ const Board = () => {
                                   &nbsp;
                                   <img src="assets/closed.gif" alt="Closed" title="Closed"
                                   style={{
-                                    marginBottom: "-3px",
+                                    marginBottom: "-1px",
                                     imageRendering: "pixelated",
                                     }} />
                                 </>
@@ -1990,12 +1990,12 @@ const Board = () => {
                               <span key={`ti-mob-${index}`} className="thread-icons-mobile" style={{float: "right", marginRight: "18px"}}>
                                 {thread.pinned ? (
                                   <img src="assets/sticky.gif" alt="Sticky" title="Sticky"
-                                  style={{marginBottom: "-3px", marginRight: "2px",
+                                  style={{marginTop: "-1px", marginRight: "2px",
                                   imageRendering: "pixelated",}} />
                                 ) : null}
                                 {thread.locked ? (
                                   <img src="assets/closed.gif" alt="Closed" title="Closed"
-                                  style={{marginBottom: "-3px", marginRight: "2px",
+                                  style={{marginTop: "-1px", marginRight: "2px",
                                   imageRendering: "pixelated",}} />
                                 ) : null}
                               </span>
diff --git a/src/components/views/Description.jsx b/src/components/views/Description.jsx
index 84c584a7..1120b019 100644
--- a/src/components/views/Description.jsx
+++ b/src/components/views/Description.jsx
@@ -309,9 +309,9 @@ const Description = () => {
                       &nbsp;
                       <span className="date-time">{getDate(subplebbit.createdAt)}</span>
                       &nbsp;
-                      <img src="assets/sticky.gif" alt="Sticky" title="Sticky" style={{marginBottom: "-3px", imageRendering: 'pixelated'}} />
+                      <img src="assets/sticky.gif" alt="Sticky" title="Sticky" style={{marginBottom: "-1px", imageRendering: 'pixelated'}} />
                       &nbsp;
-                      <img src="assets/closed.gif" alt="Closed" title="Closed" style={{marginBottom: "-3px", imageRendering: 'pixelated'}} />
+                      <img src="assets/closed.gif" alt="Closed" title="Closed" style={{marginBottom: "-1px", imageRendering: 'pixelated'}} />
                       <span>&nbsp;
                           [
                           <Link to={() => {}} style={{textDecoration: "none"}} className="reply-link">Reply</Link>
@@ -379,9 +379,9 @@ const Description = () => {
                       &nbsp;
                       <span className="thread-icons-mobile"
                       style={{float: "right", marginRight: "18px"}}>
-                        <img src="assets/sticky.gif" alt="Sticky" title="Sticky" style={{marginBottom: "-3px", imageRendering: 'pixelated'}} />
+                        <img src="assets/sticky.gif" alt="Sticky" title="Sticky" style={{marginTop: "-1px", marginRight: "2px", imageRendering: 'pixelated'}} />
                         &nbsp;
-                        <img src="assets/closed.gif" alt="Closed" title="Closed" style={{marginBottom: "-3px", imageRendering: 'pixelated'}} />
+                        <img src="assets/closed.gif" alt="Closed" title="Closed" style={{marginTop: "-1px", marginRight: "2px", imageRendering: 'pixelated'}} />
                       </span>
                       <br />
                       <span className="subject-mobile"
diff --git a/src/components/views/Rules.jsx b/src/components/views/Rules.jsx
index 6e320678..c7f4a6f0 100644
--- a/src/components/views/Rules.jsx
+++ b/src/components/views/Rules.jsx
@@ -284,9 +284,9 @@ const Rules = () => {
                       &nbsp;
                       <span className="date-time">{getDate(subplebbit.createdAt)}</span>
                       &nbsp;
-                      <img src="assets/sticky.gif" alt="Sticky" title="Sticky" style={{marginBottom: "-3px", imageRendering: 'pixelated'}} />
+                      <img src="assets/sticky.gif" alt="Sticky" title="Sticky" style={{marginBottom: "-1px", imageRendering: 'pixelated'}} />
                       &nbsp;
-                      <img src="assets/closed.gif" alt="Closed" title="Closed" style={{marginBottom: "-3px", imageRendering: 'pixelated'}} />
+                      <img src="assets/closed.gif" alt="Closed" title="Closed" style={{marginBottom: "-1px", imageRendering: 'pixelated'}} />
                       <span>&nbsp;
                           [
                           <Link to={() => {}} style={{textDecoration: "none"}} className="reply-link">Reply</Link>
@@ -359,9 +359,9 @@ const Rules = () => {
                       &nbsp;
                       <span className="thread-icons-mobile"
                       style={{float: "right", marginRight: "18px"}}>
-                        <img src="assets/sticky.gif" alt="Sticky" title="Sticky" style={{marginBottom: "-3px", imageRendering: 'pixelated'}} />
+                        <img src="assets/sticky.gif" alt="Sticky" title="Sticky" style={{marginTop: "-1px", marginRight: "2px", imageRendering: 'pixelated'}} />
                         &nbsp;
-                        <img src="assets/closed.gif" alt="Closed" title="Closed" style={{marginBottom: "-3px", imageRendering: 'pixelated'}} />
+                        <img src="assets/closed.gif" alt="Closed" title="Closed" style={{marginTop: "-1px", marginRight: "2px", imageRendering: 'pixelated'}} />
                       </span>
                       <br />
                       <span className="subject-mobile"
diff --git a/src/components/views/Thread.jsx b/src/components/views/Thread.jsx
index f27acf8d..5dc1c82e 100755
--- a/src/components/views/Thread.jsx
+++ b/src/components/views/Thread.jsx
@@ -893,7 +893,7 @@ const Thread = () => {
                           <>
                             &nbsp;
                             <img src="assets/sticky.gif" alt="Sticky" title="Sticky"
-                            style={{marginBottom: "-3px",
+                            style={{marginBottom: "-1px",
                             imageRendering: "pixelated",}} />
                           </>
                         ) : null}
@@ -901,7 +901,7 @@ const Thread = () => {
                           <>
                             &nbsp;
                             <img src="assets/closed.gif" alt="Closed" title="Closed"
-                            style={{marginBottom: "-3px",
+                            style={{marginBottom: "-1px",
                             imageRendering: "pixelated",}} />
                           </>
                         ) : null}