From 631a359edda2257ee5372646c056a6c01c761413 Mon Sep 17 00:00:00 2001
From: "plebeius.eth" <mottoes_recap0u@icloud.com>
Date: Fri, 29 Sep 2023 12:31:05 +0200
Subject: [PATCH] style(modals): add pixelated image rendering for button icons

---
 src/components/modals/AdminListModal.jsx      |   2 +-
 .../styled/modals/CaptchaModal.styled.jsx     | 185 +++++++++---------
 .../styled/modals/CreateBoardModal.styled.jsx |  26 +--
 .../styled/modals/ModerationModal.styled.jsx  |  24 +--
 .../styled/modals/ReplyModal.styled.jsx       |  17 +-
 .../styled/modals/SettingsModal.styled.jsx    |   2 +
 6 files changed, 132 insertions(+), 124 deletions(-)

diff --git a/src/components/modals/AdminListModal.jsx b/src/components/modals/AdminListModal.jsx
index c4f22971..033b673f 100644
--- a/src/components/modals/AdminListModal.jsx
+++ b/src/components/modals/AdminListModal.jsx
@@ -43,7 +43,7 @@ const AdminListModal = ({ isOpen, closeModal, roles }) => {
             maxHeight: '250px',
           }}
         >
-          <button className='icon' onClick={() => closeModal()} title='close' />
+          <button className='icon' style={{ imageRendering: 'pixelated', margin: '1px 1px 0 0' }} onClick={() => closeModal()} title='close' />
           <div className='modal-header'>   Moderators</div>
           <div
             className='list'
diff --git a/src/components/styled/modals/CaptchaModal.styled.jsx b/src/components/styled/modals/CaptchaModal.styled.jsx
index aa22844e..3807bd41 100644
--- a/src/components/styled/modals/CaptchaModal.styled.jsx
+++ b/src/components/styled/modals/CaptchaModal.styled.jsx
@@ -2,94 +2,95 @@ import styled from 'styled-components';
 import Modal from 'react-modal';
 
 export const StyledModal = styled(Modal)`
-	.hide-modal-overlay {
-		display: none;
-	}
+  .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-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;
-	}
+  .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;
-	}
+  .icon {
+    all: unset;
+    float: right;
+    cursor: pointer;
+    margin-bottom: -4px;
+    width: 18px;
+    height: 18px;
+    border: none;
+    image-rendering: pixelated;
+  }
 
-	#field {
-		border: 1px solid #aaa;
-		font-family: Arial, Helvetica, sans-serif;
-		font-size: 10pt;
-		outline: medium none;
-		width: 298px;
-		padding: 2px;
-	}
+  #field {
+    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;
-	}
+  textarea {
+    min-width: 296px;
+    float: left;
+    font-size: 10pt;
+    font-family: Arial, Helvetica, sans-serif;
+  }
 
-	#captcha-container {
-		position: relative;
-		width: 302px;
-		height: 100px;
-		overflow: hidden;
-		margin-bottom: 17px;
-	}
+  #captcha-container {
+    position: relative;
+    width: 302px;
+    height: 100px;
+    overflow: hidden;
+    margin-bottom: 17px;
+  }
 
-	#response {
-		width: 100%;
-		box-sizing: border-box;
-		font-size: 11px;
-		height: 18px;
-		margin: 0px;
-		padding: 0px 2px;
-		font-family: monospace;
-		vertical-align: middle;
-	}
+  #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%;
-		position: relative;
-		display: block;
-	}
+  img {
+    height: 100%;
+    width: 100%;
+    position: relative;
+    display: block;
+  }
 
-	#nav {
-		float: right;
-		margin: 0;
-		width: auto;
-	}
+  #nav {
+    float: right;
+    margin: 0;
+    width: auto;
+  }
 
-	${({ selectedStyle }) => {
-		switch (selectedStyle) {
-			case 'Yotsuba':
-				return `
+  ${({ selectedStyle }) => {
+    switch (selectedStyle) {
+      case 'Yotsuba':
+        return `
         .modal-content {
           background-color: #f0e0d6;
           border: 1px solid #d9bfb7;
@@ -109,8 +110,8 @@ export const StyledModal = styled(Modal)`
           color: maroon;
         }`;
 
-			case 'Yotsuba-B':
-				return `
+      case 'Yotsuba-B':
+        return `
         .modal-content {
           background-color: #d6daf0;
           border: 1px solid #b7c5d9;
@@ -130,8 +131,8 @@ export const StyledModal = styled(Modal)`
           color: #000;
         }`;
 
-			case 'Futaba':
-				return `
+      case 'Futaba':
+        return `
         .modal-content {
           background-color: #f0e0d6;
           border: 1px solid #d9bfb7;
@@ -151,8 +152,8 @@ export const StyledModal = styled(Modal)`
           color: maroon;
         }`;
 
-			case 'Burichan':
-				return `
+      case 'Burichan':
+        return `
         .modal-content {
           background-color: #d6daf0;
           border: 1px solid #b7c5d9;
@@ -172,8 +173,8 @@ export const StyledModal = styled(Modal)`
           color: #000;
         }`;
 
-			case 'Tomorrow':
-				return `
+      case 'Tomorrow':
+        return `
         .modal-content {
           background-color: #282a2e;
           border: 1px solid #111;
@@ -216,8 +217,8 @@ export const StyledModal = styled(Modal)`
           filter: brightness(80%);
         }`;
 
-			case 'Photon':
-				return `
+      case 'Photon':
+        return `
         .modal-content {
           background-color: #ddd;
           border: 1px solid #ccc;
@@ -236,8 +237,8 @@ export const StyledModal = styled(Modal)`
           color: #333;
         }`;
 
-			default:
-				return '';
-		}
-	}}
+      default:
+        return '';
+    }
+  }}
 `;
