From 9063b67c4d621c6f01e495bf519d2deffae80395 Mon Sep 17 00:00:00 2001
From: Jaayden Halko <jaayden.halko@gmail.com>
Date: Thu, 15 May 2025 23:02:25 +0100
Subject: [PATCH] chore: improve style of dynamic parameters diagnostics
 (#17863)

Before
<img width="756" alt="Screenshot 2025-05-15 at 19 10 24"
src="https://github.com/user-attachments/assets/405d904a-c06b-41d9-9641-0dbadeadde70"
/>


After
<img width="755" alt="Screenshot 2025-05-15 at 19 10 07"
src="https://github.com/user-attachments/assets/7c1e72b5-37d1-446b-af7e-aebfcf7553a3"
/>
---
 .../CreateWorkspacePageViewExperimental.tsx   | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx
index 0ba3ee9fb7..8b1dad47ff 100644
--- a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx
+++ b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx
@@ -550,31 +550,31 @@ const Diagnostics: FC<DiagnosticsProps> = ({ diagnostics }) => {
 			{diagnostics.map((diagnostic, index) => (
 				<div
 					key={`diagnostic-${diagnostic.summary}-${index}`}
-					className={`text-xs flex flex-col rounded-md border px-4 pb-3 border-solid
+					className={`text-xs font-semibold flex flex-col rounded-md border px-3.5 py-3.5 border-solid
                         ${
 													diagnostic.severity === "error"
-														? " text-content-destructive border-border-destructive"
-														: " text-content-warning border-border-warning"
+														? "text-content-primary border-border-destructive bg-content-destructive/15"
+														: "text-content-primary border-border-warning bg-content-warning/15"
 												}`}
 				>
-					<div className="flex items-center m-0">
+					<div className="flex flex-row items-start">
 						{diagnostic.severity === "error" && (
 							<CircleAlert
-								className="me-2 -mt-0.5 inline-flex opacity-80"
-								size={16}
+								className="me-2 inline-flex shrink-0 text-content-destructive size-icon-sm"
 								aria-hidden="true"
 							/>
 						)}
 						{diagnostic.severity === "warning" && (
 							<TriangleAlert
-								className="me-2 -mt-0.5 inline-flex opacity-80"
-								size={16}
+								className="me-2 inline-flex shrink-0 text-content-warning size-icon-sm"
 								aria-hidden="true"
 							/>
 						)}
-						<p className="font-medium">{diagnostic.summary}</p>
+						<div className="flex flex-col gap-3">
+							<p className="m-0">{diagnostic.summary}</p>
+							{diagnostic.detail && <p className="m-0">{diagnostic.detail}</p>}
+						</div>
 					</div>
-					{diagnostic.detail && <p className="m-0 pb-0">{diagnostic.detail}</p>}
 				</div>
 			))}
 		</div>