fix: resolve <SingleSignOnSection /> icon size (#21826)

This pull-request addresses the size of the iconography within the
`<SingleSignOnSection />` section component. As a side-effect of the
changes in #21347 we are now rendering this too large.

Furthermore, to catch these issues in future we've introduced two new
stories within `SecurityPageView.stories.tsx` which render both `oidc`
and `github` login routes.

| Old | New |
| --- | --- |
| <img width="520" height="399" alt="OLD_SSO_PROVIDER"
src="https://github.com/user-attachments/assets/f6687b9a-d6bc-4bca-859a-0b59a3f6ba03"
/> | <img width="520" height="398" alt="NEW_SSO_PROVIDER"
src="https://github.com/user-attachments/assets/5beb8149-3e07-4dbc-9e0f-06f9207ecc59"
/> |

site/src/pages/UserSettingsPage/SecurityPage/SecurityPageView.stories.tsx

@@ -66,3 +66,33 @@ export const ConfirmingOIDCConversion: Story = {
 		defaultArgs,
 	),
 };
+
+export const AuthenticatedWithGithub: Story = {
+	args: {
+		...defaultArgs,
+		oidc: {
+			section: {
+				...defaultArgs.oidc!.section,
+				userLoginType: {
+					login_type: "github",
+				},
+				authMethods: MockAuthMethodsAll,
+			},
+		},
+	},
+};
+
+export const AuthenticatedWithOIDC: Story = {
+	args: {
+		...defaultArgs,
+		oidc: {
+			section: {
+				...defaultArgs.oidc!.section,
+				userLoginType: {
+					login_type: "oidc",
+				},
+				authMethods: MockAuthMethodsAll,
+			},
+		},
+	},
+};

site/src/pages/UserSettingsPage/SecurityPage/SingleSignOnSection.tsx

@@ -1,4 +1,3 @@
-import { useTheme } from "@emotion/react";
 import Link from "@mui/material/Link";
 import TextField from "@mui/material/TextField";
 import { API } from "api/api";
@@ -133,8 +132,6 @@ export const SingleSignOnSection: FC<SingleSignOnSectionProps> = ({
 	isConfirming,
 	error,
 }) => {
-	const theme = useTheme();
-
 	const noSsoEnabled = !authMethods.github.enabled && !authMethods.oidc.enabled;
 
 	return (
@@ -144,7 +141,7 @@ export const SingleSignOnSection: FC<SingleSignOnSectionProps> = ({
 				title="Single Sign On"
 				description="Authenticate in Coder using one-click"
 			>
-				<div css={{ display: "grid", gap: "16px" }}>
+				<div className="grid gap-4">
 					{userLoginType.login_type === "password" ? (
 						<>
 							{authMethods.github.enabled && (
@@ -176,24 +173,8 @@ export const SingleSignOnSection: FC<SingleSignOnSectionProps> = ({
 							{noSsoEnabled && <SSOEmptyState />}
 						</>
 					) : (
-						<div
-							css={{
-								background: theme.palette.background.paper,
-								borderRadius: 8,
-								border: `1px solid ${theme.palette.divider}`,
-								padding: 16,
-								display: "flex",
-								gap: 16,
-								alignItems: "center",
-								fontSize: 14,
-							}}
-						>
-							<CircleCheckIcon
-								css={{
-									color: theme.palette.success.light,
-								}}
-								className="size-icon-xs"
-							/>
+						<div className="bg-surface-secondary rounded-md border border-border border-solid p-4 flex gap-4 items-center text-sm">
+							<CircleCheckIcon className="text-content-success size-icon-xs" />
 							<span>
 								Authenticated with{" "}
 								<strong>
@@ -202,9 +183,9 @@ export const SingleSignOnSection: FC<SingleSignOnSectionProps> = ({
 										: getOIDCLabel(authMethods.oidc)}
 								</strong>
 							</span>
-							<div css={{ marginLeft: "auto", lineHeight: 1 }}>
+							<div className="leading-none ml-auto">
 								{userLoginType.login_type === "github" ? (
-									<ExternalImage src="/icon/github.svg" />
+									<ExternalImage src="/icon/github.svg" className="size-4" />
 								) : (
 									<OIDCIcon oidcAuth={authMethods.oidc} />
 								)}
@@ -235,11 +216,7 @@ const OIDCIcon: FC<OIDCIconProps> = ({ oidcAuth }) => {
 	}
 
 	return (
-		<img
-			alt="Open ID Connect icon"
-			src={oidcAuth.iconUrl}
-			css={{ width: 16, height: 16 }}
-		/>
+		<img alt="Open ID Connect icon" src={oidcAuth.iconUrl} className="size-4" />
 	);
 };