feat(modals): use icon-close-red.png for close buttons on home view

src/components/directory-modal/directory-modal.module.css

@@ -24,7 +24,7 @@
   box-shadow: rgba(0, 0, 0, 0.1) 2px 2px 0px 1px;
   font-family: arial, helvetica, clean, sans-serif;
   font-size: 13px;
-  line-height: 16.003px;
+  line-height: 18px;
   z-index: 1000;
 }
 
@@ -57,8 +57,8 @@
 .closeButton {
   all: unset;
   cursor: pointer;
-  width: 16px;
-  height: 16px;
+  width: 18px;
+  height: 18px;
   position: absolute;
   top: 4px;
   right: 4px;
@@ -66,6 +66,14 @@
   background-size: 100%;
   background-position: center;
   background-repeat: no-repeat;
+  image-rendering: pixelated;
+}
+
+.closeButtonHome {
+  width: 16px;
+  height: 16px;
+  background-image: url("/assets/buttons/icon-close-red.png");
+  image-rendering: auto;
 }
 
 .bd {

src/components/directory-modal/directory-modal.tsx

@@ -22,7 +22,7 @@ const DirectoryModal = () => {
       <div className={styles.directoryDialog}>
         <div className={styles.hd}>
           <h2>Submit a Board to a Directory</h2>
-          <button className={styles.closeButton} onClick={closeDirectoryModal} title='Close' />
+          <button className={`${styles.closeButton} ${isHomeView ? styles.closeButtonHome : ''}`} onClick={closeDirectoryModal} title='Close' />
         </div>
         <div className={styles.bd}>
           <p className={styles.introMessage}>

src/components/disclaimer-modal/disclaimer-modal.module.css

@@ -55,6 +55,10 @@
   background-repeat: no-repeat;
 }
 
+.closeButtonHome {
+  background-image: url("/assets/buttons/icon-close-red.png");
+}
+
 .bd {
   padding: 10px;
 }

src/components/disclaimer-modal/disclaimer-modal.tsx

@@ -1,10 +1,12 @@
-import { useNavigate } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 import useDisclaimerModalStore from '../../stores/use-disclaimer-modal-store';
 import useDirectoryModalStore from '../../stores/use-directory-modal-store';
 import styles from './disclaimer-modal.module.css';
 
 const DisclaimerModal = () => {
   const navigate = useNavigate();
+  const location = useLocation();
+  const isHomeView = location.pathname === '/';
   const { showModal, closeDisclaimerModal, acceptDisclaimer, targetBoardPath } = useDisclaimerModalStore();
   const { openDirectoryModal } = useDirectoryModalStore();
 
@@ -33,7 +35,7 @@ const DisclaimerModal = () => {
       <div className={styles.disclaimerDialog}>
         <div className={styles.hd}>
           <h2>Disclaimer</h2>
-          <button className={styles.closeButton} onClick={closeDisclaimerModal} title='Close' />
+          <button className={`${styles.closeButton} ${isHomeView ? styles.closeButtonHome : ''}`} onClick={closeDisclaimerModal} title='Close' />
         </div>
         <div className={styles.bd}>
           <p>To access boards on 5chan (the &quot;website&quot;), you understand and agree to the following:</p>

src/themes.css

@@ -78,6 +78,7 @@
   --directory-modal-header-background-color: rgb(136, 0, 0);
   --directory-modal-header-text-color: rgb(255, 255, 255);
   --directory-modal-close-button-background-image: url("/assets/buttons/cross-red.png");
+  --disclaimer-modal-close-button-background-image: url("/assets/buttons/cross-red.png");
   
 
   /* footer */
@@ -297,6 +298,7 @@
   --directory-modal-header-background-color: #98e;
   --directory-modal-header-text-color: #000;
   --directory-modal-close-button-background-image: url("/assets/buttons/cross-blue.png");
+  --disclaimer-modal-close-button-background-image: url("/assets/buttons/cross-blue.png");
 
   /* horizontal rule */
   --hr-border: none;
@@ -503,6 +505,7 @@
   --directory-modal-header-background-color: #ea8;
   --directory-modal-header-text-color: #800;
   --directory-modal-close-button-background-image: url("/assets/buttons/cross-red.png");
+  --disclaimer-modal-close-button-background-image: url("/assets/buttons/cross-red.png");
 
   /* footer */
   --footer-item-background-color-desktop: #fed;
@@ -700,6 +703,7 @@
   --directory-modal-header-background-color: #98e;
   --directory-modal-header-text-color: #000;
   --directory-modal-close-button-background-image: url("/assets/buttons/cross-blue.png");
+  --disclaimer-modal-close-button-background-image: url("/assets/buttons/cross-blue.png");
 
   /* media */
   --media-thumbnail-background-color: rgba(0, 0, 0, 0.05);
@@ -897,6 +901,7 @@
   --directory-modal-header-background-color: #282a2e;
   --directory-modal-header-text-color: #c5c8c6;
   --directory-modal-close-button-background-image: url("/assets/buttons/cross-dark.png");
+  --disclaimer-modal-close-button-background-image: url("/assets/buttons/cross-dark.png");
 
   /* horizontal rule */
   --hr-border: none;
@@ -1243,6 +1248,7 @@
   --directory-modal-header-background-color: #ddd;
   --directory-modal-header-text-color: #333;
   --directory-modal-close-button-background-image: url("/assets/buttons/cross-photon.png");
+  --disclaimer-modal-close-button-background-image: url("/assets/buttons/cross-photon.png");
 
   /* stats */
   --stats-font-size: 11px;