Phase 2: Docker and OIDC auth

frontend/src/components/MetricCard.tsx

@@ -1,3 +1,5 @@
+import { Card, CardContent, Typography } from "@mui/material";
+
 interface Props {
 	label: string;
 	value: string;
@@ -6,14 +8,28 @@ interface Props {
 
 export function MetricCard({ label, value, subtext }: Props) {
 	return (
-		<div className="rounded-lg border p-4">
-			<p className="text-xs text-gray-500 uppercase tracking-wide">{label}</p>
-			<p className="text-2xl font-bold mt-1">{value}</p>
-			{subtext && (
-				<p className="text-xs text-gray-400 mt-1 whitespace-pre-line">
-					{subtext}
-				</p>
-			)}
-		</div>
+		<Card variant="outlined">
+			<CardContent>
+				<Typography
+					variant="caption"
+					color="text.secondary"
+					sx={{ textTransform: "uppercase" }}
+				>
+					{label}
+				</Typography>
+				<Typography variant="h5" sx={{ mt: 0.5, fontWeight: 700 }}>
+					{value}
+				</Typography>
+				{subtext && (
+					<Typography
+						variant="caption"
+						color="text.secondary"
+						sx={{ whiteSpace: "pre-line" }}
+					>
+						{subtext}
+					</Typography>
+				)}
+			</CardContent>
+		</Card>
 	);
 }