refactor(site): migrate some components from emotion to tailwind (#24182)

site/src/components/Timeline/TimelineDateRow.tsx

@@ -1,4 +1,3 @@
-import { css, useTheme } from "@emotion/react";
 import type { FC } from "react";
 import { TableCell, TableRow } from "#/components/Table/Table";
 import { formatDate } from "#/utils/time";
@@ -9,25 +8,10 @@ export interface TimelineDateRow {
 }
 
 export const TimelineDateRow: FC<TimelineDateRow> = ({ date }) => {
-	const theme = useTheme();
-
 	return (
-		<TableRow
-			css={css`
-				&:not(:first-of-type) td {
-					border-top: 1px solid ${theme.palette.divider};
-				}
-			`}
-		>
+		<TableRow className="[&:not(:first-of-type)_td]:border-t [&:not(:first-of-type)_td]:border-border">
 			<TableCell
-				css={{
-					padding: "8px 32px !important",
-					background: `${theme.palette.background.paper} !important`,
-					fontSize: 12,
-					position: "relative",
-					color: theme.palette.text.secondary,
-					textTransform: "capitalize",
-				}}
+				className="!py-2 !px-8 !bg-surface-primary text-xs relative text-content-secondary capitalize"
 				title={formatDate(date)}
 			>
 				{createDisplayDate(date)}

site/src/pages/CreateWorkspacePage/SelectedTemplate.tsx

@@ -1,4 +1,3 @@
-import type { Interpolation, Theme } from "@emotion/react";
 import type { FC } from "react";
 import type { Template, TemplateExample } from "#/api/typesGenerated";
 import { Avatar } from "#/components/Avatar/Avatar";
@@ -10,42 +9,28 @@ interface SelectedTemplateProps {
 
 export const SelectedTemplate: FC<SelectedTemplateProps> = ({ template }) => {
 	return (
-		<Stack direction="row" css={styles.template}>
+		<Stack
+			direction="row"
+			className="py-5 px-6 rounded-lg bg-surface-primary border border-solid border-border"
+		>
 			<Avatar
 				variant="icon"
 				size="lg"
 				src={template.icon}
 				fallback={template.name}
 			/>
-
 			<Stack direction="column" spacing={0}>
-				<span css={styles.templateName}>
+				<span className="text-base">
 					{"display_name" in template && template.display_name.length > 0
 						? template.display_name
 						: template.name}
 				</span>
 				{template.description && (
-					<span css={styles.templateDescription}>{template.description}</span>
+					<span className="text-sm text-content-secondary">
+						{template.description}
+					</span>
 				)}
 			</Stack>
 		</Stack>
 	);
 };
-
-const styles = {
-	template: (theme) => ({
-		padding: "20px 24px",
-		borderRadius: 8,
-		backgroundColor: theme.palette.background.paper,
-		border: `1px solid ${theme.palette.divider}`,
-	}),
-
-	templateName: {
-		fontSize: 16,
-	},
-
-	templateDescription: (theme) => ({
-		fontSize: 14,
-		color: theme.palette.text.secondary,
-	}),
-} satisfies Record<string, Interpolation<Theme>>;

site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/DividerWithText.tsx

@@ -1,30 +1,13 @@
-import type { Interpolation, Theme } from "@emotion/react";
 import type { FC, PropsWithChildren } from "react";
+
 export const DividerWithText: FC<PropsWithChildren> = ({ children }) => {
 	return (
-		<div css={styles.container}>
-			<div css={styles.border} />
-			<span css={styles.content}>{children}</span>
-			<div css={styles.border} />
+		<div className="flex items-center">
+			<div className="border-0 border-b-2 border-solid border-border w-full" />
+			<span className="py-1 px-4 text-xl text-content-secondary">
+				{children}
+			</span>
+			<div className="border-0 border-b-2 border-solid border-border w-full" />
 		</div>
 	);
 };
-
-const styles = {
-	container: {
-		display: "flex",
-		alignItems: "center",
-	},
-	border: (theme) => ({
-		borderBottom: `2px solid ${theme.palette.divider}`,
-		width: "100%",
-	}),
-	content: (theme) => ({
-		paddingTop: 4,
-		paddingBottom: 4,
-		paddingRight: 16,
-		paddingLeft: 16,
-		fontSize: theme.typography.h5.fontSize,
-		color: theme.palette.text.secondary,
-	}),
-} satisfies Record<string, Interpolation<Theme>>;

site/src/pages/TemplatePage/TemplateDocsPage/TemplateDocsPage.tsx

@@ -1,4 +1,3 @@
-import { useTheme } from "@emotion/react";
 import frontMatter from "front-matter";
 import { MemoizedMarkdown } from "#/components/Markdown/Markdown";
 import { useTemplateLayoutContext } from "#/pages/TemplatePage/TemplateLayout";
@@ -6,30 +5,16 @@ import { pageTitle } from "#/utils/page";
 
 export default function TemplateDocsPage() {
 	const { template, activeVersion } = useTemplateLayoutContext();
-	const theme = useTheme();
-
 	const readme = frontMatter(activeVersion.readme);
 
 	return (
 		<>
 			<title>{pageTitle(template.name, "Documentation")}</title>
-
 			<div
-				css={{
-					background: theme.palette.background.paper,
-					border: `1px solid ${theme.palette.divider}`,
-					borderRadius: 8,
-				}}
+				className="bg-surface-primary border border-solid border-border rounded-lg"
 				id="readme"
 			>
-				<div
-					css={{
-						color: theme.palette.text.secondary,
-						fontWeight: 600,
-						padding: "16px 24px",
-						borderBottom: `1px solid ${theme.palette.divider}`,
-					}}
-				>
+				<div className="text-content-secondary font-semibold py-4 px-6 border-b border-border">
 					README.md
 				</div>
 				<div className="px-6 pb-10 max-w-[800px] mx-auto">