feat: update StatusIndicator for outlined variant

jaaydenh · jaaydenh · commit 8bdac4972d92 · 2024-09-03T15:40:27.000Z
diff --git a/site/src/components/StatusIndicator/StatusIndicator.tsx b/site/src/components/StatusIndicator/StatusIndicator.tsx
@@ -4,9 +4,13 @@ import type { ThemeRole } from "theme/roles";
 
 interface StatusIndicatorProps {
 	color: ThemeRole;
+	variant?: "solid" | "outlined";
 }
 
-export const StatusIndicator: FC<StatusIndicatorProps> = ({ color }) => {
+export const StatusIndicator: FC<StatusIndicatorProps> = ({
+	color,
+	variant = "solid",
+}) => {
 	const theme = useTheme();
 
 	return (
@@ -15,7 +19,12 @@ export const StatusIndicator: FC<StatusIndicatorProps> = ({ color }) => {
 				height: 8,
 				width: 8,
 				borderRadius: 4,
-				backgroundColor: theme.roles[color].fill.solid,
+				backgroundColor:
+					variant === "solid" ? theme.roles[color].fill.solid : undefined,
+				border:
+					variant === "outlined"
+						? `1px solid ${theme.roles[color].outline}`
+						: undefined,
 			}}
 		/>
 	);
