feat(site): give all template builder steps rounded border + padding (#26757)

ref DEVEX-517

Some small preliminary UI spruce-ups to get each step closer to the
design before implementing the main feature for DEVEX-517. See commit
messages for individual changes.

The most prominent change is making it so that every step gets wrapped
in this rounded/bordered/padded container. Previously it was present
only in `ModuleSettingsStep` and `TemplateCustomizationsStep`; but
missing from `BaseInfraSelectStep`, `BaseTemplateParametersStep`, and
`ModuleSelectStep`

<img width="1840" height="1191" alt="image"
src="https://github.com/user-attachments/assets/f143a6b1-abdf-4103-8041-cd6e1431c856"
/>

site/src/pages/TemplateBuilder/BaseTemplateParametersStep.tsx

@@ -6,6 +6,10 @@ import type {
 	TemplateBuilderModuleVariable,
 } from "#/api/typesGenerated";
 import { MemoizedMarkdown } from "#/components/Markdown/Markdown";
+import {
+	TemplateBuilderSubtitle,
+	TemplateBuilderTitle,
+} from "#/pages/TemplateBuilder/TemplateBuilderHeader";
 import type { ConfigurationFieldDefinition } from "./ConfigurationField";
 import { TemplateConfiguration } from "./TemplateConfiguration";
 
@@ -101,18 +105,25 @@ export const BaseTemplateParametersStep: FC<
 	);
 
 	return (
-		<TemplateConfiguration
-			name={base?.name ?? "Base Template"}
-			description={base?.description ?? ""}
-			iconUrl={base?.icon}
-			detailsUrl={detailsUrl(baseId)}
-			fields={fields}
-		>
-			{prerequisites && (
-				<div className="mt-6">
-					<MemoizedMarkdown>{prerequisites}</MemoizedMarkdown>
-				</div>
-			)}
-		</TemplateConfiguration>
+		<>
+			<TemplateBuilderTitle>Configure base template</TemplateBuilderTitle>
+			<TemplateBuilderSubtitle>
+				Your base template requires customizations.
+			</TemplateBuilderSubtitle>
+
+			<TemplateConfiguration
+				name={base?.name ?? "Base Template"}
+				description={base?.description ?? ""}
+				iconUrl={base?.icon}
+				detailsUrl={detailsUrl(baseId)}
+				fields={fields}
+			>
+				{prerequisites && (
+					<div className="mt-6">
+						<MemoizedMarkdown>{prerequisites}</MemoizedMarkdown>
+					</div>
+				)}
+			</TemplateConfiguration>
+		</>
 	);
 };

site/src/pages/TemplateBuilder/ModuleSettingsStep.tsx

@@ -114,7 +114,7 @@ export const ModuleSettingsStep: FC<ModuleSettingsStepProps> = ({
 	};
 
 	return (
-		<div className="border border-border border-solid p-6 rounded-lg">
+		<>
 			<TemplateBuilderTitle>Configure modules</TemplateBuilderTitle>
 			<TemplateBuilderSubtitle>
 				Set values for module variables.
@@ -168,6 +168,6 @@ export const ModuleSettingsStep: FC<ModuleSettingsStepProps> = ({
 					);
 				})}
 			</div>
-		</div>
+		</>
 	);
 };

site/src/pages/TemplateBuilder/SelectionSummary.tsx

@@ -39,8 +39,8 @@ export const SelectionSummary: React.FC<SelectionSummaryProps> = ({
 	};
 	return (
 		<div>
-			<h2 className="font-semibold">Selection</h2>
-			<div>
+			<h2 className="text-xl font-semibold">Selection</h2>
+			<div className="text-sm">
 				<VariantContext.Provider value={variant(1)}>
 					<StepIndicator step={1}>Base Template</StepIndicator>
 					{selectedTemplate ? (
@@ -69,7 +69,7 @@ export const SelectionSummary: React.FC<SelectionSummaryProps> = ({
 };
 
 const stepCircleVariants = cva(
-	"rounded-full w-8 h-8 border border-solid flex items-center justify-center",
+	"rounded-full size-6 border border-solid flex items-center justify-center text-xs",
 	{
 		variants: {
 			variant: {

site/src/pages/TemplateBuilder/TemplateBuilderHeader.tsx

@@ -1,7 +1,7 @@
 import type { FC, PropsWithChildren } from "react";
 
 export const TemplateBuilderTitle: FC<PropsWithChildren> = ({ children }) => {
-	return <h2 className="text-xl font-semibold mb-1">{children}</h2>;
+	return <h2 className="mt-0 text-xl font-semibold mb-1">{children}</h2>;
 };
 
 export const TemplateBuilderSubtitle: FC<PropsWithChildren> = ({

site/src/pages/TemplateBuilder/TemplateBuilderPageView.tsx

@@ -112,7 +112,7 @@ export const TemplateBuilderPageView: FC<TemplateBuilderPageViewProps> = ({
 					<Link
 						href={docs("/admin/templates")}
 						target="_blank"
-						className="ml-1"
+						className="ml-1 font-normal"
 					>
 						View docs
 					</Link>
@@ -124,13 +124,15 @@ export const TemplateBuilderPageView: FC<TemplateBuilderPageViewProps> = ({
 			<div className="flex gap-8">
 				{/* Main content area */}
 				<div className="flex-1 min-w-0">
-					{renderStepContent(
-						currentStep.id,
-						state,
-						dispatch,
-						moduleVarMap,
-						createError,
-					)}
+					<div className="p-6 border border-solid rounded-lg">
+						{renderStepContent(
+							currentStep.id,
+							state,
+							dispatch,
+							moduleVarMap,
+							createError,
+						)}
+					</div>
 
 					{/* Navigation controls */}
 					<div className="flex justify-end mt-6 gap-2">

site/src/pages/TemplateBuilder/TemplateConfiguration.tsx

@@ -37,8 +37,10 @@ export const TemplateConfiguration: React.FC<TemplateConfigurationProps> = ({
 					)}
 				</figure>
 				<div>
-					<h3 className="text-md font-semibold text-content-primary">{name}</h3>
-					<p className="text-sm font-normal text-content-secondary inline">
+					<h3 className="mb-0 text-sm font-semibold text-content-primary">
+						{name}
+					</h3>
+					<p className="text-xs font-normal text-content-secondary inline">
 						{description}
 					</p>
 					{detailsUrl && (
@@ -46,7 +48,7 @@ export const TemplateConfiguration: React.FC<TemplateConfigurationProps> = ({
 							href={detailsUrl}
 							target="_blank"
 							size="sm"
-							className="text-sm font-normal ml-1"
+							className="text-xs font-normal ml-1"
 						>
 							View details
 						</Link>

site/src/pages/TemplateBuilder/TemplateCustomizationsStep.tsx

@@ -51,7 +51,7 @@ export const TemplateCustomizationsStep: FC<
 	};
 
 	return (
-		<div className="border border-border border-solid p-6 rounded-lg">
+		<>
 			<TemplateBuilderTitle>Customizations</TemplateBuilderTitle>
 			<TemplateBuilderSubtitle>
 				Add additional configurations.
@@ -138,7 +138,7 @@ export const TemplateCustomizationsStep: FC<
 					</div>
 				</div>
 			</div>
-		</div>
+		</>
 	);
 };