chore: de-css <UserSettingsPage /> children (#24647)

This is a cleanup for some leftover `css={}` props within our
`site/src/pages/UserSettingsPage/...` pages.

site/src/pages/UserSettingsPage/ExternalAuthPage/ExternalAuthPageView.tsx

@@ -1,4 +1,3 @@
-import { useTheme } from "@emotion/react";
 import { EllipsisVerticalIcon, RefreshCcwIcon } from "lucide-react";
 import { type FC, useCallback, useEffect, useState } from "react";
 import { useQuery } from "react-query";
@@ -114,7 +113,6 @@ const ExternalAuthRow: FC<ExternalAuthRowProps> = ({
 	onUnlinkExternalAuth,
 	onValidateExternalAuth,
 }) => {
-	const theme = useTheme();
 	const name = app.display_name || app.id || app.type;
 	const authURL = `/external-auth/${app.id}`;
 
@@ -152,11 +150,7 @@ const ExternalAuthRow: FC<ExternalAuthRowProps> = ({
 
 					{link?.validate_error && (
 						<span>
-							<span
-								css={{ paddingLeft: "1em", color: theme.palette.error.light }}
-							>
-								Error:{" "}
-							</span>
+							<span className="pl-[1em] text-content-destructive">Error: </span>
 							{link?.validate_error}
 						</span>
 					)}

site/src/pages/UserSettingsPage/SSHKeysPage/SSHKeysPageView.tsx

@@ -1,4 +1,3 @@
-import { useTheme } from "@emotion/react";
 import CircularProgress from "@mui/material/CircularProgress";
 import type { FC } from "react";
 import type { GitSSHKey } from "#/api/typesGenerated";
@@ -20,8 +19,6 @@ export const SSHKeysPageView: FC<SSHKeysPageViewProps> = ({
 	sshKey,
 	onRegenerateClick,
 }) => {
-	const theme = useTheme();
-
 	if (isLoading) {
 		return (
 			<div className="p-8">
@@ -38,25 +35,11 @@ export const SSHKeysPageView: FC<SSHKeysPageViewProps> = ({
 
 			{sshKey && (
 				<>
-					<p
-						css={{
-							fontSize: 14,
-							color: theme.palette.text.secondary,
-							margin: 0,
-						}}
-					>
+					<p className="leading-relaxed font-normal text-sm text-content-secondary m-0">
 						The following public key is used to authenticate Git in workspaces.
 						You may add it to Git services (such as GitHub) that you need to
 						access from your workspace. Coder configures authentication via{" "}
-						<code
-							css={{
-								background: theme.palette.divider,
-								fontSize: 12,
-								padding: "2px 4px",
-								color: theme.palette.text.primary,
-								borderRadius: 2,
-							}}
-						>
+						<code className="bg-surface-quaternary text-xs py-0.5 px-1 text-content-primary rounded-sm">
 							$GIT_SSH_COMMAND
 						</code>
 						.

site/src/pages/UserSettingsPage/Section.tsx

@@ -1,4 +1,3 @@
-import type { Interpolation, Theme } from "@emotion/react";
 import type { FC, ReactNode } from "react";
 import {
 	FeatureStageBadge,
@@ -21,6 +20,9 @@ interface SectionProps {
 	featureStage?: keyof typeof featureStageBadgeTypes;
 }
 
+const DESCRIPTION_CLASS =
+	"text-content-secondary text-base m-0 mt-1 leading-normal";
+
 export const Section: FC<SectionProps> = ({
 	id,
 	title,
@@ -36,7 +38,7 @@ export const Section: FC<SectionProps> = ({
 		<section className={className} id={id} data-testid={id}>
 			<div className={layout === "fluid" ? "max-w-full" : "max-w-[500px]"}>
 				{(title || description) && (
-					<div css={styles.header}>
+					<div className="mb-6 flex flex-row justify-between">
 						<div>
 							{title && (
 								<Stack direction="row" alignItems="center">
@@ -51,10 +53,10 @@ export const Section: FC<SectionProps> = ({
 								</Stack>
 							)}
 							{description && typeof description === "string" && (
-								<p css={styles.description}>{description}</p>
+								<p className={DESCRIPTION_CLASS}>{description}</p>
 							)}
 							{description && typeof description !== "string" && (
-								<div css={styles.description}>{description}</div>
+								<div className={DESCRIPTION_CLASS}>{description}</div>
 							)}
 						</div>
 						{toolbar && <div>{toolbar}</div>}
@@ -66,19 +68,3 @@ export const Section: FC<SectionProps> = ({
 		</section>
 	);
 };
-
-const styles = {
-	header: {
-		marginBottom: 24,
-		display: "flex",
-		flexDirection: "row",
-		justifyContent: "space-between",
-	},
-	description: (theme) => ({
-		color: theme.palette.text.secondary,
-		fontSize: 16,
-		margin: 0,
-		marginTop: 4,
-		lineHeight: "140%",
-	}),
-} satisfies Record<string, Interpolation<Theme>>;

site/src/pages/UserSettingsPage/TokensPage/TokensPage.tsx

@@ -1,10 +1,10 @@
-import { css, type Interpolation, type Theme } from "@emotion/react";
 import { PlusIcon } from "lucide-react";
 import { type FC, useState } from "react";
 import { Link as RouterLink } from "react-router";
 import type { APIKeyWithOwner } from "#/api/typesGenerated";
 import { Button } from "#/components/Button/Button";
 import { Stack } from "#/components/Stack/Stack";
+import { cn } from "#/utils/cn";
 import { Section } from "../Section";
 import { ConfirmDeleteDialog } from "./ConfirmDeleteDialog";
 import { useTokensData } from "./hooks";
@@ -34,7 +34,10 @@ const TokensPage: FC = () => {
 		<>
 			<Section
 				title="Tokens"
-				css={styles.section}
+				className={cn(
+					"[&_code]:bg-surface-secondary [&_code]:text-content-primary",
+					"[&_code]:text-xs [&_code]:px-1 [&_code]:py-0.5 [&_code]:rounded-sm",
+				)}
 				description={
 					<>
 						Tokens are used to authenticate with the Coder API. You can create a
@@ -75,16 +78,4 @@ const TokenActions: FC = () => (
 	</Stack>
 );
 
-const styles = {
-	section: (theme) => css`
-		& code {
-			background: ${theme.palette.divider};
-			font-size: 12px;
-			padding: 2px 4px;
-			color: ${theme.palette.text.primary};
-			border-radius: 2px;
-		}
-	`,
-} satisfies Record<string, Interpolation<Theme>>;
-
 export default TokensPage;