opensource/coder
3
0
Fork 0
mirror of https://github.com/coder/coder.git synced 2026-09-22 05:05:20 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore: improve style of dynamic parameters diagnostics (#17863)

Browse Source 
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"
/>
This commit is contained in:
Jaayden Halko
2025-05-15 18:02:25 -04:00
committed by GitHub
parent 3011eca0c5
commit 9063b67c4d
1 changed files with 10 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx
+10 -10
View File
@@ -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>