From 6903784136143928c81b3c159d731c6b0ec0ac5d Mon Sep 17 00:00:00 2001
From: sepia <soerxpso@gmail.com>
Date: Wed, 23 Jul 2025 21:22:45 -0500
Subject: [PATCH] Restyle buttons

---
 public/style.css           | 51 ++++++++++++++++++++++++++++++--------
 src/web-socket-handler.tsx | 18 +++++++-------
 2 files changed, 50 insertions(+), 19 deletions(-)

diff --git a/public/style.css b/public/style.css
index 69d964b..d4b2ff0 100644
--- a/public/style.css
+++ b/public/style.css
@@ -230,9 +230,7 @@ body {
   vertical-align: middle;
 }
 
-button {
-  background-color: var(--color-primary);
-  color: var(--color-on-primary);
+#button-box button {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -242,12 +240,9 @@ button {
   white-space: nowrap;
   border: none;
   cursor: pointer;
-  gap: 8px;
   font-size: 1em;
-}
-
-button:hover {
-  background-color: var(--color-primary-light);
+  flex-grow: 1;
+  flex-basis: 0;
 }
 
 #button-box {
@@ -260,12 +255,12 @@ button:hover {
 }
 
 #resign-button {
-  background-color: var(--color-error);
+  background-color: var(--color-primary);
   color: var(--color-on-primary);
 }
 
 #resign-button:hover {
-  background-color: var(--color-error-light);
+  background-color: var(--color-primary-light);
 }
 
 #copy-link-button {
@@ -277,6 +272,42 @@ button:hover {
   background-color: var(--color-success);
 }
 
+#takeback-button {
+  background-color: var(--color-info);
+  color: var(--color-on-primary);
+}
+
+#takeback-button:hover {
+  background-color: var(--color-info-light);
+}
+
+#draw-button {
+  background-color: var(--color-secondary);
+  color: var(--color-on-secondary);
+}
+
+#draw-button:hover {
+  background-color: var(--color-secondary-light);
+}
+
+.accept-button {
+  background-color: var(--color-success);
+  color: var(--color-on-primary);
+}
+
+.accept-button:hover {
+  background-color: var(--color-success-light);
+}
+
+.decline-button {
+  background-color: var(--color-error);
+  color: var(--color-on-primary);
+}
+
+.decline-button:hover {
+  background-color: var(--color-error-light);
+}
+
 .player-profile-box {
   position: absolute;
   top: 20px;
diff --git a/src/web-socket-handler.tsx b/src/web-socket-handler.tsx
index acf5d11..8187cbf 100644
--- a/src/web-socket-handler.tsx
+++ b/src/web-socket-handler.tsx
@@ -148,7 +148,7 @@ class GameServer {
       if (this.takebackRequesterId) {
         if (this.takebackRequesterId === conn.id) {
           buttons.push(
-            <button id="cancel-takeback-request-button" ws-send="click">
+            <button id="cancel-takeback-request-button" class="decline-button" ws-send="click">
               <svg class="icon" alt="Cancel">
                 <use href="/icons/decline.svg"></use>
               </svg>
@@ -157,7 +157,7 @@ class GameServer {
           );
         } else {
           buttons.push(
-            <button id="accept-takeback-button" ws-send="click">
+            <button id="accept-takeback-button" class="accept-button" ws-send="click">
               <svg class="icon" alt="Accept">
                 <use href="/icons/accept.svg"></use>
               </svg>
@@ -165,7 +165,7 @@ class GameServer {
             </button>,
           );
           buttons.push(
-            <button id="decline-takeback-button" ws-send="click">
+            <button id="decline-takeback-button" class="decline-button" ws-send="click">
               <svg class="icon" alt="Decline">
                 <use href="/icons/decline.svg"></use>
               </svg>
@@ -176,7 +176,7 @@ class GameServer {
       } else if (this.drawRequesterId) {
         if (this.drawRequesterId === conn.id) {
           buttons.push(
-            <button id="cancel-draw-request-button" ws-send="click">
+            <button id="cancel-draw-request-button" class="decline-button" ws-send="click">
               <svg class="icon" alt="Cancel">
                 <use href="/icons/decline.svg"></use>
               </svg>
@@ -185,7 +185,7 @@ class GameServer {
           );
         } else {
           buttons.push(
-            <button id="accept-draw-button" ws-send="click">
+            <button id="accept-draw-button" class="accept-button" ws-send="click">
               <svg class="icon" alt="Accept">
                 <use href="/icons/accept.svg"></use>
               </svg>
@@ -193,7 +193,7 @@ class GameServer {
             </button>,
           );
           buttons.push(
-            <button id="decline-draw-button" ws-send="click">
+            <button id="decline-draw-button" class="decline-button" ws-send="click">
               <svg class="icon" alt="Decline">
                 <use href="/icons/decline.svg"></use>
               </svg>
@@ -231,7 +231,7 @@ class GameServer {
       if (this.rematchRequesterId) {
         if (this.rematchRequesterId === conn.id) {
           buttons.push(
-            <button id="cancel-rematch-request-button" ws-send="click">
+            <button id="cancel-rematch-request-button" class="decline-button" ws-send="click">
               <svg class="icon" alt="Cancel">
                 <use href="/icons/decline.svg"></use>
               </svg>
@@ -240,7 +240,7 @@ class GameServer {
           );
         } else {
           buttons.push(
-            <button id="accept-rematch-button" ws-send="click">
+            <button id="accept-rematch-button" class="accept-button" ws-send="click">
               <svg class="icon" alt="Accept">
                 <use href="/icons/accept.svg"></use>
               </svg>
@@ -248,7 +248,7 @@ class GameServer {
             </button>,
           );
           buttons.push(
-            <button id="decline-rematch-button" ws-send="click">
+            <button id="decline-rematch-button" class="decline-button" ws-send="click">
               <svg class="icon" alt="Decline">
                 <use href="/icons/decline.svg"></use>
               </svg>