Restyle button box to remove text from buttons

public/style.css

@@ -208,7 +208,8 @@ body {
   justify-content: center;
   align-items: center;
   transition: opacity 0.3s ease;
-  padding: 8px 15px;
+  padding: 15px 8px;
+  margin: 0px 6px;
   border-radius: 5px;
   white-space: nowrap;
   border: none;
@@ -220,13 +221,18 @@ body {
 
 #button-box {
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
-  flex-wrap: nowrap;
   justify-content: center;
   gap: 10px;
   margin-top: 20px;
 }
 
+#button-box-buttons {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+}
+
 #resign-button {
   background-color: var(--color-primary);
   color: var(--color-on-primary);

src/web-socket-handler.tsx

@@ -154,10 +154,12 @@ class GameServer {
 
   public broadcastButtonsToPlayer(conn: PlayerConnection) {
     const buttons: JSX.Element[] = [];
+    let title: string | undefined;
 
     if (this.gomoku.status == 'playing' && this.getPlayerColor(conn)) {
       if (this.takebackRequesterId) {
         if (this.takebackRequesterId === conn.id) {
+          title = 'You requested a takeback';
           buttons.push(
             <button
               id="cancel-takeback-request-button"
@@ -167,10 +169,10 @@ class GameServer {
               <svg class="icon" alt="Cancel">
                 <use href="/icons/decline.svg"></use>
               </svg>
-              Cancel Takeback Request
             </button>,
           );
         } else {
+          title = 'Your opponent requests a takeback';
           buttons.push(
             <button
               id="accept-takeback-button"
@@ -180,7 +182,6 @@ class GameServer {
               <svg class="icon" alt="Accept">
                 <use href="/icons/accept.svg"></use>
               </svg>
-              Accept Takeback
             </button>,
           );
           buttons.push(
@@ -192,12 +193,12 @@ class GameServer {
               <svg class="icon" alt="Decline">
                 <use href="/icons/decline.svg"></use>
               </svg>
-              Decline Takeback
             </button>,
           );
         }
       } else if (this.drawRequesterId) {
         if (this.drawRequesterId === conn.id) {
+          title = 'You requested a draw';
           buttons.push(
             <button
               id="cancel-draw-request-button"
@@ -207,10 +208,10 @@ class GameServer {
               <svg class="icon" alt="Cancel">
                 <use href="/icons/decline.svg"></use>
               </svg>
-              Cancel Draw Request
             </button>,
           );
         } else {
+          title = 'Your opponent offers a draw';
           buttons.push(
             <button
               id="accept-draw-button"
@@ -220,7 +221,6 @@ class GameServer {
               <svg class="icon" alt="Accept">
                 <use href="/icons/accept.svg"></use>
               </svg>
-              Accept Draw
             </button>,
           );
           buttons.push(
@@ -232,7 +232,6 @@ class GameServer {
               <svg class="icon" alt="Decline">
                 <use href="/icons/decline.svg"></use>
               </svg>
-              Decline Draw
             </button>,
           );
         }
@@ -242,7 +241,6 @@ class GameServer {
             <svg class="icon" alt="Resign">
               <use href="/icons/resign.svg"></use>
             </svg>
-            Resign
           </button>,
         );
         buttons.push(
@@ -250,7 +248,6 @@ class GameServer {
             <svg class="icon" alt="Takeback">
               <use href="/icons/undo.svg"></use>
             </svg>
-            Takeback
           </button>,
         );
         buttons.push(
@@ -258,13 +255,13 @@ class GameServer {
             <svg class="icon" alt="Draw">
               <use href="/icons/draw.svg"></use>
             </svg>
-            Draw
           </button>,
         );
       }
     } else if (this.gomoku.status === 'finished') {
       if (this.rematchRequesterId) {
         if (this.rematchRequesterId === conn.id) {
+          title = 'You requested a rematch';
           buttons.push(
             <button
               id="cancel-rematch-request-button"
@@ -274,10 +271,10 @@ class GameServer {
               <svg class="icon" alt="Cancel">
                 <use href="/icons/decline.svg"></use>
               </svg>
-              Cancel Rematch Request
             </button>,
           );
         } else {
+          title = 'Your opponent requests a rematch';
           buttons.push(
             <button
               id="accept-rematch-button"
@@ -287,7 +284,6 @@ class GameServer {
               <svg class="icon" alt="Accept">
                 <use href="/icons/accept.svg"></use>
               </svg>
-              Accept Rematch
             </button>,
           );
           buttons.push(
@@ -299,7 +295,6 @@ class GameServer {
               <svg class="icon" alt="Decline">
                 <use href="/icons/decline.svg"></use>
               </svg>
-              Decline Rematch
             </button>,
           );
         }
@@ -309,7 +304,6 @@ class GameServer {
             <svg class="icon" alt="Rematch">
               <use href="/icons/rotate-right.svg"></use>
             </svg>
-            Rematch
           </button>,
         );
       }
@@ -319,12 +313,17 @@ class GameServer {
           <svg class="icon" alt="Copy">
             <use href="/icons/clipboard-copy.svg"></use>
           </svg>
-          <span id="copy-link-text">Click to copy game link!</span>
+          <span id="copy-link-text">Copy Link</span>
         </button>,
       );
     }
 
-    conn.ws.send(<div id="button-box">{buttons}</div>);
+    conn.ws.send(
+      <div id="button-box">
+        <div id="button-box-title">{title}</div>
+        <div id="button-box-buttons">{buttons}</div>
+      </div>,
+    );
     console.log(`Sent buttons for game ${this.id} to player ${conn.id}`);
   }