From bb1ddfbcaa08a6e81b69e5cd55888e93e5b2fa5f Mon Sep 17 00:00:00 2001
From: FloPinguin <25036848+FloPinguin@users.noreply.github.com>
Date: Thu, 19 Feb 2026 19:01:27 +0100
Subject: [PATCH] =?UTF-8?q?Make=20"Not=20Logged=20In"=20button=20open=20Ac?=
 =?UTF-8?q?count=20modal=20&=20fix=20Account=20loading=20state=20=E2=9C=A8?=
 =?UTF-8?q?=20(#3247)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Description:

**TerritoryPatternsModal.ts**
- Changed the "Not Logged In" indicator from a static `div` to a
clickable `button`
- Clicking it now closes the skins modal and navigates to the Account
page via `window.showPage("page-account")`
- Added hover effect (`hover:bg-red-500/30`) for visual feedback

**AccountModal.ts**
- Fixed the inline Account modal's loading state ("Fetching account
information...") rendering without a background or header (white text on
light background 💀)
- The loading spinner is now wrapped in `modalContainerClass` (dark
glassmorphic background) with a proper `modalHeader` including the title
and back button, matching the loaded state's appearance

**SinglePlayerModal.ts**
- Changed the "Sign in for achievements" banner from a static `div` to a
clickable `button` that closes the modal and navigates to the Account
page
- Added hover effect for visual feedback

**Matchmaking.ts**
- When the "You must be logged in to play ranked matchmaking" toast
appears, the user is now also navigated to the Account page so they can
log in immediately

## 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:

FloPinguin
---
 src/client/AccountModal.ts           | 11 ++++++++++-
 src/client/Matchmaking.ts            |  1 +
 src/client/SinglePlayerModal.ts      | 10 +++++++---
 src/client/TerritoryPatternsModal.ts | 10 +++++++---
 4 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/src/client/AccountModal.ts b/src/client/AccountModal.ts
index 6879218dc..0268d21d2 100644
--- a/src/client/AccountModal.ts
+++ b/src/client/AccountModal.ts
@@ -67,7 +67,16 @@ export class AccountModal extends BaseModal {
       : this.renderInner();
 
     if (this.inline) {
-      return content;
+      return this.isLoadingUser
+        ? html`<div class="${this.modalContainerClass}">
+            ${modalHeader({
+              title: translateText("account_modal.title"),
+              onBack: () => this.close(),
+              ariaLabel: translateText("common.back"),
+            })}
+            ${content}
+          </div>`
+        : content;
     }
 
     return html`
diff --git a/src/client/Matchmaking.ts b/src/client/Matchmaking.ts
index 89f4606bc..735f56141 100644
--- a/src/client/Matchmaking.ts
+++ b/src/client/Matchmaking.ts
@@ -152,6 +152,7 @@ export class MatchmakingModal extends BaseModal {
         }),
       );
       this.close();
+      window.showPage?.("page-account");
       return;
     }
 
diff --git a/src/client/SinglePlayerModal.ts b/src/client/SinglePlayerModal.ts
index 20cfd79fb..0b36f13a0 100644
--- a/src/client/SinglePlayerModal.ts
+++ b/src/client/SinglePlayerModal.ts
@@ -119,11 +119,15 @@ export class SinglePlayerModal extends BaseModal {
     if (crazyGamesSDK.isOnCrazyGames()) {
       return html``;
     }
-    return html`<div
-      class="px-3 py-2 text-xs font-bold uppercase tracking-wider transition-colors duration-200 rounded-lg bg-yellow-500/20 text-yellow-400 border border-yellow-500/30 whitespace-nowrap shrink-0"
+    return html`<button
+      class="px-3 py-2 text-xs font-bold uppercase tracking-wider transition-colors duration-200 rounded-lg bg-yellow-500/20 text-yellow-400 border border-yellow-500/30 whitespace-nowrap shrink-0 cursor-pointer hover:bg-yellow-500/30"
+      @click=${() => {
+        this.close();
+        window.showPage?.("page-account");
+      }}
     >
       ${translateText("single_modal.sign_in_for_achievements")}
-    </div>`;
+    </button>`;
   }
 
   private applyAchievements(userMe: UserMeResponse | false) {
diff --git a/src/client/TerritoryPatternsModal.ts b/src/client/TerritoryPatternsModal.ts
index 84293980b..c03edb896 100644
--- a/src/client/TerritoryPatternsModal.ts
+++ b/src/client/TerritoryPatternsModal.ts
@@ -220,11 +220,15 @@ export class TerritoryPatternsModal extends BaseModal {
   }
 
   private renderNotLoggedInWarning(): TemplateResult {
-    return html`<div
-      class="px-4 py-2 text-xs font-bold uppercase tracking-wider transition-colors duration-200 rounded-lg bg-red-500/20 text-red-400 border border-red-500/30"
+    return html`<button
+      class="px-4 py-2 text-xs font-bold uppercase tracking-wider transition-colors duration-200 rounded-lg bg-red-500/20 text-red-400 border border-red-500/30 cursor-pointer hover:bg-red-500/30"
+      @click=${() => {
+        this.close();
+        window.showPage?.("page-account");
+      }}
     >
       ${translateText("territory_patterns.not_logged_in")}
-    </div>`;
+    </button>`;
   }
 
   private renderColorSwatchGrid(): TemplateResult {