feat(UI): have red ring when full quotas (#983)

**Before**:
<img width="449" alt="Capture d’écran 2025-02-22 à 20 59 54"
src="https://github.com/user-attachments/assets/06eec7f9-187a-411e-901a-787a4d5d4b60"
/>
**After**:
<img width="449" alt="Capture d’écran 2025-02-22 à 21 08 25"
src="https://github.com/user-attachments/assets/746e16f2-132e-4f93-8ee8-3ce0b8227020"
/>

Author: AugustinMauroy

frontend/components/QuotaCard.tsx

@@ -21,22 +21,28 @@ 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}`}
+          // We deduplicate ring classes here to avoid whitespace between "bar" and "ring"
+          class={`h-full ${bgColor} ring-1 ${ringColor}`}
         >
         </div>
       </div>