alois/OpenFrontIO
1
0
Fork 0
mirror of https://github.com/openfrontio/OpenFrontIO.git synced 2026-07-20 04:39:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

standardize UI colors to fit brand guidelines (#3754)

Browse Source 
## Description:

We have brand colors:

<img width="738" height="900" alt="Screenshot 2026-04-25 at 12 52 29 PM"
src="https://github.com/user-attachments/assets/aac69e87-91f2-4c3f-9f1e-f69f48f5943e"
/>

So update the homepage & in-game UI to use those colors:

<img width="1185" height="946" alt="Screenshot 2026-04-25 at 12 51
06 PM"
src="https://github.com/user-attachments/assets/89a0b12c-2db1-43d4-9500-fcf405c0f7ff"
/>

Also updated buttons to use the o-button element

## 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
This commit is contained in:
Evan
2026-04-25 13:53:21 -06:00
committed by GitHub
parent ca9dc4e2e0
commit 62299c9714
42 changed files with 289 additions and 295 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/client/graphics/layers/ControlPanel.ts
+6 -6
View File
@@ -158,13 +158,13 @@ export class ControlPanel extends LitElement implements Layer {
<div class="h-full flex">
${greenPercent > 0
? html`<div
class="h-full bg-sky-700 transition-[width] duration-200"
class="h-full bg-malibu-blue transition-[width] duration-200"
style="width: ${greenPercent}%;"
></div>`
: ""}
${orangePercent > 0
? html`<div
class="h-full bg-[#0073b7] transition-[width] duration-200"
class="h-full bg-aquarius transition-[width] duration-200"
style="width: ${orangePercent}%;"
></div>`
: ""}
@@ -213,13 +213,13 @@ export class ControlPanel extends LitElement implements Layer {
<div class="h-full flex">
${greenPercent > 0
? html`<div
class="h-full bg-sky-700 transition-[width] duration-200"
class="h-full bg-malibu-blue transition-[width] duration-200"
style="width: ${greenPercent}%;"
></div>`
: ""}
${orangePercent > 0
? html`<div
class="h-full bg-[#0073b7] transition-[width] duration-200"
class="h-full bg-aquarius transition-[width] duration-200"
style="width: ${orangePercent}%;"
></div>`
: ""}
@@ -326,7 +326,7 @@ export class ControlPanel extends LitElement implements Layer {
.value=${String(Math.round(this.attackRatio * 100))}
@input=${(e: Event) => this.handleRatioSliderInput(e)}
@pointerup=${(e: Event) => this.handleRatioSliderPointerUp(e)}
class="flex-1 h-1.5 accent-blue-500 cursor-pointer"
class="flex-1 h-1.5 accent-aquarius cursor-pointer"
/>
</div>
`;
@@ -373,7 +373,7 @@ export class ControlPanel extends LitElement implements Layer {
.value=${String(Math.round(this.attackRatio * 100))}
@input=${(e: Event) => this.handleRatioSliderInput(e)}
@pointerup=${(e: Event) => this.handleRatioSliderPointerUp(e)}
class="w-full h-1.5 accent-blue-500 cursor-pointer"
class="w-full h-1.5 accent-aquarius cursor-pointer"
/>
</div>
</div>