From ff142a361592d731a8f2ecefe3861b9a8fe36164 Mon Sep 17 00:00:00 2001
From: "plebeius.eth" <mottoes_recap0u@icloud.com>
Date: Wed, 28 Jun 2023 18:23:22 +0200
Subject: [PATCH] fix icons upscaling

---
 src/components/OfflineIndicator.jsx  |  1 +
 src/components/views/Board.jsx       | 38 +++++++++++++++++---------
 src/components/views/Catalog.jsx     | 40 +++++++++++++++++++++-------
 src/components/views/Description.jsx |  8 +++---
 src/components/views/Rules.jsx       |  8 +++---
 src/components/views/Thread.jsx      |  6 +++--
 6 files changed, 69 insertions(+), 32 deletions(-)

diff --git a/src/components/OfflineIndicator.jsx b/src/components/OfflineIndicator.jsx
index 5f017117..3630a222 100644
--- a/src/components/OfflineIndicator.jsx
+++ b/src/components/OfflineIndicator.jsx
@@ -17,6 +17,7 @@ const OfflineIndicator = ({ address, className, tooltipPlace }) => {
             data-tooltip-id="tooltip"
             data-tooltip-content="Offline"
             data-tooltip-place={tooltipPlace}
+            style={{imageRendering: 'pixelated'}}
           />
         </>
       )}
diff --git a/src/components/views/Board.jsx b/src/components/views/Board.jsx
index e0451dcc..e1089c42 100755
--- a/src/components/views/Board.jsx
+++ b/src/components/views/Board.jsx
@@ -836,9 +836,11 @@ 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: "-3px",
+                                  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: "-3px",
+                                  imageRendering: "pixelated",}} />
                                 <span>&nbsp;
                                     [
                                     <Link to={`/p/${selectedAddress}/rules`} style={{textDecoration: "none"}} className="reply-link">Reply</Link>
@@ -911,9 +913,11 @@ 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={{marginBottom: "-3px",
+                                  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: "-3px",
+                                  imageRendering: "pixelated",}} />
                                 </span>
                                 <br />
                                 <span className="subject-mobile"
@@ -981,9 +985,11 @@ 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: "-3px",
+                                  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: "-3px",
+                                  imageRendering: "pixelated",}} />
                                 <span>&nbsp;
                                     [
                                     <Link to={`/p/${selectedAddress}/description`} style={{textDecoration: "none"}} className="reply-link">Reply</Link>
@@ -1054,9 +1060,11 @@ 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={{marginBottom: "-3px",
+                                  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: "-3px",
+                                  imageRendering: "pixelated",}} />
                                 </span>
                                 <br />
                                 <span className="subject-mobile"
@@ -1220,14 +1228,18 @@ const Board = () => {
                                 <>
                                   &nbsp;
                                   <img src="assets/sticky.gif" alt="Sticky" title="Sticky"
-                                  style={{marginBottom: "-3px"}} />
+                                  style={{marginBottom: "-3px",
+                                  imageRendering: "pixelated",}} />
                                 </>
                               ) : null}
                               {thread.locked ? (
                                 <>
                                   &nbsp;
                                   <img src="assets/closed.gif" alt="Closed" title="Closed"
-                                  style={{marginBottom: "-3px"}} />
+                                  style={{
+                                    marginBottom: "-3px",
+                                    imageRendering: "pixelated",
+                                    }} />
                                 </>
                               ) : null}
                                 <span key={`rl1-${index}`}>&nbsp;
@@ -1978,11 +1990,13 @@ 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={{marginBottom: "-3px", marginRight: "2px",
+                                  imageRendering: "pixelated",}} />
                                 ) : null}
                                 {thread.locked ? (
                                   <img src="assets/closed.gif" alt="Closed" title="Closed"
-                                  style={{marginBottom: "-3px", marginRight: "2px"}} />
+                                  style={{marginBottom: "-3px", marginRight: "2px",
+                                  imageRendering: "pixelated",}} />
                                 ) : null}
                               </span>
                               <br key={`mob-br1-${index}`} />
