mirror of
https://github.com/openfrontio/OpenFrontIO.git
synced 2026-06-21 15:00:43 +00:00
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:
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user