From f7aa9ece8b1960306ba1717837b76704d95ee6cf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=82=B1=E3=82=A4=E3=83=A9?= <mckayla@hey.com>
Date: Thu, 7 Aug 2025 21:30:49 +0000
Subject: [PATCH 1/2] refactor: migrate Badges.tsx from emotion to Tailwind
 styling
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Changes include:
- Removed @emotion/react dependency in Badges.tsx
- Created badge variants using class-variance-authority
- Created a reusable Badge component with Tailwind classes
- Updated all badge components to use the new Badge component
- Used cn utility for conditional class merging

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 site/src/components/Badges/Badges.tsx | 167 ++++++++++----------------
 1 file changed, 61 insertions(+), 106 deletions(-)

diff --git a/site/src/components/Badges/Badges.tsx b/site/src/components/Badges/Badges.tsx
index 278eb890cd2ee..0f6a541473ab8 100644
--- a/site/src/components/Badges/Badges.tsx
+++ b/site/src/components/Badges/Badges.tsx
@@ -1,4 +1,3 @@
-import type { Interpolation, Theme } from "@emotion/react";
 import Tooltip from "@mui/material/Tooltip";
 import { Stack } from "components/Stack/Stack";
 import {
@@ -7,49 +6,57 @@ import {
 	type PropsWithChildren,
 	forwardRef,
 } from "react";
+import { type VariantProps, cva } from "class-variance-authority";
+import { cn } from "utils/cn";
 
-const styles = {
-	badge: {
-		fontSize: 10,
-		height: 24,
-		fontWeight: 600,
-		textTransform: "uppercase",
-		letterSpacing: "0.085em",
-		padding: "0 12px",
-		borderRadius: 9999,
-		display: "flex",
-		alignItems: "center",
-		width: "fit-content",
-		whiteSpace: "nowrap",
+const badgeVariants = cva(
+	"text-[10px] h-6 font-semibold uppercase tracking-[0.085em] px-3 rounded-full flex items-center w-fit whitespace-nowrap",
+	{
+		variants: {
+			variant: {
+				enabled: "border border-success-outline bg-success-background text-success-text",
+				error: "border border-error-outline bg-error-background text-error-text",
+				warn: "border border-warning-outline bg-warning-background text-warning-text",
+				neutral: "border border-l1-outline bg-l1-background text-l1-text",
+				enterprise: "border border-enterprise-border bg-enterprise-background text-enterprise-text",
+				premium: "border border-premium-border bg-premium-background text-premium-text",
+				preview: "border border-preview-outline bg-preview-background text-preview-text",
+				danger: "border border-danger-outline bg-danger-background text-danger-text",
+			},
+		},
+		defaultVariants: {
+			variant: "neutral",
+		},
 	},
+);
 
-	enabledBadge: (theme) => ({
-		border: `1px solid ${theme.roles.success.outline}`,
-		backgroundColor: theme.roles.success.background,
-		color: theme.roles.success.text,
-	}),
-	errorBadge: (theme) => ({
-		border: `1px solid ${theme.roles.error.outline}`,
-		backgroundColor: theme.roles.error.background,
-		color: theme.roles.error.text,
-	}),
-	warnBadge: (theme) => ({
-		border: `1px solid ${theme.roles.warning.outline}`,
-		backgroundColor: theme.roles.warning.background,
-		color: theme.roles.warning.text,
-	}),
-} satisfies Record<string, Interpolation<Theme>>;
+interface BadgeProps
+	extends HTMLAttributes<HTMLSpanElement>,
+	VariantProps<typeof badgeVariants> {
+}
+
+const Badge = forwardRef<HTMLSpanElement, BadgeProps>(
+	({ className, variant, ...props }, ref) => {
+		return (
+			<span
+				{...props}
+				ref={ref}
+				className={cn(badgeVariants({ variant }), className)}
+			/>
+		);
+	},
+);
 
 export const EnabledBadge: FC = () => {
 	return (
-		<span css={[styles.badge, styles.enabledBadge]} className="option-enabled">
+		<Badge variant="enabled" className="option-enabled">
 			Enabled
-		</span>
+		</Badge>
 	);
 };
 
 export const EntitledBadge: FC = () => {
-	return <span css={[styles.badge, styles.enabledBadge]}>Entitled</span>;
+	return <Badge variant="enabled">Entitled</Badge>;
 };
 
 interface HealthyBadge {
@@ -57,20 +64,20 @@ interface HealthyBadge {
 }
 export const HealthyBadge: FC<HealthyBadge> = ({ derpOnly }) => {
 	return (
-		<span css={[styles.badge, styles.enabledBadge]}>
+		<Badge variant="enabled">
 			{derpOnly ? "Healthy (DERP only)" : "Healthy"}
-		</span>
+		</Badge>
 	);
 };
 
 export const NotHealthyBadge: FC = () => {
-	return <span css={[styles.badge, styles.errorBadge]}>Unhealthy</span>;
+	return <Badge variant="error">Unhealthy</Badge>;
 };
 
 export const NotRegisteredBadge: FC = () => {
 	return (
 		<Tooltip title="Workspace Proxy has never come online and needs to be started.">
-			<span css={[styles.badge, styles.warnBadge]}>Never seen</span>
+			<Badge variant="warn">Never seen</Badge>
 		</Tooltip>
 	);
 };
@@ -78,7 +85,7 @@ export const NotRegisteredBadge: FC = () => {
 export const NotReachableBadge: FC = () => {
 	return (
 		<Tooltip title="Workspace Proxy not responding to http(s) requests.">
-			<span css={[styles.badge, styles.warnBadge]}>Not reachable</span>
+			<Badge variant="warn">Not reachable</Badge>
 		</Tooltip>
 	);
 };
@@ -88,113 +95,61 @@ export const DisabledBadge: FC = forwardRef<
 	HTMLAttributes<HTMLSpanElement>
 >((props, ref) => {
 	return (
-		<span
+		<Badge
 			{...props}
 			ref={ref}
-			css={[
-				styles.badge,
-				(theme) => ({
-					border: `1px solid ${theme.experimental.l1.outline}`,
-					backgroundColor: theme.experimental.l1.background,
-					color: theme.experimental.l1.text,
-				}),
-			]}
-			className="option-disabled"
+			variant="neutral"
+			className={cn("option-disabled", props.className)}
 		>
 			Disabled
-		</span>
+		</Badge>
 	);
 });
 
 export const EnterpriseBadge: FC = () => {
 	return (
-		<span
-			css={[
-				styles.badge,
-				(theme) => ({
-					backgroundColor: theme.branding.enterprise.background,
-					border: `1px solid ${theme.branding.enterprise.border}`,
-					color: theme.branding.enterprise.text,
-				}),
-			]}
-		>
+		<Badge variant="enterprise">
 			Enterprise
-		</span>
+		</Badge>
 	);
 };
 
 export const PremiumBadge: FC = () => {
 	return (
-		<span
-			css={[
-				styles.badge,
-				(theme) => ({
-					backgroundColor: theme.branding.premium.background,
-					border: `1px solid ${theme.branding.premium.border}`,
-					color: theme.branding.premium.text,
-				}),
-			]}
-		>
+		<Badge variant="premium">
 			Premium
-		</span>
+		</Badge>
 	);
 };
 
 export const PreviewBadge: FC = () => {
 	return (
-		<span
-			css={[
-				styles.badge,
-				(theme) => ({
-					border: `1px solid ${theme.roles.preview.outline}`,
-					backgroundColor: theme.roles.preview.background,
-					color: theme.roles.preview.text,
-				}),
-			]}
-		>
+		<Badge variant="preview">
 			Preview
-		</span>
+		</Badge>
 	);
 };
 
 export const AlphaBadge: FC = () => {
 	return (
-		<span
-			css={[
-				styles.badge,
-				(theme) => ({
-					border: `1px solid ${theme.roles.preview.outline}`,
-					backgroundColor: theme.roles.preview.background,
-					color: theme.roles.preview.text,
-				}),
-			]}
-		>
+		<Badge variant="preview">
 			Alpha
-		</span>
+		</Badge>
 	);
 };
 
 export const DeprecatedBadge: FC = () => {
 	return (
-		<span
-			css={[
-				styles.badge,
-				(theme) => ({
-					border: `1px solid ${theme.roles.danger.outline}`,
-					backgroundColor: theme.roles.danger.background,
-					color: theme.roles.danger.text,
-				}),
-			]}
-		>
+		<Badge variant="danger">
 			Deprecated
-		</span>
+		</Badge>
 	);
 };
 
 export const Badges: FC<PropsWithChildren> = ({ children }) => {
 	return (
 		<Stack
-			css={{ margin: "0 0 16px" }}
+			className="mb-4"
 			direction="row"
 			alignItems="center"
 			spacing={1}
@@ -202,4 +157,4 @@ export const Badges: FC<PropsWithChildren> = ({ children }) => {
 			{children}
 		</Stack>
 	);
-};
+};
\ No newline at end of file

From 026a1661e5b28a10eae52c2057c498ad877784b2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=82=B1=E3=82=A4=E3=83=A9?= <mckayla@hey.com>
Date: Thu, 7 Aug 2025 21:49:28 +0000
Subject: [PATCH 2/2] style: apply code formatting to Badges.tsx
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 site/src/components/Badges/Badges.tsx | 62 +++++++++------------------
 1 file changed, 21 insertions(+), 41 deletions(-)

diff --git a/site/src/components/Badges/Badges.tsx b/site/src/components/Badges/Badges.tsx
index 0f6a541473ab8..3c63ce70f05ad 100644
--- a/site/src/components/Badges/Badges.tsx
+++ b/site/src/components/Badges/Badges.tsx
@@ -1,4 +1,5 @@
 import Tooltip from "@mui/material/Tooltip";
+import { type VariantProps, cva } from "class-variance-authority";
 import { Stack } from "components/Stack/Stack";
 import {
 	type FC,
@@ -6,7 +7,6 @@ import {
 	type PropsWithChildren,
 	forwardRef,
 } from "react";
-import { type VariantProps, cva } from "class-variance-authority";
 import { cn } from "utils/cn";
 
 const badgeVariants = cva(
@@ -14,14 +14,20 @@ const badgeVariants = cva(
 	{
 		variants: {
 			variant: {
-				enabled: "border border-success-outline bg-success-background text-success-text",
-				error: "border border-error-outline bg-error-background text-error-text",
+				enabled:
+					"border border-success-outline bg-success-background text-success-text",
+				error:
+					"border border-error-outline bg-error-background text-error-text",
 				warn: "border border-warning-outline bg-warning-background text-warning-text",
 				neutral: "border border-l1-outline bg-l1-background text-l1-text",
-				enterprise: "border border-enterprise-border bg-enterprise-background text-enterprise-text",
-				premium: "border border-premium-border bg-premium-background text-premium-text",
-				preview: "border border-preview-outline bg-preview-background text-preview-text",
-				danger: "border border-danger-outline bg-danger-background text-danger-text",
+				enterprise:
+					"border border-enterprise-border bg-enterprise-background text-enterprise-text",
+				premium:
+					"border border-premium-border bg-premium-background text-premium-text",
+				preview:
+					"border border-preview-outline bg-preview-background text-preview-text",
+				danger:
+					"border border-danger-outline bg-danger-background text-danger-text",
 			},
 		},
 		defaultVariants: {
@@ -32,8 +38,7 @@ const badgeVariants = cva(
 
 interface BadgeProps
 	extends HTMLAttributes<HTMLSpanElement>,
-	VariantProps<typeof badgeVariants> {
-}
+		VariantProps<typeof badgeVariants> {}
 
 const Badge = forwardRef<HTMLSpanElement, BadgeProps>(
 	({ className, variant, ...props }, ref) => {
@@ -107,54 +112,29 @@ export const DisabledBadge: FC = forwardRef<
 });
 
 export const EnterpriseBadge: FC = () => {
-	return (
-		<Badge variant="enterprise">
-			Enterprise
-		</Badge>
-	);
+	return <Badge variant="enterprise">Enterprise</Badge>;
 };
 
 export const PremiumBadge: FC = () => {
-	return (
-		<Badge variant="premium">
-			Premium
-		</Badge>
-	);
+	return <Badge variant="premium">Premium</Badge>;
 };
 
 export const PreviewBadge: FC = () => {
-	return (
-		<Badge variant="preview">
-			Preview
-		</Badge>
-	);
+	return <Badge variant="preview">Preview</Badge>;
 };
 
 export const AlphaBadge: FC = () => {
-	return (
-		<Badge variant="preview">
-			Alpha
-		</Badge>
-	);
+	return <Badge variant="preview">Alpha</Badge>;
 };
 
 export const DeprecatedBadge: FC = () => {
-	return (
-		<Badge variant="danger">
-			Deprecated
-		</Badge>
-	);
+	return <Badge variant="danger">Deprecated</Badge>;
 };
 
 export const Badges: FC<PropsWithChildren> = ({ children }) => {
 	return (
-		<Stack
-			className="mb-4"
-			direction="row"
-			alignItems="center"
-			spacing={1}
-		>
+		<Stack className="mb-4" direction="row" alignItems="center" spacing={1}>
 			{children}
 		</Stack>
 	);
-};
\ No newline at end of file
+};

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>pFad - Phonifier reborn</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
</head>
<body>
<h1>Pfad - The Proxy pFad of &#169; 2024 Garber Painting. All rights reserved.</h1>


<!-- Disclaimer -->
<p>Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.</p>
<br>
<p>Alternative Proxies:</p><p><a href="http://rainy.clevelandohioweatherforecast.com/php-proxy/index.php?q=https://patch-diff.githubusercontent.com/raw/coder/coder/pull/19246.patch" target="_blank">Alternative Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/index.php?u=https://patch-diff.githubusercontent.com/raw/coder/coder/pull/19246.patch" target="_blank">pFad Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/v3index.php?u=https://patch-diff.githubusercontent.com/raw/coder/coder/pull/19246.patch" target="_blank">pFad v3 Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/v4index.php?u=https://patch-diff.githubusercontent.com/raw/coder/coder/pull/19246.patch" target="_blank">pFad v4 Proxy</a></p></body>
</html>