From 42be9db71c8ba7dbdb874566a785ba11f5c8147c Mon Sep 17 00:00:00 2001
From: ItsTimeTooSleep <xiang.zhang70952-biph@basischina.com>
Date: Thu, 23 Jul 2026 00:50:34 +0800
Subject: [PATCH] fix(client): improve spawn phase progress bar visibility
 (#4666)

Resolves #4579

## Description:

This PR fixes issue #4579 where the spawn phase progress bar color
blends with the ocean on certain maps, making it hard to see.

Changes:
- Added a new CSS variable `--color-bright-blue: #1e90ff` in
`src/client/styles.css`
- Updated `src/client/hud/layers/SpawnTimer.ts` to use
`--color-bright-blue` instead of `--color-malibu-blue`
- Increased opacity from 0.7 to 0.85 for better visibility

The new color (#1e90ff) with 85% opacity provides better contrast
against both ocean and UI grey backgrounds.
**Before:**
<img width="3200" height="1660" alt="image"
src="https://github.com/user-attachments/assets/703d5401-de4c-4e2f-b8c4-16a1cc1ba8d4"
/>

**After:**
<img width="3200" height="1660" alt="image"
src="https://github.com/user-attachments/assets/f6237f64-e6bf-4b46-a491-c61f2bbde3cd"
/>

**Note:** The original issue suggested using `--color-deep-blue:
#003d5c`. However, after testing, this color was too dark and blended
with the top UI background. The final solution uses
`--color-bright-blue: #1e90ff` with increased opacity (0.85), which
provides better contrast against both ocean and UI elements.

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

## Please put your Discord username so you can be contacted if a bug or
regression is found:

ItsTimeTooSleep
---
 src/client/hud/layers/SpawnTimer.ts | 4 ++--
 src/client/styles.css               | 1 +
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/client/hud/layers/SpawnTimer.ts b/src/client/hud/layers/SpawnTimer.ts
index 8f712562f..660a1f3e5 100644
--- a/src/client/hud/layers/SpawnTimer.ts
+++ b/src/client/hud/layers/SpawnTimer.ts
@@ -20,7 +20,7 @@ export class SpawnTimer extends LitElement implements Controller {
   private ratios = [0];
   private _barVisible = false;
   private colors = [
-    "rgb(from var(--color-malibu-blue) r g b / 0.7)",
+    "rgb(from var(--color-bright-blue) r g b / 0.85)",
     "rgba(0, 0, 0, 0.5)",
   ];
 
@@ -58,7 +58,7 @@ export class SpawnTimer extends LitElement implements Controller {
       this.ratios = [
         this.game.ticks() / this.game.config().numSpawnPhaseTurns(),
       ];
-      this.colors = ["rgb(from var(--color-malibu-blue) r g b / 0.7)"];
+      this.colors = ["rgb(from var(--color-bright-blue) r g b / 0.85)"];
     } else {
       this.ratios = [];
       this.colors = [];
diff --git a/src/client/styles.css b/src/client/styles.css
index aa1351b60..a388aa246 100644
--- a/src/client/styles.css
+++ b/src/client/styles.css
@@ -13,6 +13,7 @@
   --color-aquarius: #3fa9f5;
   --color-dawn-blue: #cccccc;
   --color-bright-white: #ffffff;
+  --color-bright-blue: #1e90ff;
 
   /* Openfront Masters sub-brand */
   --color-cyber-yellow: #ffd700;