style(modals): add pixelated image rendering for button icons

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'

src/components/styled/modals/CaptchaModal.styled.jsx

@@ -36,6 +36,7 @@ export const StyledModal = styled(Modal)`
     width: 18px;
     height: 18px;
     border: none;
+    image-rendering: pixelated;
   }
 
   #field {

src/components/styled/modals/CreateBoardModal.styled.jsx

@@ -1,5 +1,5 @@
-import styled from "styled-components";
+import styled from 'styled-components';
-import Modal from "react-modal";
+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 {

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;
@@ -32,7 +32,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: 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;
   }
 

src/components/styled/modals/ReplyModal.styled.jsx

@@ -1,5 +1,5 @@
-import styled from "styled-components";
+import styled from 'styled-components';
-import Modal from "react-modal";
+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 {

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 {