From 57af5ed06e4abbd7ffdde653bc7813016ec98b7a Mon Sep 17 00:00:00 2001
From: Jaayden Halko <jaayden@coder.com>
Date: Mon, 5 May 2025 17:03:23 +0000
Subject: [PATCH 1/3] chore: update design of External auth

---
 .../CreateWorkspacePageViewExperimental.tsx   |   6 +-
 .../ExternalAuthButton.tsx                    | 130 ++++++++++--------
 2 files changed, 72 insertions(+), 64 deletions(-)

diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx
index 1a07596854f8d..6751961e3cb2e 100644
--- a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx
+++ b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx
@@ -304,7 +304,7 @@ export const CreateWorkspacePageViewExperimental: FC<
 				<form
 					onSubmit={form.handleSubmit}
 					aria-label="Create workspace form"
-					className="flex flex-col gap-6 w-full border border-border-default border-solid rounded-lg p-6"
+					className="flex flex-col gap-10 w-full border border-border-default border-solid rounded-lg p-6"
 				>
 					{Boolean(error) && <ErrorAlert error={error} />}
 
@@ -397,14 +397,14 @@ export const CreateWorkspacePageViewExperimental: FC<
 					{externalAuth && externalAuth.length > 0 && (
 						<section>
 							<hgroup>
-								<h2 className="text-xl font-semibold mb-0">
+								<h2 className="text-xl font-semibold m-0">
 									External Authentication
 								</h2>
 								<p className="text-sm text-content-secondary mt-0">
 									This template uses external services for authentication.
 								</p>
 							</hgroup>
-							<div>
+							<div className="flex flex-col gap-4">
 								{Boolean(error) && !hasAllRequiredExternalAuth && (
 									<Alert severity="error">
 										To create a workspace using this template, please connect to
diff --git a/site/src/pages/CreateWorkspacePage/ExternalAuthButton.tsx b/site/src/pages/CreateWorkspacePage/ExternalAuthButton.tsx
index 427c62b7bdf93..4a326c908030c 100644
--- a/site/src/pages/CreateWorkspacePage/ExternalAuthButton.tsx
+++ b/site/src/pages/CreateWorkspacePage/ExternalAuthButton.tsx
@@ -1,11 +1,15 @@
-import ReplayIcon from "@mui/icons-material/Replay";
-import LoadingButton from "@mui/lab/LoadingButton";
-import Button from "@mui/material/Button";
-import Tooltip from "@mui/material/Tooltip";
-import { visuallyHidden } from "@mui/utils";
 import type { TemplateVersionExternalAuth } from "api/typesGenerated";
+import { Badge } from "components/Badge/Badge";
+import { Button } from "components/Button/Button";
 import { ExternalImage } from "components/ExternalImage/ExternalImage";
-import { Pill } from "components/Pill/Pill";
+import { Spinner } from "components/Spinner/Spinner";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
+} from "components/Tooltip/Tooltip";
+import { Check, Redo } from "lucide-react";
 import type { FC } from "react";
 
 export interface ExternalAuthButtonProps {
@@ -24,62 +28,66 @@ export const ExternalAuthButton: FC<ExternalAuthButtonProps> = ({
 	error,
 }) => {
 	return (
-		<>
-			<div css={{ display: "flex", alignItems: "center", gap: 8 }}>
-				<LoadingButton
-					fullWidth
-					loading={isLoading}
-					variant="contained"
-					size="xlarge"
-					startIcon={
-						auth.display_icon && (
-							<ExternalImage
-								src={auth.display_icon}
-								alt={`${auth.display_name} Icon`}
-								css={{ width: 16, height: 16 }}
-							/>
-						)
-					}
-					disabled={auth.authenticated}
-					onClick={() => {
-						window.open(
-							auth.authenticate_url,
-							"_blank",
-							"width=900,height=600",
-						);
-						onStartPolling();
-					}}
-				>
-					{auth.authenticated ? (
-						`Authenticated with ${auth.display_name}`
-					) : (
-						<>
-							Login with {auth.display_name}
-							{!auth.optional && (
-								<Pill type={error ? "error" : "info"} css={{ marginLeft: 12 }}>
-									Required
-								</Pill>
-							)}
-						</>
-					)}
-				</LoadingButton>
+		<div className="flex items-center gap-2 border border-border border-solid rounded-md p-3 justify-between">
+			<span className="flex flex-row items-center gap-2">
+				{auth.display_icon && (
+					<ExternalImage
+						className="w-6 h-6"
+						src={auth.display_icon}
+						alt={`${auth.display_name} Icon`}
+					/>
+				)}
+				<p className="font-semibold m-0">{auth.display_name}</p>
+				{!auth.optional && (
+					<Badge size="sm" variant={error ? "destructive" : "warning"}>
+						Required
+					</Badge>
+				)}
+			</span>
+
+			<span className="flex flex-row items-center gap-2">
+				{auth.authenticated ? (
+					<>
+						<Check className="w-5 h-5 text-content-success" />
+						<p className="text-sm font-semibold text-content-secondary m-0">
+							Authenticated
+						</p>
+					</>
+				) : (
+					<Button
+						variant="default"
+						size="sm"
+						disabled={isLoading || auth.authenticated}
+						onClick={() => {
+							window.open(
+								auth.authenticate_url,
+								"_blank",
+								"width=900,height=600",
+							);
+							onStartPolling();
+						}}
+					>
+						<Spinner loading={isLoading} />
+						Login with {auth.display_name}
+					</Button>
+				)}
 
-				{displayRetry && (
-					<Tooltip title="Retry">
-						<Button
-							variant="contained"
-							size="xlarge"
-							onClick={onStartPolling}
-							css={{ minWidth: "auto", aspectRatio: "1" }}
-						>
-							<ReplayIcon css={{ width: 20, height: 20 }} />
-							<span aria-hidden css={{ ...visuallyHidden }}>
-								Refresh external auth
-							</span>
-						</Button>
-					</Tooltip>
+				{displayRetry && !auth.authenticated && (
+					<TooltipProvider>
+						<Tooltip delayDuration={100}>
+							<TooltipTrigger asChild>
+								<Button variant="outline" size="icon" onClick={onStartPolling}>
+									<Redo />
+									<span className="sr-only">Refresh external auth</span>
+								</Button>
+							</TooltipTrigger>
+							<TooltipContent>
+								Retry login with {auth.display_name}
+							</TooltipContent>
+						</Tooltip>
+					</TooltipProvider>
 				)}
-			</div>
-		</>
+			</span>
+		</div>
 	);
 };

From 8ecd0e8e5a8aad6b1664db07fea5f661c36b3cf7 Mon Sep 17 00:00:00 2001
From: Jaayden Halko <jaayden@coder.com>
Date: Mon, 5 May 2025 17:08:29 +0000
Subject: [PATCH 2/3] fix: fix test

---
 site/src/pages/CreateWorkspacePage/CreateWorkspacePage.test.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePage.test.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePage.test.tsx
index b24542b34021d..64deba2116fb1 100644
--- a/site/src/pages/CreateWorkspacePage/CreateWorkspacePage.test.tsx
+++ b/site/src/pages/CreateWorkspacePage/CreateWorkspacePage.test.tsx
@@ -209,7 +209,7 @@ describe("CreateWorkspacePage", () => {
 			.mockResolvedValue([MockTemplateVersionExternalAuthGithubAuthenticated]);
 
 		await screen.findByText(
-			"Authenticated with GitHub",
+			"Authenticated",
 			{},
 			{ interval: 500, timeout: 5000 },
 		);

From 87054e9de1afb70691609df0419c0f53d7335da7 Mon Sep 17 00:00:00 2001
From: Jaayden Halko <jaayden@coder.com>
Date: Mon, 5 May 2025 20:38:42 +0000
Subject: [PATCH 3/3] chore: update sizes

---
 site/src/pages/CreateWorkspacePage/ExternalAuthButton.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/site/src/pages/CreateWorkspacePage/ExternalAuthButton.tsx b/site/src/pages/CreateWorkspacePage/ExternalAuthButton.tsx
index 4a326c908030c..9a647b507947e 100644
--- a/site/src/pages/CreateWorkspacePage/ExternalAuthButton.tsx
+++ b/site/src/pages/CreateWorkspacePage/ExternalAuthButton.tsx
@@ -32,12 +32,12 @@ export const ExternalAuthButton: FC<ExternalAuthButtonProps> = ({
 			<span className="flex flex-row items-center gap-2">
 				{auth.display_icon && (
 					<ExternalImage
-						className="w-6 h-6"
+						className="w-5 h-5"
 						src={auth.display_icon}
 						alt={`${auth.display_name} Icon`}
 					/>
 				)}
-				<p className="font-semibold m-0">{auth.display_name}</p>
+				<p className="font-semibold text-sm m-0">{auth.display_name}</p>
 				{!auth.optional && (
 					<Badge size="sm" variant={error ? "destructive" : "warning"}>
 						Required
@@ -48,8 +48,8 @@ export const ExternalAuthButton: FC<ExternalAuthButtonProps> = ({
 			<span className="flex flex-row items-center gap-2">
 				{auth.authenticated ? (
 					<>
-						<Check className="w-5 h-5 text-content-success" />
-						<p className="text-sm font-semibold text-content-secondary m-0">
+						<Check className="w-4 h-4 text-content-success" />
+						<p className="text-xs font-semibold text-content-secondary m-0">
 							Authenticated
 						</p>
 					</>