diff --git a/src/components/styled/modals/CreateBoardModal.styled.jsx b/src/components/styled/modals/CreateBoardModal.styled.jsx
index 4e4cc074..bd9fd32c 100644
--- a/src/components/styled/modals/CreateBoardModal.styled.jsx
+++ b/src/components/styled/modals/CreateBoardModal.styled.jsx
@@ -1,5 +1,5 @@
-import styled from "styled-components";
-import Modal from "react-modal";
+import styled from 'styled-components';
+import Modal from 'react-modal';
 
 export const StyledModal = styled(Modal)`
   .modal-content {
@@ -9,10 +9,10 @@ export const StyledModal = styled(Modal)`
     transform: translate(-50%, -50%);
     width: 450px;
     height: auto;
-    max-height: calc(100vh - 2*50px);
+    max-height: calc(100vh - 2 * 50px);
     overflow-y: auto;
     padding: 5px;
-    box-shadow: 0 0 5px rgba(0, 0, 0, .25);
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
   }
 
   .modal-header {
@@ -33,9 +33,12 @@ export const StyledModal = styled(Modal)`
     width: 18px;
     height: 18px;
     border: none;
+    image-rendering: pixelated;
   }
 
-  #name, #description, #rule {
+  #name,
+  #description,
+  #rule {
     border: 1px solid #aaa;
     font-family: Arial, Helvetica, sans-serif;
     font-size: 10pt;
@@ -73,7 +76,6 @@ export const StyledModal = styled(Modal)`
   }
 
   #rule {
-    
   }
 
   #rule-btn {
@@ -324,10 +326,10 @@ export const StyledModal = styled(Modal)`
 
         span {
           color: #000;
-        }`; 
-        
-        default:
-          return '';
-      }
+        }`;
+
+      default:
+        return '';
+    }
   }}
-`;
\ No newline at end of file
+`;
diff --git a/src/components/styled/modals/ModerationModal.styled.jsx b/src/components/styled/modals/ModerationModal.styled.jsx
index 6cc9655c..6bdf9f5b 100644
--- a/src/components/styled/modals/ModerationModal.styled.jsx
+++ b/src/components/styled/modals/ModerationModal.styled.jsx
@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import styled from 'styled-components';
 import Modal from 'react-modal';
 
 export const StyledModal = styled(Modal)`