diff --git a/src/components/views/Catalog.jsx b/src/components/views/Catalog.jsx
index e0bcfceb..b2971af5 100755
--- a/src/components/views/Catalog.jsx
+++ b/src/components/views/Catalog.jsx
@@ -706,8 +706,12 @@ const Catalog = () => {
                           R:<b>0</b>
                           <div className='thread-icons' 
                           style={{position: 'absolute', top: '-2px', right: '15px'}}>
-                            <span className="thread-icon sticky-icon" title="Sticky" />
-                            <span className="thread-icon closed-icon" title="Closed" />
+                            <span className="thread-icon sticky-icon" title="Sticky"
+                            style={{
+                              imageRendering: "pixelated",}} />
+                            <span className="thread-icon closed-icon" title="Closed"
+                            style={{
+                              imageRendering: "pixelated",}} />
                           </div>
                           <PostMenu 
                             style={{ display: isHoveringOnThread === "rules" ? 'inline-block' : 'none',
@@ -773,8 +777,12 @@ const Catalog = () => {
                       </Link>
                       {subplebbit.suggested?.avatarUrl ? (
                       <div className='thread-icons'>
-                        <span className="thread-icon sticky-icon" title="Sticky" />
-                        <span className="thread-icon closed-icon" title="Closed" />
+                        <span className="thread-icon sticky-icon" title="Sticky"
+                            style={{
+                              imageRendering: "pixelated",}} />
+                        <span className="thread-icon closed-icon" title="Closed"
+                            style={{
+                              imageRendering: "pixelated",}} />
                       </div>
                       ) : null}
                       <BoardForm selectedStyle={selectedStyle} style={{all: 'unset'}}>
@@ -783,8 +791,12 @@ const Catalog = () => {
                           {subplebbit.suggested?.avatarUrl ? null : (
                             <div className='thread-icons' 
                             style={{position: 'absolute', top: '-2px', right: '15px'}}>
-                              <span className="thread-icon sticky-icon" title="Sticky" />
-                              <span className="thread-icon closed-icon" title="Closed" />
+                              <span className="thread-icon sticky-icon" title="Sticky"
+                            style={{
+                              imageRendering: "pixelated",}} />
+                              <span className="thread-icon closed-icon" title="Closed"
+                            style={{
+                              imageRendering: "pixelated",}} />
                             </div>
                           )}
                           <PostMenu 
@@ -917,10 +929,14 @@ const Catalog = () => {
                           commentMediaInfo.thumbnail))) ? (
                           <div key={`ti-${index}`} className="thread-icons" >
                             {thread.pinned ? (
-                              <span key={`si-${index}`} className="thread-icon sticky-icon" title="Sticky" />
+                              <span key={`si-${index}`} className="thread-icon sticky-icon" title="Sticky"
+                              style={{
+                                imageRendering: "pixelated",}} />
                             ) : null}
                             {thread.locked ? (
-                              <span key={`li-${index}`} className="thread-icon closed-icon" title="Closed" />
+                              <span key={`li-${index}`} className="thread-icon closed-icon" title="Closed"
+                              style={{
+                                imageRendering: "pixelated",}} />
                             ) : null}
                           </div>
                           ) : null}
@@ -937,10 +953,14 @@ const Catalog = () => {
                                 <div className='thread-icons' 
                                 style={{position: 'absolute', top: '-2px', right: '15px'}}>
                                   {thread.pinned ? (
-                                    <span key={`si-${index}`} className="thread-icon sticky-icon" title="Sticky" />
+                                    <span key={`si-${index}`} className="thread-icon sticky-icon" title="Sticky"
+                                    style={{
+                                      imageRendering: "pixelated",}} />
                                   ) : null}
                                   {thread.locked ? (
-                                    <span key={`li-${index}`} className="thread-icon closed-icon" title="Closed" />
+                                    <span key={`li-${index}`} className="thread-icon closed-icon" title="Closed"
+                                    style={{
+                                      imageRendering: "pixelated",}} />
                                   ) : null}
                                 </div>
                               )}
diff --git a/src/components/views/Description.jsx b/src/components/views/Description.jsx
index 745f66ca..84c584a7 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"}} />
+                      <img src="assets/sticky.gif" alt="Sticky" title="Sticky" style={{marginBottom: "-3px", 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: "-3px", 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"}} />
+                        <img src="assets/sticky.gif" alt="Sticky" title="Sticky" style={{marginBottom: "-3px", 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: "-3px", imageRendering: 'pixelated'}} />
                       </span>
                       <br />
                       <span className="subject-mobile"
diff --git a/src/components/views/Rules.jsx b/src/components/views/Rules.jsx
index 8bb86f05..6e320678 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"}} />
+                      <img src="assets/sticky.gif" alt="Sticky" title="Sticky" style={{marginBottom: "-3px", 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: "-3px", 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"}} />
+                        <img src="assets/sticky.gif" alt="Sticky" title="Sticky" style={{marginBottom: "-3px", 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: "-3px", imageRendering: 'pixelated'}} />
                       </span>
                       <br />
                       <span className="subject-mobile"
diff --git a/src/components/views/Thread.jsx b/src/components/views/Thread.jsx
index fb346c51..f27acf8d 100755
--- a/src/components/views/Thread.jsx
+++ b/src/components/views/Thread.jsx
@@ -893,14 +893,16 @@ const Thread = () => {
                           <>
                             &nbsp;
                             <img src="assets/sticky.gif" alt="Sticky" title="Sticky"
-                            style={{marginBottom: "-3px"}} />
+                            style={{marginBottom: "-3px",
+                            imageRendering: "pixelated",}} />
                           </>
                         ) : null}
                         {comment.locked ? (
                           <>
                             &nbsp;
                             <img src="assets/closed.gif" alt="Closed" title="Closed"
-                            style={{marginBottom: "-3px"}} />
+                            style={{marginBottom: "-3px",
+                            imageRendering: "pixelated",}} />
                           </>
                         ) : null}
                         <PostMenu