From c63b304a97401b9d0256292fa3ee116c036344f6 Mon Sep 17 00:00:00 2001 From: Evan Date: Sun, 8 Mar 2026 19:00:24 -0700 Subject: [PATCH] various homepage improvements (#3387) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Description: Various changes, applied more styling from the homewrecker branch * dimmed background * Content width: expands to 24cm on 2xl screens * game card ocean color: French blue → sky-950 * Action buttons (Create/Ranked/Join): French blue → slate-700 * Modifier badges: teal → sky blue, to keep in color scheme * CTA buttons (Start Game, Join Lobby): blue-600 → sky-600 across all modals and * Nav font: font-bold tracking-widest → font-medium tracking-wider * Username/flag inputs: font weight lightened to font-medium tracking-wider * Language flag: blue color filter applied BEFORE: Screenshot 2026-03-08 at 6 48 57 PM AFTER: Screenshot 2026-03-08 at 6 46 53 PM ## 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 ## Please put your Discord username so you can be contacted if a bug or regression is found: evan --- index.html | 8 +++--- src/client/FlagInput.ts | 2 +- src/client/GameModeSelector.ts | 25 +++++++++---------- src/client/GutterAds.ts | 8 +++--- src/client/HostLobbyModal.ts | 2 +- src/client/JoinLobbyModal.ts | 2 +- src/client/LangSelector.ts | 3 ++- src/client/SinglePlayerModal.ts | 2 +- src/client/UsernameInput.ts | 4 +-- src/client/components/DesktopNavBar.ts | 12 ++++----- src/client/components/MainLayout.ts | 2 +- .../components/baseComponents/Button.ts | 2 +- 12 files changed, 36 insertions(+), 36 deletions(-) diff --git a/index.html b/index.html index 7c587b0f2..153e80acd 100644 --- a/index.html +++ b/index.html @@ -120,12 +120,12 @@
diff --git a/src/client/FlagInput.ts b/src/client/FlagInput.ts index edb04610c..0622937cf 100644 --- a/src/client/FlagInput.ts +++ b/src/client/FlagInput.ts @@ -94,7 +94,7 @@ export class FlagInput extends LitElement { > ${showSelect ? html` ${translateText("flag_input.title")} ` diff --git a/src/client/GameModeSelector.ts b/src/client/GameModeSelector.ts index d4f3c08a2..0f1ba4680 100644 --- a/src/client/GameModeSelector.ts +++ b/src/client/GameModeSelector.ts @@ -23,7 +23,7 @@ import { translateText, } from "./Utils"; -const CARD_BG = "bg-[color-mix(in_oklab,var(--frenchBlue)_70%,black)]"; +const CARD_BG = "bg-sky-950"; @customElement("game-mode-selector") export class GameModeSelector extends LitElement { @@ -133,17 +133,17 @@ export class GameModeSelector extends LitElement { ${this.renderSmallActionCard( translateText("main.create"), this.openHostLobby, - "bg-[color-mix(in_oklab,var(--frenchBlue)_75%,black)]", + "bg-slate-700 hover:bg-slate-600 active:bg-slate-800", )} ${this.renderSmallActionCard( translateText("mode_selector.ranked_title"), this.openRankedMenu, - "bg-[color-mix(in_oklab,var(--frenchBlue)_75%,black)]", + "bg-slate-700 hover:bg-slate-600 active:bg-slate-800", )} ${this.renderSmallActionCard( translateText("main.join"), this.openJoinLobby, - "bg-[color-mix(in_oklab,var(--frenchBlue)_75%,black)]", + "bg-slate-700 hover:bg-slate-600 active:bg-slate-800", )} @@ -204,17 +204,17 @@ export class GameModeSelector extends LitElement { ${this.renderSmallActionCard( translateText("main.create"), this.openHostLobby, - "bg-[color-mix(in_oklab,var(--frenchBlue)_75%,black)]", + "bg-slate-700 hover:bg-slate-600 active:bg-slate-800", )} ${this.renderSmallActionCard( translateText("mode_selector.ranked_title"), this.openRankedMenu, - "bg-[color-mix(in_oklab,var(--frenchBlue)_75%,black)]", + "bg-slate-700 hover:bg-slate-600 active:bg-slate-800", )} ${this.renderSmallActionCard( translateText("main.join"), this.openJoinLobby, - "bg-[color-mix(in_oklab,var(--frenchBlue)_75%,black)]", + "bg-slate-700 hover:bg-slate-600 active:bg-slate-800", )} @@ -255,7 +255,7 @@ export class GameModeSelector extends LitElement { return html` @@ -306,8 +306,7 @@ export class GameModeSelector extends LitElement { return html` diff --git a/src/client/UsernameInput.ts b/src/client/UsernameInput.ts index eb2d7385d..04670a5c7 100644 --- a/src/client/UsernameInput.ts +++ b/src/client/UsernameInput.ts @@ -78,7 +78,7 @@ export class UsernameInput extends LitElement { @input=${this.handleClanTagChange} placeholder="${translateText("username.tag")}" maxlength="5" - class="w-[6rem] text-xl font-bold text-center uppercase shrink-0 bg-transparent text-white placeholder-white/70 focus:placeholder-transparent border-0 border-b border-white/40 focus:outline-none focus:border-white/60" + class="w-[6rem] text-xl font-medium tracking-wider text-center uppercase shrink-0 bg-transparent text-white placeholder-white/70 focus:placeholder-transparent border-0 border-b border-white/40 focus:outline-none focus:border-white/60" /> ${this.validationError diff --git a/src/client/components/DesktopNavBar.ts b/src/client/components/DesktopNavBar.ts index 64f65e406..93bb3b8b2 100644 --- a/src/client/components/DesktopNavBar.ts +++ b/src/client/components/DesktopNavBar.ts @@ -102,7 +102,7 @@ export class DesktopNavBar extends LitElement { @@ -111,7 +111,7 @@ export class DesktopNavBar extends LitElement {