From 563ae3f90a785e7eee11b09ce58320b40e9f60cd Mon Sep 17 00:00:00 2001
From: Martin I <33766476+martinIvovIv@users.noreply.github.com>
Date: Fri, 6 Feb 2026 18:42:10 +0100
Subject: [PATCH] fix; improvement proposal for the leaderboard buttons (#3107)

## Description:

Changes the leaderboard buttons to look more like other buttons per
suggestion by @FloPinguin

## Please complete the following:

- [x] I have added screenshots for all UI updates
- [x] I process any text displayed to the user through translateText()
and I've added it to the en.json file
- [x] I have added relevant tests to the test directory
- [x] I confirm I have thoroughly tested these changes and take full
responsibility for any bugs introduced

***
Screenshots:

Before change:
<img width="306" height="164" alt="image"
src="https://github.com/user-attachments/assets/3ff5648c-b088-4d3e-a608-901c2e8d0402"
/>

After change:
<img width="263" height="169" alt="image"
src="https://github.com/user-attachments/assets/983f7d50-0c40-4365-9f34-d64a18e69c68"
/>

After change hover:
<img width="315" height="221" alt="image"
src="https://github.com/user-attachments/assets/e56746ae-9e65-437a-b27c-60ac6ab52d6c"
/>

Mobile:
<img width="297" height="251" alt="image"
src="https://github.com/user-attachments/assets/66f6de72-5002-4da9-95d9-63f67b6136e3"
/>


##Discord username: martoi

***
Signed-off-by: MartinIvovIv <https://github.com/martinIvovIv>
---
 src/client/graphics/layers/GameLeftSidebar.ts | 25 +++++++++++++++++--
 1 file changed, 23 insertions(+), 2 deletions(-)

diff --git a/src/client/graphics/layers/GameLeftSidebar.ts b/src/client/graphics/layers/GameLeftSidebar.ts
index 9b3aa2f65..81a42421c 100644
--- a/src/client/graphics/layers/GameLeftSidebar.ts
+++ b/src/client/graphics/layers/GameLeftSidebar.ts
@@ -112,7 +112,17 @@ export class GameLeftSidebar extends LitElement implements Layer {
             this.isLeaderboardShow || this.isTeamLeaderboardShow ? "mb-2" : ""
           }`}
         >
-          <div class="cursor-pointer" @click=${this.toggleLeaderboard}>
+          <div
+            class="cursor-pointer p-0.5 bg-gray-700/50 hover:bg-gray-600 border rounded-md border-slate-500 transition-colors"
+            @click=${this.toggleLeaderboard}
+            role="button"
+            tabindex="0"
+            @keydown=${(e: KeyboardEvent) => {
+              if (e.key === "Enter" || e.key === " " || e.code === "Space") {
+                this.toggleLeaderboard();
+              }
+            }}
+          >
             <img
               src=${this.isLeaderboardShow
                 ? leaderboardSolidIcon
@@ -125,8 +135,19 @@ export class GameLeftSidebar extends LitElement implements Layer {
           ${this.isTeamGame
             ? html`
                 <div
-                  class="cursor-pointer"
+                  class="cursor-pointer p-0.5 bg-gray-700/50 hover:bg-gray-600 border rounded-md border-slate-500 transition-colors"
                   @click=${this.toggleTeamLeaderboard}
+                  role="button"
+                  tabindex="0"
+                  @keydown=${(e: KeyboardEvent) => {
+                    if (
+                      e.key === "Enter" ||
+                      e.key === " " ||
+                      e.code === "Space"
+                    ) {
+                      this.toggleTeamLeaderboard();
+                    }
+                  }}
                 >
                   <img
                     src=${this.isTeamLeaderboardShow