fix: remove ternaries in css

jaaydenh · jaaydenh · commit 1eedda818172 · 2024-09-05T23:06:25.000Z
diff --git a/site/src/components/EmptyState/EmptyState.tsx b/site/src/components/EmptyState/EmptyState.tsx
@@ -25,17 +25,23 @@ export const EmptyState: FC<EmptyStateProps> = ({
 }) => {
 	return (
 		<div
-			css={{
-				overflow: "hidden",
-				display: "flex",
-				flexDirection: "column",
-				justifyContent: "center",
-				alignItems: "center",
-				textAlign: "center",
-				minHeight: isCompact ? 180 : 360,
-				padding: isCompact ? "10px 40px" : "80px 40px",
-				position: "relative",
-			}}
+			css={[
+				{
+					overflow: "hidden",
+					display: "flex",
+					flexDirection: "column",
+					justifyContent: "center",
+					alignItems: "center",
+					textAlign: "center",
+					minHeight: 360,
+					padding: "80px 40px",
+					position: "relative",
+				},
+				isCompact && {
+					minHeight: 180,
+					padding: "10px 40px",
+				},
+			]}
 			{...attrs}
 		>
 			<h5 css={{ fontSize: 24, fontWeight: 500, margin: 0 }}>{message}</h5>
diff --git a/site/src/components/StatusIndicator/StatusIndicator.tsx b/site/src/components/StatusIndicator/StatusIndicator.tsx
@@ -15,17 +15,19 @@ export const StatusIndicator: FC<StatusIndicatorProps> = ({
 
 	return (
 		<div
-			css={{
-				height: 8,
-				width: 8,
-				borderRadius: 4,
-				backgroundColor:
-					variant === "solid" ? theme.roles[color].fill.solid : undefined,
-				border:
-					variant === "outlined"
-						? `1px solid ${theme.roles[color].outline}`
-						: undefined,
-			}}
+			css={[
+				{
+					height: 8,
+					width: 8,
+					borderRadius: 4,
+				},
+				variant === "solid" && {
+					backgroundColor: theme.roles[color].fill.solid,
+				},
+				variant === "outlined" && {
+					border: `1px solid ${theme.roles[color].outline}`,
+				},
+			]}
 		/>
 	);
 };
