refactor(status): share uptime history strip

Author: izadoesdev

apps/dashboard/app/(main)/home/_components/monitors-section.tsx

@@ -41,7 +41,7 @@ function HomeMonitorHeatmap({
 			getDateLabel={(d) => formatDateOnly(d)}
 			interactive={false}
 			isActive={isActive}
-			stripClassName="mt-1.5 flex h-5 w-full items-end gap-[2px]"
+			stripClassName="mt-1.5 grid h-1.5 w-full gap-x-px"
 			tooltipHasData={(day) => day.hasData && isActive}
 		/>
 	);

apps/dashboard/components/monitors/monitor-row.tsx

@@ -322,7 +322,7 @@ function MiniHeatmap({
 				getDateLabel={(d) => formatDateOnly(d)}
 				interactive={false}
 				isActive={isActive}
-				stripClassName="flex h-5 w-32 items-end gap-[1.5px] lg:w-44"
+				stripClassName="grid h-1.5 w-32 gap-x-px lg:w-44"
 			/>
 			<span
 				className={cn(

apps/dashboard/lib/uptime/uptime-heatmap.tsx

@@ -70,10 +70,10 @@ export function UptimeHeatmap({
 
 			<div className="p-4">
 				{isLoading ? (
-					<div className="flex h-16 w-full gap-[2px] sm:gap-1">
+					<div className="grid h-1.5 w-full gap-x-px sm:gap-x-[2px]">
 						{Array.from({ length: days }).map((_, i) => (
 							<div
-								className="h-full flex-1 animate-pulse rounded-sm bg-secondary"
+								className="h-full animate-pulse rounded-full bg-secondary"
 								key={i}
 							/>
 						))}
@@ -85,7 +85,6 @@ export function UptimeHeatmap({
 						getDateLabel={(d) => dayjs(d).format("MMM D, YYYY")}
 						interactive
 						isActive
-						stripClassName="flex h-16 w-full gap-[2px] sm:gap-1"
 					/>
 				)}
 			</div>

apps/status/app/[slug]/_components/status-page.tsx

@@ -36,34 +36,34 @@ const STATUS_CONFIG = {
 		shortLabel: "Operational",
 		description: "We're not aware of any issues affecting these services.",
 		sectionClass:
-			"border-[#00cc414d] bg-[#e5fbeb] dark:border-[#28442f] dark:bg-[#19251c]",
+			"border-[#00cc414d] bg-[#e5fbeb] dark:border-[#3f8f55] dark:bg-[#17291d]",
 		headerClass:
-			"bg-[#00bd3c] text-white dark:bg-[#1d3f26] dark:text-foreground/75",
-		lineClass: "bg-[#28e163]",
-		textClass: "text-[#5b8368] dark:text-[#5b8368]",
+			"bg-[#00bd3c] text-white dark:bg-[#1f5f33] dark:text-[#d7ffe4]",
+		lineClass: "bg-[#28e163] dark:bg-[#4da868]",
+		textClass: "text-[#5b8368] dark:text-[#8bcf9d]",
 	},
 	degraded: {
 		title: "Some Systems Degraded",
 		shortLabel: "Degraded",
 		description:
 			"One or more services are degraded. We're tracking the impact.",
 		sectionClass:
-			"border-[#cc99004d] bg-[#fff9e7] dark:border-[#383523] dark:bg-[#252319]",
+			"border-[#cc99004d] bg-[#fff9e7] dark:border-[#a8822e] dark:bg-[#2f2918]",
 		headerClass:
-			"bg-[#ffbe3d] text-[#332600] dark:bg-[#3d381c] dark:text-foreground/75",
-		lineClass: "bg-[#ffbe3d]",
-		textClass: "text-[#7f725e] dark:text-[#7c7252]",
+			"bg-[#ffbe3d] text-[#332600] dark:bg-[#4f3d17] dark:text-[#ffe7ad]",
+		lineClass: "bg-[#ffbe3d] dark:bg-[#f0ba4d]",
+		textClass: "text-[#7f725e] dark:text-[#f0cf7a]",
 	},
 	outage: {
 		title: "Service Disruption",
 		shortLabel: "Outage",
 		description: "An outage is affecting one or more services.",
 		sectionClass:
-			"border-[#cc00034d] bg-[#ffe8e8] dark:border-[#382327] dark:bg-[#25191b]",
+			"border-[#cc00034d] bg-[#ffe8e8] dark:border-[#b85563] dark:bg-[#321c20]",
 		headerClass:
-			"bg-[#e1282a] text-white dark:bg-[#291519] dark:text-foreground/75",
-		lineClass: "bg-[#e1282a]",
-		textClass: "text-[#915a5a] dark:text-[#915a5a]",
+			"bg-[#e1282a] text-white dark:bg-[#622630] dark:text-[#ffe1e5]",
+		lineClass: "bg-[#e1282a] dark:bg-[#cf6675]",
+		textClass: "text-[#915a5a] dark:text-[#ee9b9b]",
 	},
 } as const;