style(home): add close button icon to disclaimer modal

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

@@ -36,7 +36,7 @@
 .hd h2 {
   margin: 0;
   padding: 0;
-  font-size: 13px;
+  font-size: 131%;
   font-weight: bold;
 }
 
@@ -50,6 +50,10 @@
   height: 18px;
   text-align: center;
   user-select: none;
+  background-image: var(--disclaimer-modal-close-button-background-image);
+  background-size: 100%;
+  background-position: center;
+  background-repeat: no-repeat;
 }
 
 .closeButton:hover {
@@ -81,22 +85,6 @@
 .disclaimerFooter {
   padding: 10px;
   display: flex;
-  justify-content: flex-end;
+  justify-content: center;
   gap: 10px;
-  border-top: 1px solid rgb(136, 0, 0);
 }
-
-.disclaimerFooter button {
-  padding: 4px 12px;
-  border: 1px solid rgb(136, 0, 0);
-  background-color: rgb(255, 255, 255);
-  color: rgb(136, 0, 0);
-  cursor: pointer;
-  font-size: 13px;
-  font-family: arial, helvetica, clean, sans-serif;
-}
-
-.disclaimerFooter button:hover {
-  background-color: rgb(250, 250, 250);
-}
-

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

@@ -25,9 +25,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} onClick={closeDisclaimerModal} title='Close' />
-            ×
-          </button>
         </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

@@ -72,6 +72,7 @@
   --homepage-box-link-text-color-hover: #e00;
   --homepage-box-link-text-decoration: none;
   --homepage-box-link-text-decoration-hover: underline;
+  --disclaimer-modal-close-button-background-image: url("/assets/buttons/icon-close-red.png");
 
   /* footer */
   --footer-item-background-color-desktop: #fed;
@@ -284,6 +285,7 @@
   --homepage-box-link-text-color-hover: #d00;
   --homepage-box-link-text-decoration: none;
   --homepage-box-link-text-decoration-hover: underline;
+  --disclaimer-modal-close-button-background-image: url("/assets/buttons/icon-close-red.png");
 
   /* horizontal rule */
   --hr-border: none;
@@ -673,6 +675,7 @@
   --homepage-box-bar-text-color: #000;
   --homepage-box-bar-background-color: #98e;
   --homepage-box-bar-text-color-hover: #fff;
+  --disclaimer-modal-close-button-background-image: url("/assets/buttons/icon-close-red.png");
 
   /* media */
   --media-thumbnail-background-color: rgba(0, 0, 0, 0.05);
@@ -864,6 +867,7 @@
   --homepage-box-border-color: rgb(45, 47, 51);
   --homepage-box-bar-text-color: #c5c8c6;
   --homepage-box-bar-text-color-hover: #c5c8c6;
+  --disclaimer-modal-close-button-background-image: url("/assets/buttons/icon-close-red.png");
 
   /* horizontal rule */
   --hr-border: none;