feat: use StatusIndicator instead of Circle

jaaydenh · jaaydenh · commit b83118f3f9b1 · 2024-09-05T23:06:25.000Z
diff --git a/site/src/pages/ManagementSettingsPage/IdpSyncPage/IdpSyncPageView.tsx b/site/src/pages/ManagementSettingsPage/IdpSyncPage/IdpSyncPageView.tsx
@@ -14,6 +14,7 @@ import { ChooseOne, Cond } from "components/Conditionals/ChooseOne";
 import { EmptyState } from "components/EmptyState/EmptyState";
 import { Paywall } from "components/Paywall/Paywall";
 import { Stack } from "components/Stack/Stack";
+import { StatusIndicator } from "components/StatusIndicator/StatusIndicator";
 import {
 	TableLoaderSkeleton,
 	TableRowSkeleton,
@@ -25,26 +26,6 @@ export type IdpSyncPageViewProps = {
 	oidcConfig: OIDCConfig | undefined;
 };
 
-type CircleProps = {
-	color: string;
-	variant?: "solid" | "outlined";
-};
-
-const Circle: FC<CircleProps> = ({ color, variant = "solid" }) => {
-	return (
-		<div
-			aria-hidden
-			css={{
-				width: 8,
-				height: 8,
-				backgroundColor: variant === "solid" ? color : undefined,
-				border: variant === "outlined" ? `1px solid ${color}` : undefined,
-				borderRadius: 9999,
-			}}
-		/>
-	);
-};
-
 export const IdpSyncPageView: FC<IdpSyncPageViewProps> = ({ oidcConfig }) => {
 	const theme = useTheme();
 	const {
@@ -79,7 +60,7 @@ export const IdpSyncPageView: FC<IdpSyncPageViewProps> = ({ oidcConfig }) => {
 											spacing={1}
 											alignItems="center"
 										>
-											<Circle color={theme.roles.error.fill.solid} />
+											<StatusIndicator color="error" />
 											<p>disabled</p>
 										</Stack>
 									)}
@@ -102,7 +83,7 @@ export const IdpSyncPageView: FC<IdpSyncPageViewProps> = ({ oidcConfig }) => {
 											spacing={1}
 											alignItems="center"
 										>
-											<Circle color={theme.roles.error.fill.solid} />
+											<StatusIndicator color="error" />
 											<p>disabled</p>
 										</Stack>
 									)}
diff --git a/site/src/pages/WorkspacesPage/LastUsed.tsx b/site/src/pages/WorkspacesPage/LastUsed.tsx
@@ -1,32 +1,12 @@
 import { useTheme } from "@emotion/react";
 import { Stack } from "components/Stack/Stack";
+import { StatusIndicator } from "components/StatusIndicator/StatusIndicator";
 import dayjs from "dayjs";
 import relativeTime from "dayjs/plugin/relativeTime";
 import { useTime } from "hooks/useTime";
 import type { FC } from "react";
 
 dayjs.extend(relativeTime);
-
-type CircleProps = {
-	color: string;
-	variant?: "solid" | "outlined";
-};
-
-const Circle: FC<CircleProps> = ({ color, variant = "solid" }) => {
-	return (
-		<div
-			aria-hidden
-			css={{
-				width: 8,
-				height: 8,
-				backgroundColor: variant === "solid" ? color : undefined,
-				border: variant === "outlined" ? `1px solid ${color}` : undefined,
-				borderRadius: 9999,
-			}}
-		/>
-	);
-};
-
 interface LastUsedProps {
 	lastUsedAt: string;
 }
@@ -38,21 +18,19 @@ export const LastUsed: FC<LastUsedProps> = ({ lastUsedAt }) => {
 		const t = dayjs(lastUsedAt);
 		const now = dayjs();
 		let message = t.fromNow();
-		let circle = (
-			<Circle color={theme.palette.text.secondary} variant="outlined" />
-		);
+		let circle = <StatusIndicator color="info" variant="outlined" />;
 
 		if (t.isAfter(now.subtract(1, "hour"))) {
-			circle = <Circle color={theme.roles.success.fill.solid} />;
+			circle = <StatusIndicator color="success" />;
 			// Since the agent reports on a 10m interval,
 			// the last_used_at can be inaccurate when recent.
 			message = "Now";
 		} else if (t.isAfter(now.subtract(3, "day"))) {
-			circle = <Circle color={theme.palette.text.secondary} />;
+			circle = <StatusIndicator color="info" />;
 		} else if (t.isAfter(now.subtract(1, "month"))) {
-			circle = <Circle color={theme.roles.warning.fill.solid} />;
+			circle = <StatusIndicator color="warning" />;
 		} else if (t.isAfter(now.subtract(100, "year"))) {
-			circle = <Circle color={theme.roles.error.fill.solid} />;
+			circle = <StatusIndicator color="error" />;
 		} else {
 			message = "Never";
 		}