@@ -13,7 +13,7 @@ export const StyledModal = styled(Modal)`
     position: absolute;
     padding: 2px 5px 5px;
     font-size: 14px;
-    box-shadow: 0 0 5px rgba(0, 0, 0, .25);
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
 
     @media (max-width: 480px) {
       width: 320px !important;
@@ -27,12 +27,12 @@ export const StyledModal = styled(Modal)`
     width: 700px;
     height: auto;
     max-height: 80%;
-    left: calc(50% - 350px); 
+    left: calc(50% - 350px);
     overflow-y: auto;
     position: absolute;
     padding: 2px 5px 5px;
     font-size: 14px;
-    box-shadow: 0 0 5px rgba(0, 0, 0, .25);
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
 
     @media (max-width: 800px) {
       width: 80%;
@@ -66,6 +66,7 @@ export const StyledModal = styled(Modal)`
     cursor: pointer;
     position: absolute;
     top: 5px;
+    image-rendering: pixelated;
   }
 
   h4 {
@@ -171,7 +172,8 @@ export const StyledModal = styled(Modal)`
     margin-bottom: 10px;
   }
 
-  #save-board-settings, #reset-board-settings {
+  #save-board-settings,
+  #reset-board-settings {
     text-align: center;
   }
 
@@ -184,7 +186,7 @@ export const StyledModal = styled(Modal)`
   }
 
   .settings-info strong {
-      margin-bottom: 10px;
+    margin-bottom: 10px;
   }
 
   ${({ selectedStyle }) => {
@@ -378,9 +380,9 @@ export const StyledModal = styled(Modal)`
             color: #f30 !important;
           }
         }`;
-        
-        default:
-          return '';
-      }
+
+      default:
+        return '';
+    }
   }}
-`;
\ No newline at end of file
+`;
diff --git a/src/components/styled/modals/ReplyModal.styled.jsx b/src/components/styled/modals/ReplyModal.styled.jsx
index ae46d0c0..e32c0c8e 100644
--- a/src/components/styled/modals/ReplyModal.styled.jsx
+++ b/src/components/styled/modals/ReplyModal.styled.jsx
@@ -1,5 +1,5 @@
-import styled from "styled-components";
-import Modal from "react-modal";
+import styled from 'styled-components';
+import Modal from 'react-modal';
 
 export const StyledModal = styled(Modal)`
   .modal-content {
@@ -32,6 +32,7 @@ export const StyledModal = styled(Modal)`
     width: 18px;
     height: 18px;
     border: none;
+    image-rendering: pixelated;
   }
 
   #name {
@@ -249,10 +250,10 @@ export const StyledModal = styled(Modal)`
 
         span {
           color: #000;
-        }`; 
-        
-        default:
-          return '';
-      }
+        }`;
+
+      default:
+        return '';
+    }
   }}
-`;
\ No newline at end of file
+`;
diff --git a/src/components/styled/modals/SettingsModal.styled.jsx b/src/components/styled/modals/SettingsModal.styled.jsx
index 8037d0d7..a86059e3 100644
--- a/src/components/styled/modals/SettingsModal.styled.jsx
+++ b/src/components/styled/modals/SettingsModal.styled.jsx
@@ -50,6 +50,7 @@ export const StyledModal = styled(Modal)`
     cursor: pointer;
     position: absolute;
     top: 5px;
+    image-rendering: pixelated;
   }
 
   h4 {
@@ -80,6 +81,7 @@ export const StyledModal = styled(Modal)`
     background-repeat: no-repeat;
     background-position: center;
     display: inline-block;
+    image-rendering: pixelated;
   }
 
   .settings-cat {