alois/OpenFrontIO
1
0
Fork 0
mirror of https://github.com/openfrontio/OpenFrontIO.git synced 2026-06-21 15:30:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

Remove "colours" from the shop modal (#2877)

Browse Source 
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
This commit is contained in:
Ryan
2026-01-13 00:26:56 +00:00
committed by GitHub
parent 568b23df20
commit be83aaa7e1
2 changed files with 71 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/client/HelpModal.ts
+47 -32
View File
@@ -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
src/client/TerritoryPatternsModal.ts
+24 -17
View File
@@ -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">