From a9754a36861fbec0a8b21ad46c6ef6256044fe2d Mon Sep 17 00:00:00 2001
From: plebeius <tom@plebbit.com>
Date: Tue, 4 Nov 2025 17:33:29 +0100
Subject: [PATCH] style(home): add close button icon to disclaimer modal

---
 public/assets/buttons/icon-close-red.png      | Bin 0 -> 209 bytes
 .../disclaimer-modal.module.css               |  24 +++++-------------
 .../disclaimer-modal/disclaimer-modal.tsx     |   4 +--
 src/themes.css                                |   4 +++
 4 files changed, 11 insertions(+), 21 deletions(-)
 create mode 100644 public/assets/buttons/icon-close-red.png

diff --git a/public/assets/buttons/icon-close-red.png b/public/assets/buttons/icon-close-red.png
new file mode 100644
index 0000000000000000000000000000000000000000..28f809fcdd9bb2dac84a096459c072231ea65932
GIT binary patch
literal 209
zcmV;?051QDP)<h;3K|Lk000e1NJLTq000mG000mO0{{R3C@l|D0000mP)t-s=+DpM
zz`)+Pxa7pd>(tbuI5_6X$=R;1+_STwGc&DFQ0L6d<;TbW|Nq2*fQSG9*09Vc00017
zNkl<Zc-m#p%MO4r2t-l(P-|P5|NmQcurb8h-IK6DU||qLnBCCls&*2xR_~#WfTH3(
z;ee^)?LZmc3$QEugAsuD;e;Vt7O)>l4#^v+dJuZXyR;F)?Dzf!E1eB%v%dRu00000
LNkvXXu0mjfT5Dfm

literal 0
HcmV?d00001

diff --git a/src/components/disclaimer-modal/disclaimer-modal.module.css b/src/components/disclaimer-modal/disclaimer-modal.module.css
index 1bf00443..9bcceb60 100644
--- a/src/components/disclaimer-modal/disclaimer-modal.module.css
+++ b/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);
-}
-
diff --git a/src/components/disclaimer-modal/disclaimer-modal.tsx b/src/components/disclaimer-modal/disclaimer-modal.tsx
index a2ca3b24..fe86ee81 100644
--- a/src/components/disclaimer-modal/disclaimer-modal.tsx
+++ b/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>
+          <button className={styles.closeButton} 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>
diff --git a/src/themes.css b/src/themes.css
index 93e6b01c..3da8c039 100644
--- a/src/themes.css
+++ b/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;