From a2d8386b4a2dae11ad668e4a8b77408ee036e485 Mon Sep 17 00:00:00 2001
From: miloschwartz <mschwartz10612@gmail.com>
Date: Tue, 21 Apr 2026 17:39:16 -0700
Subject: [PATCH] fix uptime graph styles

---
 src/components/UptimeAlertSection.tsx |  7 +++-
 src/components/UptimeBar.tsx          | 47 +++++++++++++++++++--------
 src/components/UptimeMiniBar.tsx      | 39 +++++++++++++++-------
 3 files changed, 67 insertions(+), 26 deletions(-)

diff --git a/src/components/UptimeAlertSection.tsx b/src/components/UptimeAlertSection.tsx
index a43ef858b..776dd9982 100644
--- a/src/components/UptimeAlertSection.tsx
+++ b/src/components/UptimeAlertSection.tsx
@@ -165,7 +165,12 @@ export default function UptimeAlertSection({
         rulesListSearch.toString() ? `?${rulesListSearch}` : ""
     }`;
 
-    const alertButton = alertRulesLoading ? null : hasRules ? (
+    const alertButton = alertRulesLoading ? (
+        <Button variant="outline" type="button" loading aria-busy="true">
+            <BellPlus className="size-4 mr-2" />
+            Add Alert
+        </Button>
+    ) : hasRules ? (
         <Button variant="outline" asChild>
             <Link href={rulesListHref}>
                 <BellRing className="size-4 mr-2" />
diff --git a/src/components/UptimeBar.tsx b/src/components/UptimeBar.tsx
index 636d536e9..992484ea4 100644
--- a/src/components/UptimeBar.tsx
+++ b/src/components/UptimeBar.tsx
@@ -41,7 +41,7 @@ const barColorClass: Record<string, string> = {
     good: "bg-green-500",
     degraded: "bg-yellow-500",
     bad: "bg-red-500",
-    no_data: "bg-zinc-700"
+    no_data: "bg-neutral-200 dark:bg-neutral-700"
 };
 
 type UptimeBarProps = {
@@ -72,7 +72,11 @@ export default function UptimeBar({
     });
 
     const hcQuery = useQuery({
-        ...orgQueries.healthCheckStatusHistory({ orgId: orgId ?? "", healthCheckId: healthCheckId ?? 0, days }),
+        ...orgQueries.healthCheckStatusHistory({
+            orgId: orgId ?? "",
+            healthCheckId: healthCheckId ?? 0,
+            days
+        }),
         enabled: healthCheckId != null && siteId == null && resourceId == null,
         meta: { api }
     });
@@ -84,24 +88,43 @@ export default function UptimeBar({
     });
 
     const { data, isLoading } =
-        siteId != null ? siteQuery :
-        resourceId != null ? resourceQuery :
-        hcQuery;
+        siteId != null
+            ? siteQuery
+            : resourceId != null
+              ? resourceQuery
+              : hcQuery;
 
     if (isLoading) {
         return (
-            <div className={cn("space-y-2", className)}>
-                {title && (
-                    <div className="text-sm font-medium">{title}</div>
-                )}
+            <div className={cn("space-y-3", className)}>
+                <div className="flex items-center justify-between">
+                    {title && (
+                        <span className="text-sm font-medium">{title}</span>
+                    )}
+                    <div
+                        className="flex items-center gap-4 text-sm ml-auto"
+                        aria-busy="true"
+                        aria-label="Loading uptime summary"
+                    >
+                        <span className="h-4 w-[4.5rem] shrink-0 rounded-md bg-muted animate-pulse" />
+                        <span className="h-4 w-[7rem] shrink-0 rounded-md bg-muted animate-pulse" />
+                    </div>
+                </div>
                 <div className="flex gap-0.5 h-8">
                     {Array.from({ length: days }).map((_, i) => (
                         <div
                             key={i}
-                            className="flex-1 rounded-sm bg-zinc-800 animate-pulse"
+                            className={cn(
+                                "flex-1 rounded-sm animate-pulse",
+                                barColorClass.no_data
+                            )}
                         />
                     ))}
                 </div>
+                <div className="flex justify-between text-xs text-muted-foreground">
+                    <span>{days} days ago</span>
+                    <span>Today</span>
+                </div>
             </div>
         );
     }
@@ -114,9 +137,7 @@ export default function UptimeBar({
         <div className={cn("space-y-3", className)}>
             {/* Header row */}
             <div className="flex items-center justify-between">
-                {title && (
-                    <span className="text-sm font-medium">{title}</span>
-                )}
+                {title && <span className="text-sm font-medium">{title}</span>}
                 <div className="flex items-center gap-4 text-sm ml-auto">
                     {!allNoData && (
                         <>
diff --git a/src/components/UptimeMiniBar.tsx b/src/components/UptimeMiniBar.tsx
index b9574054a..5baabb4dd 100644
--- a/src/components/UptimeMiniBar.tsx
+++ b/src/components/UptimeMiniBar.tsx
@@ -33,7 +33,7 @@ const barColorClass: Record<string, string> = {
     good: "bg-green-500",
     degraded: "bg-yellow-500",
     bad: "bg-red-500",
-    no_data: "bg-zinc-700"
+    no_data: "bg-neutral-200 dark:bg-neutral-700"
 };
 
 type UptimeMiniBarProps = {
@@ -61,7 +61,11 @@ export default function UptimeMiniBar({
     });
 
     const hcQuery = useQuery({
-        ...orgQueries.healthCheckStatusHistory({ orgId: orgId ?? "", healthCheckId: healthCheckId ?? 0, days }),
+        ...orgQueries.healthCheckStatusHistory({
+            orgId: orgId ?? "",
+            healthCheckId: healthCheckId ?? 0,
+            days
+        }),
         enabled: healthCheckId != null && siteId == null && resourceId == null,
         meta: { api },
         staleTime: 5 * 60 * 1000
@@ -75,22 +79,36 @@ export default function UptimeMiniBar({
     });
 
     const { data, isLoading } =
-        siteId != null ? siteQuery :
-        resourceId != null ? resourceQuery :
-        hcQuery;
+        siteId != null
+            ? siteQuery
+            : resourceId != null
+              ? resourceQuery
+              : hcQuery;
 
     if (isLoading) {
         return (
             <div className="flex items-center gap-2">
-                <div className="flex gap-px h-5 w-24">
+                <div
+                    className="flex gap-px h-5"
+                    style={{ width: `${days * 5}px` }}
+                >
                     {Array.from({ length: days }).map((_, i) => (
                         <div
                             key={i}
-                            className="flex-1 rounded-[2px] bg-zinc-800 animate-pulse"
+                            className={cn(
+                                "flex-1 rounded-[2px] animate-pulse",
+                                barColorClass.no_data
+                            )}
                         />
                     ))}
                 </div>
-                <span className="text-xs text-muted-foreground w-12">—</span>
+                <span
+                    className="inline-flex min-w-[7ch] items-center justify-end text-xs text-muted-foreground whitespace-nowrap"
+                    aria-busy="true"
+                    aria-label="Loading uptime"
+                >
+                    <span className="h-4 w-[5.5ch] max-w-full rounded bg-muted animate-pulse" />
+                </span>
             </div>
         );
     }
@@ -101,10 +119,7 @@ export default function UptimeMiniBar({
 
     return (
         <div className="flex items-center gap-2">
-            <div
-                className="flex gap-px h-5"
-                style={{ width: `${days * 5}px` }}
-            >
+            <div className="flex gap-px h-5" style={{ width: `${days * 5}px` }}>
                 {data.days.map((day, i) => (
                     <Tooltip key={i}>
                         <TooltipTrigger asChild>