fix(site): reduce prerequisites markdown font size (#26776)

closes DEVEX-517
alternative to #26759

This PR is mainly about the type style overrides I added to
`MemoizedMarkdown` in BaseTemplateParametersStep.tsx‎.

I did also shoehorn some other misc styling updates into this PR, but
they're only scoped to template builder so I'll keep it as 1 PR instead
of making a Graphite stack:

- 1b98ac374f: adjusted `StepDivider`'s
left margin which I missed during #26757
- f1eb921048: refactored
templates/modules' avatars to use an `AvatarData` component, so that the
text appears to the right of the avatar instead of below it

site/src/pages/TemplateBuilder/BaseTemplateParametersStep.tsx

@@ -10,6 +10,7 @@ import {
 	TemplateBuilderSubtitle,
 	TemplateBuilderTitle,
 } from "#/pages/TemplateBuilder/TemplateBuilderHeader";
+import { cn } from "#/utils/cn";
 import type { ConfigurationFieldDefinition } from "./ConfigurationField";
 import { TemplateConfiguration } from "./TemplateConfiguration";
 
@@ -120,7 +121,17 @@ export const BaseTemplateParametersStep: FC<
 			>
 				{prerequisites && (
 					<div className="mt-6">
-						<MemoizedMarkdown>{prerequisites}</MemoizedMarkdown>
+						<MemoizedMarkdown
+							className={cn(
+								"text-sm font-normal",
+								"[&_h2]:mt-6 [&_h2]:text-base [&_h2]:font-semibold",
+								"[&_h3]:mt-2 [&_h3]:mb-1 [&_h3]:text-sm [&_h3]:font-semibold",
+								"[&_p]:mb-3 [&_p]:text-content-secondary",
+								"[&_a]:font-normal",
+							)}
+						>
+							{prerequisites}
+						</MemoizedMarkdown>
 					</div>
 				)}
 			</TemplateConfiguration>

site/src/pages/TemplateBuilder/ModuleConfiguration.tsx

@@ -1,7 +1,7 @@
 import { TrashIcon } from "lucide-react";
 import { Button } from "#/components/Button/Button";
 import { CollapsibleSummary } from "#/components/CollapsibleSummary/CollapsibleSummary";
-import { Link } from "#/components/Link/Link";
+import { TemplateBuilderAvatarData } from "#/pages/TemplateBuilder/TemplateBuilderAvatarData";
 import {
 	ConfigurationField,
 	ConfigurationFieldContainer,
@@ -30,36 +30,13 @@ export const ModuleConfiguration: React.FC<ModuleConfigurationProps> = ({
 	return (
 		<section className="pt-4 px-4 pb-6 rounded bg-surface-secondary">
 			<header className="flex items-start gap-6 mb-6">
-				<div className="flex flex-1 items-center gap-3 min-w-0">
-					<figure className="flex items-center justify-center p-1 rounded-md size-10 shrink-0 bg-surface-secondary border border-solid border-border m-0 mb-3">
-						{iconUrl ? (
-							<img
-								src={iconUrl}
-								alt={`${name} icon`}
-								className="size-7 object-contain"
-							/>
-						) : (
-							<div className="size-7 rounded bg-surface-primary" />
-						)}
-					</figure>
-					<div>
-						<h3 className="text-md font-semibold text-content-primary my-0">
-							{name}
-						</h3>
-						<p className="text-sm font-normal text-content-secondary inline">
-							{description}
-						</p>
-						{detailsUrl && (
-							<Link
-								href={detailsUrl}
-								target="_blank"
-								size="sm"
-								className="text-xs font-normal ml-1"
-							>
-								View details
-							</Link>
-						)}
-					</div>
+				<div className="flex-1">
+					<TemplateBuilderAvatarData
+						name={name}
+						description={description}
+						iconUrl={iconUrl}
+						detailsUrl={detailsUrl}
+					/>
 				</div>
 				{onRemove && (
 					<Button

site/src/pages/TemplateBuilder/SelectionSummary.tsx

@@ -107,7 +107,7 @@ const StepIndicator: React.FC<StepIndicatorProps> = ({ step, children }) => {
 };
 
 const stepDividerVariants = cva(
-	"border-0 border-l border-solid mx-4 -translate-x-px",
+	"border-0 border-l border-solid mx-3 -translate-x-px",
 	{
 		variants: {
 			variant: {

site/src/pages/TemplateBuilder/TemplateBuilderAvatarData.tsx

@@ -0,0 +1,42 @@
+import type { FC, PropsWithChildren } from "react";
+import { Avatar } from "#/components/Avatar/Avatar";
+import { AvatarData } from "#/components/Avatar/AvatarData";
+import { Link } from "#/components/Link/Link";
+
+type TemplateBuilderAvatarDataProps = PropsWithChildren<{
+	name: string;
+	description: string;
+	iconUrl?: string;
+	detailsUrl?: string;
+}>;
+
+export const TemplateBuilderAvatarData: FC<TemplateBuilderAvatarDataProps> = ({
+	name,
+	description,
+	iconUrl,
+	detailsUrl,
+}) => {
+	return (
+		<AvatarData
+			avatar={<Avatar src={iconUrl} size="lg" />}
+			title={<h3 className="m-0 text-xl font-semibold">{name}</h3>}
+			subtitle={
+				<>
+					<p className="text-xs font-normal text-content-secondary inline">
+						{description}
+					</p>
+					{detailsUrl && (
+						<Link
+							href={detailsUrl}
+							target="_blank"
+							size="sm"
+							className="text-xs font-normal ml-1"
+						>
+							View details
+						</Link>
+					)}
+				</>
+			}
+		/>
+	);
+};

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="mt-0 text-xl font-semibold mb-1">{children}</h2>;
+	return <h2 className="mt-0 text-2xl font-semibold mb-1">{children}</h2>;
 };
 
 export const TemplateBuilderSubtitle: FC<PropsWithChildren> = ({

site/src/pages/TemplateBuilder/TemplateConfiguration.tsx

@@ -1,5 +1,5 @@
 import type { PropsWithChildren } from "react";
-import { Link } from "#/components/Link/Link";
+import { TemplateBuilderAvatarData } from "#/pages/TemplateBuilder/TemplateBuilderAvatarData";
 import {
 	ConfigurationField,
 	ConfigurationFieldContainer,
@@ -25,35 +25,12 @@ export const TemplateConfiguration: React.FC<TemplateConfigurationProps> = ({
 	return (
 		<section className="pt-4 px-4 pb-6 rounded bg-surface-secondary">
 			<header className="mb-6">
-				<figure className="flex items-center justify-center p-1 rounded-md size-10 shrink-0 bg-surface-secondary border border-solid border-border m-0 mb-3">
-					{iconUrl ? (
-						<img
-							src={iconUrl}
-							alt={`${name} icon`}
-							className="size-7 object-contain"
-						/>
-					) : (
-						<div className="size-7 rounded bg-surface-primary" />
-					)}
-				</figure>
-				<div>
-					<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 && (
-						<Link
-							href={detailsUrl}
-							target="_blank"
-							size="sm"
-							className="text-xs font-normal ml-1"
-						>
-							View details
-						</Link>
-					)}
-				</div>
+				<TemplateBuilderAvatarData
+					name={name}
+					description={description}
+					iconUrl={iconUrl}
+					detailsUrl={detailsUrl}
+				/>
 			</header>
 
 			{fields && fields.length > 0 && (