From 537e35dd94c64f63e048b3b6ef84d7f1086fe6f7 Mon Sep 17 00:00:00 2001
From: Jake Howell <jacob@coder.com>
Date: Thu, 23 Apr 2026 22:19:34 +1000
Subject: [PATCH] chore: de-css `<UserSettingsPage />` children (#24647)

This is a cleanup for some leftover `css={}` props within our
`site/src/pages/UserSettingsPage/...` pages.
---
 .../ExternalAuthPage/ExternalAuthPageView.tsx |  8 +-----
 .../SSHKeysPage/SSHKeysPageView.tsx           | 21 ++-------------
 site/src/pages/UserSettingsPage/Section.tsx   | 26 +++++--------------
 .../TokensPage/TokensPage.tsx                 | 19 ++++----------
 4 files changed, 14 insertions(+), 60 deletions(-)

diff --git a/site/src/pages/UserSettingsPage/ExternalAuthPage/ExternalAuthPageView.tsx b/site/src/pages/UserSettingsPage/ExternalAuthPage/ExternalAuthPageView.tsx
index 67191dd16f..7fb449f5aa 100644
--- a/site/src/pages/UserSettingsPage/ExternalAuthPage/ExternalAuthPageView.tsx
+++ b/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>
 					)}
diff --git a/site/src/pages/UserSettingsPage/SSHKeysPage/SSHKeysPageView.tsx b/site/src/pages/UserSettingsPage/SSHKeysPage/SSHKeysPageView.tsx
index bbec176cf4..b2eb624faf 100644
--- a/site/src/pages/UserSettingsPage/SSHKeysPage/SSHKeysPageView.tsx
+++ b/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>
 						.
diff --git a/site/src/pages/UserSettingsPage/Section.tsx b/site/src/pages/UserSettingsPage/Section.tsx
index 96d81d9406..ce0fc486e8 100644
--- a/site/src/pages/UserSettingsPage/Section.tsx
+++ b/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>>;
diff --git a/site/src/pages/UserSettingsPage/TokensPage/TokensPage.tsx b/site/src/pages/UserSettingsPage/TokensPage/TokensPage.tsx
index 3aa76b8907..cd88cdfdca 100644
--- a/site/src/pages/UserSettingsPage/TokensPage/TokensPage.tsx
+++ b/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;