From be83aaa7e1909a4f69dc18a20e9459692ef629bd Mon Sep 17 00:00:00 2001
From: Ryan <7389646+ryanbarlow97@users.noreply.github.com>
Date: Tue, 13 Jan 2026 00:26:56 +0000
Subject: [PATCH] Remove "colours" from the shop modal (#2877)

If this PR fixes an issue, link it below. If not, delete these two
lines.
Resolves #(issue number)

## Description:
remove the colours from the shop modal, also small tweak to header bar
in instructions

**Only Tailwind Changes**

<img width="843" height="209" alt="image"
src="https://github.com/user-attachments/assets/1f99aa8d-8756-4b70-9ff0-6495d5eb48bf"
/>

<img width="841" height="183" alt="image"
src="https://github.com/user-attachments/assets/ac40ed0d-7588-4336-b3d1-ce4be5f8a312"
/>



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

w.o.n
---
 src/client/HelpModal.ts              | 79 +++++++++++++++++-----------
 src/client/TerritoryPatternsModal.ts | 41 +++++++++------
 2 files changed, 71 insertions(+), 49 deletions(-)

diff --git a/src/client/HelpModal.ts b/src/client/HelpModal.ts
index 965efc2f2..d4193e040 100644
--- a/src/client/HelpModal.ts
+++ b/src/client/HelpModal.ts
@@ -98,10 +98,12 @@ export class HelpModal extends BaseModal {
     const content = html`
       <div
         class="h-full flex flex-col ${this.inline
-          ? "bg-black/60 backdrop-blur-md rounded-2xl border border-white/10 p-6"
+          ? "bg-black/60 backdrop-blur-md rounded-2xl border border-white/10"
           : ""}"
       >
-        <div class="flex items-center mb-6 pb-2 border-b border-white/10 gap-2">
+        <div
+          class="flex items-center mb-4 pb-2 border-b border-white/10 gap-2 shrink-0 p-6"
+        >
           <div class="flex items-center gap-4 flex-1">
             <button
               @click=${this.close}
@@ -132,41 +134,54 @@ export class HelpModal extends BaseModal {
         </div>
 
         <div
-          class="flex-1 overflow-y-auto scrollbar-thin scrollbar-thumb-white/20 scrollbar-track-transparent pr-4 space-y-8 mr-1"
+          class="prose prose-invert prose-sm max-w-none overflow-y-auto px-6 pb-6 mr-1
+            [&_a]:text-blue-400 [&_a:hover]:text-blue-300 transition-colors
+            [&_h1]:text-2xl [&_h1]:font-bold [&_h1]:mb-4 [&_h1]:text-white [&_h1]:border-b [&_h1]:border-white/10 [&_h1]:pb-2
+            [&_h2]:text-xl [&_h2]:font-bold [&_h2]:mt-6 [&_h2]:mb-3 [&_h2]:text-blue-200
+            [&_h3]:text-lg [&_h3]:font-semibold [&_h3]:mt-4 [&_h3]:mb-2 [&_h3]:text-blue-100
+            [&_ul]:pl-5 [&_ul]:list-disc [&_ul]:space-y-1
+            [&_li]:text-gray-300 [&_li]:leading-relaxed
+            [&_p]:text-gray-300 [&_p]:mb-3 [&_strong]:text-white [&_strong]:font-bold
+            scrollbar-thin scrollbar-thumb-white/20 scrollbar-track-transparent"
         >
           <!-- Hotkeys Section -->
+          <div class="flex items-center gap-3 mb-3">
+            <div class="text-blue-400">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="w-5 h-5 text-blue-400"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <rect x="2" y="4" width="20" height="16" rx="2" ry="2"></rect>
+                <path d="M6 8h.001"></path>
+                <path d="M10 8h.001"></path>
+                <path d="M14 8h.001"></path>
+                <path d="M18 8h.001"></path>
+                <path d="M6 12h.001"></path>
+                <path d="M10 12h.001"></path>
+                <path d="M14 12h.001"></path>
+                <path d="M18 12h.001"></path>
+                <path d="M6 16h12"></path>
+              </svg>
+            </div>
+            <h3
+              class="text-xl font-bold uppercase tracking-widest text-white/90"
+            >
+              ${translateText("help_modal.hotkeys")}
+            </h3>
+            <div
+              class="flex-1 h-px bg-gradient-to-r from-blue-500/50 to-transparent"
+            ></div>
+          </div>
           <section
             class="bg-white/5 rounded-xl border border-white/10 overflow-hidden"
           >
-            <div class="p-4 bg-white/5 border-b border-white/5">
-              <h2
-                class="text-lg font-bold text-white flex items-center gap-2 uppercase tracking-wide"
-              >
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  class="w-5 h-5 text-blue-400"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  stroke-width="2"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                >
-                  <rect x="2" y="4" width="20" height="16" rx="2" ry="2"></rect>
-                  <path d="M6 8h.001"></path>
-                  <path d="M10 8h.001"></path>
-                  <path d="M14 8h.001"></path>
-                  <path d="M18 8h.001"></path>
-                  <path d="M6 12h.001"></path>
-                  <path d="M10 12h.001"></path>
-                  <path d="M14 12h.001"></path>
-                  <path d="M18 12h.001"></path>
-                  <path d="M6 16h12"></path>
-                </svg>
-                ${translateText("help_modal.hotkeys")}
-              </h2>
-            </div>
-            <div class="p-4 overflow-x-auto">
+            <div class="pt-2 pb-4 px-4 overflow-x-auto">
               <table class="w-full text-sm border-separate border-spacing-y-1">
                 <thead>
                   <tr
diff --git a/src/client/TerritoryPatternsModal.ts b/src/client/TerritoryPatternsModal.ts
index e13ad1cbc..fb7e267e5 100644
--- a/src/client/TerritoryPatternsModal.ts
+++ b/src/client/TerritoryPatternsModal.ts
@@ -85,9 +85,9 @@ export class TerritoryPatternsModal extends BaseModal {
   private renderTabNavigation(): TemplateResult {
     return html`
       <div
-        class="relative flex flex-col mb-6 border-b border-white/10 pb-4 shrink-0"
+        class="flex items-center mb-4 pb-2 border-b border-white/10 gap-2 shrink-0 p-6"
       >
-        <div class="flex items-center gap-4 mb-4">
+        <div class="flex items-center gap-4 flex-1">
           <button
             @click=${this.close}
             class="group flex items-center justify-center w-10 h-10 rounded-full bg-white/5 hover:bg-white/10 transition-all border border-white/10 shrink-0"
@@ -114,32 +114,37 @@ export class TerritoryPatternsModal extends BaseModal {
             ${translateText("territory_patterns.title")}
           </span>
 
-          ${!hasLinkedAccount(this.userMeResponse)
-            ? html`<div class="ml-auto flex items-center">
-                ${this.renderNotLoggedInWarning()}
-              </div>`
-            : html``}
+          ${
+            !hasLinkedAccount(this.userMeResponse)
+              ? html`<div class="ml-auto flex items-center">
+                  ${this.renderNotLoggedInWarning()}
+                </div>`
+              : html``
+          }
         </div>
-
+       <!-- TEMP DISABlE TAB SWITCHING
         <div class="flex items-center gap-2 justify-center">
           <button
-            class="px-6 py-2 text-xs font-bold transition-all duration-200 rounded-lg uppercase tracking-widest ${this
-              .activeTab === "patterns"
-              ? "bg-blue-500/20 text-blue-400 border border-blue-500/30 shadow-[0_0_15px_rgba(59,130,246,0.2)]"
-              : "text-white/40 hover:text-white hover:bg-white/5 border border-transparent"}"
+            class="px-6 py-2 text-xs font-bold transition-all duration-200 rounded-lg uppercase tracking-widest ${
+              this.activeTab === "patterns"
+                ? "bg-blue-500/20 text-blue-400 border border-blue-500/30 shadow-[0_0_15px_rgba(59,130,246,0.2)]"
+                : "text-white/40 hover:text-white hover:bg-white/5 border border-transparent"
+            }"
             @click=${() => (this.activeTab = "patterns")}
           >
             ${translateText("territory_patterns.title")}
           </button>
           <button
-            class="px-6 py-2 text-xs font-bold transition-all duration-200 rounded-lg uppercase tracking-widest ${this
-              .activeTab === "colors"
-              ? "bg-blue-500/20 text-blue-400 border border-blue-500/30 shadow-[0_0_15px_rgba(59,130,246,0.2)]"
-              : "text-white/40 hover:text-white hover:bg-white/5 border border-transparent"}"
+            class="px-6 py-2 text-xs font-bold transition-all duration-200 rounded-lg uppercase tracking-widest ${
+              this.activeTab === "colors"
+                ? "bg-blue-500/20 text-blue-400 border border-blue-500/30 shadow-[0_0_15px_rgba(59,130,246,0.2)]"
+                : "text-white/40 hover:text-white hover:bg-white/5 border border-transparent"
+            }"
             @click=${() => (this.activeTab = "colors")}
           >
             ${translateText("territory_patterns.colors")}
           </button>
+          TEMP DISABlE TAB SWITCHING -->
         </div>
       </div>
     `;
@@ -278,7 +283,9 @@ export class TerritoryPatternsModal extends BaseModal {
 
     const content = html`
       <div
-        class="h-full flex flex-col bg-black/60 backdrop-blur-md rounded-2xl border border-white/10 p-6"
+        class="h-full flex flex-col ${this.inline
+          ? "bg-black/60 backdrop-blur-md rounded-2xl border border-white/10"
+          : ""}"
       >
         ${this.renderTabNavigation()}
         <div class="overflow-y-auto pr-2 custom-scrollbar mr-1">