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>
This commit is contained in:
Martin I
2026-02-06 18:42:10 +01:00
committed by GitHub
parent 8cc6c2c2aa
commit 563ae3f90a
+23 -2
View File
@@ -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