fix: update WorkspacesEmpty.tsx from material ui to tailwind (#16886)

site/src/pages/WorkspacesPage/WorkspacesEmpty.tsx

@@ -25,20 +25,8 @@ export const WorkspacesEmpty: FC<WorkspacesEmptyProps> = ({
 	const defaultMessage =
 		"A workspace is your personal, customizable development environment.";
 	const defaultImage = (
-		<div
-			css={{
-				maxWidth: "50%",
-				height: 272,
-				overflow: "hidden",
-				marginTop: 48,
-				opacity: 0.85,
-
-				"& img": {
-					maxWidth: "100%",
-				},
-			}}
-		>
-			<img src="/featured/workspaces.webp" alt="" />
+		<div className="max-w-[50%] h-[272px] overflow-hidden mt-12 opacity-85">
+			<img src="/featured/workspaces.webp" alt="" className="max-w-full" />
 		</div>
 	);
 
@@ -56,9 +44,7 @@ export const WorkspacesEmpty: FC<WorkspacesEmptyProps> = ({
 						<Link to="/templates">Go to templates</Link>
 					</Button>
 				}
-				css={{
-					paddingBottom: 0,
-				}}
+				className="pb-0"
 				image={defaultImage}
 			/>
 		);
@@ -69,9 +55,7 @@ export const WorkspacesEmpty: FC<WorkspacesEmptyProps> = ({
 			<TableEmpty
 				message={defaultTitle}
 				description={`${defaultMessage} There are no templates available, but you will see them here once your admin adds them.`}
-				css={{
-					paddingBottom: 0,
-				}}
+				className="pb-0"
 				image={defaultImage}
 			/>
 		);
@@ -83,70 +67,30 @@ export const WorkspacesEmpty: FC<WorkspacesEmptyProps> = ({
 			description={`${defaultMessage} Select one template below to start.`}
 			cta={
 				<div>
-					<div
-						css={{
-							display: "flex",
-							flexWrap: "wrap",
-							gap: 16,
-							marginBottom: 24,
-							justifyContent: "center",
-							maxWidth: "800px",
-						}}
-					>
+					<div className="flex flex-wrap gap-4 mb-6 justify-center max-w-[800px]">
 						{featuredTemplates?.map((t) => (
 							<Link
 								key={t.id}
 								to={`${getLink(
 									linkToTemplate(t.organization_name, t.name),
 								)}/workspace`}
-								css={(theme) => ({
-									width: "320px",
-									padding: 16,
-									borderRadius: 6,
-									border: `1px solid ${theme.palette.divider}`,
-									textAlign: "left",
-									display: "flex",
-									gap: 16,
-									textDecoration: "none",
-									color: "inherit",
-
-									"&:hover": {
-										backgroundColor: theme.palette.background.paper,
-									},
-								})}
+								className="w-[320px] p-4 rounded-md border border-solid border-surface-quaternary text-left flex gap-4 no-underline text-inherit hover:bg-surface-grey"
 							>
-								<div css={{ flexShrink: 0, paddingTop: 4 }}>
+								<div className="flex-shrink-0 pt-1">
 									<Avatar variant="icon" src={t.icon} fallback={t.name} />
 								</div>
 
-								<div css={{ width: "100%", minWidth: "0" }}>
-									<h4
-										css={{
-											fontSize: 14,
-											fontWeight: 600,
-											margin: 0,
-											overflow: "hidden",
-											textOverflow: "ellipsis",
-											whiteSpace: "nowrap",
-										}}
-									>
+								<div className="w-full min-w-0">
+									<h4 className="text-sm font-semibold m-0 overflow-hidden truncate whitespace-nowrap">
 										{t.display_name || t.name}
 									</h4>
 
 									<p
-										css={(theme) => ({
-											fontSize: 13,
-											color: theme.palette.text.secondary,
-											lineHeight: "1.4",
-											margin: 0,
-											paddingTop: "4px",
-
-											// We've had users plug URLs directly into the
-											// descriptions, when those URLS have no hyphens or other
-											// easy semantic breakpoints. Need to set this to ensure
-											// those URLs don't break outside their containing boxes
-											wordBreak: "break-word",
-										})}
+										// We've had users plug URLs directly into the
+										// descriptions, when those URLS have no hyphens or other
+										// easy semantic breakpoints. Need to set this to ensure
+										// those URLs don't break outside their containing boxes
+										className="text-sm text-gray-400 leading-[1.4] m-0 pt-1 break-words"
 									>
 										{t.description}
 									</p>