feat!: active users stats and improved logging and healthcheck

app/src/views/StatsView.styles.ts

@@ -0,0 +1,44 @@
+import { makeStyles, tokens } from "@fluentui/react-components";
+
+export const useStyles = makeStyles({
+	root:
+	{
+		display: "flex",
+		flexFlow: "column",
+		marginBottom: "80px"
+	},
+	container:
+	{
+		display: "flex",
+		padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalMNudge}`,
+		gap: tokens.spacingHorizontalMNudge,
+		boxShadow: tokens.shadow4,
+		borderRadius: tokens.borderRadiusMedium
+	},
+	statsButton:
+	{
+		pointerEvents: "none"
+	},
+	statsButtonIcon:
+	{
+		color: tokens.colorBrandForeground1
+	},
+	statusIconHealthy:
+	{
+		color: tokens.colorStatusSuccessBorderActive,
+	},
+	statusIconUnhealthy:
+	{
+		color: tokens.colorStatusDangerBorderActive,
+	},
+	reportSubtitle:
+	{
+		display: "flex",
+		alignItems: "center",
+		gap: tokens.spacingHorizontalS
+	},
+	reportContent:
+	{
+		userSelect: "text"
+	}
+});