From 3190472bd5cef864a9aebd609d195fbe72d6dbc9 Mon Sep 17 00:00:00 2001
From: Augustin Mauroy <97875033+AugustinMauroy@users.noreply.github.com>
Date: Sat, 22 Feb 2025 21:11:51 +0100
Subject: [PATCH 1/2] UI: have read ring when full quotas

---
 frontend/components/QuotaCard.tsx | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/frontend/components/QuotaCard.tsx b/frontend/components/QuotaCard.tsx
index e0264ed9..07cb9540 100644
--- a/frontend/components/QuotaCard.tsx
+++ b/frontend/components/QuotaCard.tsx
@@ -21,22 +21,27 @@ export function QuotaCard(
 }
 
 function QuotaUsage(props: { limit: number; usage: number }) {
-  let color = "bg-jsr-yellow-400";
   const percent = props.usage / props.limit;
+
+  let bgColor = "bg-jsr-yellow-400";
+  const ringColor = percent >= 1 ? "ring-red-700" : "ring-jsr-yellow-700";
+
   if (percent >= 1) {
-    color = "bg-red-500";
+    bgColor = "bg-red-500";
   } else if (percent > 0.9) {
-    color = "bg-orange-400";
+    bgColor = "bg-orange-400";
   } else if (percent > 0.8) {
-    color = "bg-jsr-yellow-500";
+    bgColor = "bg-jsr-yellow-500";
   }
 
   return (
     <div class="mt-4 flex items-center gap-2">
-      <div class="overflow-hidden h-3 w-full rounded bg-jsr-yellow-50 ring-1 ring-jsr-yellow-500">
+      <div
+        class={`overflow-hidden h-3 w-full rounded bg-jsr-yellow-50 ring-1 ${ringColor}`}
+      >
         <div
           style={{ width: `${percent * 100}%` }}
-          class={`h-full ${color}`}
+          class={`h-full ${bgColor}`}
         >
         </div>
       </div>

From f526cef084ba3127fb41d0a85df3b540ac6a7915 Mon Sep 17 00:00:00 2001
From: Augustin Mauroy <97875033+AugustinMauroy@users.noreply.github.com>
Date: Wed, 26 Feb 2025 10:33:18 +0100
Subject: [PATCH 2/2] fix: withe space

---
 frontend/components/QuotaCard.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/components/QuotaCard.tsx b/frontend/components/QuotaCard.tsx
index 07cb9540..7c316cdd 100644
--- a/frontend/components/QuotaCard.tsx
+++ b/frontend/components/QuotaCard.tsx
@@ -41,7 +41,8 @@ function QuotaUsage(props: { limit: number; usage: number }) {
       >
         <div
           style={{ width: `${percent * 100}%` }}
-          class={`h-full ${bgColor}`}
+          // We deduplicate ring classes here to avoid whitespace between "bar" and "ring"
+          class={`h-full ${bgColor} ring-1 ${ringColor}`}
         >
         </div>
       </div>