From ca83fa264b6dfff92503a93a4c0f83a0a73fd64f Mon Sep 17 00:00:00 2001
From: Artyom Savchenko <armisav@gmail.com>
Date: Tue, 4 Nov 2025 10:32:50 +0700
Subject: [PATCH] Make usage indicator more contrast (#10188)

* Make usage indicator more contrast

Signed-off-by: Artem Savchenko <armisav@gmail.com>

* Use old warning threshold

Signed-off-by: Artem Savchenko <armisav@gmail.com>

---------

Signed-off-by: Artem Savchenko <armisav@gmail.com>
---
 .../src/components/LimitsIndicator.svelte      |  2 +-
 .../src/components/UsageProgressBar.svelte     | 18 +++++++++++++++---
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/plugins/billing-resources/src/components/LimitsIndicator.svelte b/plugins/billing-resources/src/components/LimitsIndicator.svelte
index 86f8ba833a..a4b17804c9 100644
--- a/plugins/billing-resources/src/components/LimitsIndicator.svelte
+++ b/plugins/billing-resources/src/components/LimitsIndicator.svelte
@@ -135,6 +135,6 @@
     border-radius: var(--small-BorderRadius);
     transition: background-color 0.2s ease;
     position: relative;
-    border: 1px solid var(--button-secondary-BorderColor);
+    border: 1px solid var(--theme-trans-color);
   }
 </style>
diff --git a/plugins/billing-resources/src/components/UsageProgressBar.svelte b/plugins/billing-resources/src/components/UsageProgressBar.svelte
index 646441fdae..954617f04d 100644
--- a/plugins/billing-resources/src/components/UsageProgressBar.svelte
+++ b/plugins/billing-resources/src/components/UsageProgressBar.svelte
@@ -19,13 +19,13 @@
 
   $: clampedPercent = Math.min(Math.max(percent, 0), 1)
 
-  // Calculate color based on current percentage
-  $: fillColor = clampedPercent >= 0.9 ? '#e53935' : clampedPercent >= 0.7 ? '#fbc02d' : '#43a047'
+  // Calculate style class based on current percentage
+  $: fillClass = clampedPercent >= 0.9 ? 'critical' : clampedPercent >= 0.7 ? 'warning' : 'normal'
 </script>
 
 <div class="progress-bar" style="width: {width}; height: {height};">
   <div class="progress-track">
-    <div class="progress-fill" style="width: {clampedPercent * 100}%; background-color: {fillColor};"></div>
+    <div class="progress-fill {fillClass}" style="width: {clampedPercent * 100}%;"></div>
   </div>
 </div>
 
@@ -49,5 +49,17 @@
     transition:
       width 0.3s ease,
       background-color 0.3s ease;
+
+    &.normal {
+      background-color: var(--theme-won-color);
+    }
+
+    &.warning {
+      background-color: var(--theme-warning-color);
+    }
+
+    &.critical {
+      background-color: var(--theme-error-color);
+    }
   }
 </style>