chore: cleanup

jaaydenh · jaaydenh · commit 199bd929e441 · 2025-12-05T15:45:52.000Z
diff --git a/site/src/components/Alert/Alert.tsx b/site/src/components/Alert/Alert.tsx
@@ -1,5 +1,12 @@
 import { cva, type VariantProps } from "class-variance-authority";
 import { Button } from "components/Button/Button";
+import {
+	CircleAlertIcon,
+	CircleCheckIcon,
+	InfoIcon,
+	TriangleAlertIcon,
+	XIcon,
+} from "lucide-react";
 import {
 	type FC,
 	forwardRef,
@@ -14,27 +21,34 @@ const alertVariants = cva(
 	{
 		variants: {
 			variant: {
-				default: "border-border-default",
-				info: "border-highlight-sky",
-				success: "border-surface-green",
-				warning: "border-border-warning",
-				error: "border-border-destructive",
+				default: "border-border-default bg-surface-secondary",
+				info: "border-border-pending bg-surface-secondary",
+				success: "border-border-green bg-surface-green",
+				warning: "border-border-warning bg-surface-orange",
+				error: "border-border-destructive bg-surface-red",
 			},
 		},
 		defaultVariants: {
 			variant: "default",
 		},
-	}
-)
+	},
+);
 
-// Map MUI severity to our variant
 const severityToVariant = {
 	info: "info",
 	success: "success",
 	warning: "warning",
 	error: "error",
 } as const;
 
+const variantIcons = {
+	default: { icon: InfoIcon, className: "text-content-secondary" },
+	info: { icon: InfoIcon, className: "text-highlight-sky" },
+	success: { icon: CircleCheckIcon, className: "text-content-success" },
+	warning: { icon: TriangleAlertIcon, className: "text-content-warning" },
+	error: { icon: CircleAlertIcon, className: "text-content-destructive" },
+} as const;
+
 export type AlertColor = "info" | "success" | "warning" | "error";
 
 export type AlertProps = {
@@ -67,29 +81,40 @@ export const Alert: FC<AlertProps> = ({
 		variant ||
 		(severity in severityToVariant ? severityToVariant[severity] : "default");
 
+	const { icon: Icon, className: iconClassName } = variantIcons[finalVariant];
+
 	return (
 		<div
 			role="alert"
 			className={cn(alertVariants({ variant: finalVariant }), className)}
 			{...props}
 		>
-			<div className="flex items-start justify-between text-sm">
-				<div className="flex-1">{children}</div>
-				<div className="flex items-center gap-2 ml-4">
-					{/* CTAs passed in by the consumer */}
+			<div className="flex items-start justify-between gap-4 text-sm">
+				<div className="flex flex-row items-start gap-3">
+					<Icon
+						className={cn(
+							"size-icon-sm mt-1",
+							iconClassName,
+						)}
+					/>
+					<div className="flex-1">{children}</div>
+				</div>
+				<div className="flex items-start gap-2">
 					{actions}
 
 					{dismissible && (
 						<Button
 							variant="subtle"
-							size="sm"
+							size="icon"
+							className="mt-px !size-auto !min-w-0 !p-0"
 							onClick={() => {
 								setOpen(false);
 								onDismiss?.();
 							}}
 							data-testid="dismiss-banner-btn"
+							aria-label="Dismiss"
 						>
-							Dismiss
+							<XIcon className="!size-icon-sm !p-0" />
 						</Button>
 					)}
 				</div>
@@ -100,22 +125,22 @@ export const Alert: FC<AlertProps> = ({
 
 export const AlertDetail: FC<PropsWithChildren> = ({ children }) => {
 	return (
-		<span className="text-sm opacity-75" data-chromatic="ignore">
+		<span className="m-0 text-sm" data-chromatic="ignore">
 			{children}
 		</span>
 	);
 };
 
-// Export AlertTitle and AlertDescription for compatibility
 export const AlertTitle = forwardRef<
 	HTMLHeadingElement,
 	React.HTMLAttributes<HTMLHeadingElement>
 >(({ className, ...props }, ref) => (
-	<h5
+	<h1
 		ref={ref}
-		className={cn("mb-1 font-medium leading-none tracking-tight", className)}
+		className={cn(
+			"m-0 mb-1 text-sm font-medium",
+			className,
+		)}
 		{...props}
 	/>
 ));
-
-AlertTitle.displayName = "AlertTitle";
diff --git a/site/src/components/Badge/Badge.tsx b/site/src/components/Badge/Badge.tsx
@@ -24,7 +24,7 @@ const badgeVariants = cva(
 					"border border-solid border-border-destructive bg-surface-red text-highlight-red shadow",
 				green:
 					"border border-solid border-border-green bg-surface-green text-highlight-green shadow",
-				info: "border border-solid border-border-sky bg-surface-sky text-highlight-sky shadow",
+				info: "border border-solid border-border-pending bg-surface-sky text-highlight-sky shadow",
 			},
 			size: {
 				xs: "text-2xs font-regular h-5 [&_svg]:hidden rounded px-1.5",
diff --git a/site/src/components/GitDeviceAuth/GitDeviceAuth.tsx b/site/src/components/GitDeviceAuth/GitDeviceAuth.tsx
@@ -1,5 +1,4 @@
 import type { Interpolation, Theme } from "@emotion/react";
-
 import CircularProgress from "@mui/material/CircularProgress";
 import Link from "@mui/material/Link";
 import type { ApiErrorResponse } from "api/errors";
diff --git a/site/src/modules/workspaces/WorkspaceMoreActions/ChangeWorkspaceVersionDialog.tsx b/site/src/modules/workspaces/WorkspaceMoreActions/ChangeWorkspaceVersionDialog.tsx
@@ -1,5 +1,4 @@
 import { css } from "@emotion/css";
-
 import Autocomplete from "@mui/material/Autocomplete";
 import CircularProgress from "@mui/material/CircularProgress";
 import TextField from "@mui/material/TextField";
diff --git a/site/src/pages/WorkspacePage/WorkspaceNotifications/Notifications.tsx b/site/src/pages/WorkspacePage/WorkspaceNotifications/Notifications.tsx
@@ -105,7 +105,7 @@ const NotificationItem: FC<NotificationItemProps> = ({ notification }) => {
 };
 
 export const NotificationActionButton: FC<ButtonProps> = (props) => {
-	return <Button variant="outline" size="sm" {...props} />;
+	return <Button variant="default" size="sm" {...props} />;
 };
 
 const styles = {
diff --git a/site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPageViewExperimental.tsx b/site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPageViewExperimental.tsx
@@ -120,7 +120,7 @@ export const WorkspaceParametersPageViewExperimental: FC<
 
 			{hasIncompatibleParameters && (
 				<Alert severity="error">
-					<p className="text-lg leading-tight font-bold m-0">
+					<p className="text-lg leading-normal font-bold m-0">
 						Workspace update blocked
 					</p>
 					<p className="mb-0">
diff --git a/site/src/pages/WorkspaceSettingsPage/WorkspaceSchedulePage/WorkspaceSchedulePage.tsx b/site/src/pages/WorkspaceSettingsPage/WorkspaceSchedulePage/WorkspaceSchedulePage.tsx
@@ -109,7 +109,7 @@ const WorkspaceSchedulePage: FC = () => {
 						>
 							Prebuilt Workspaces Scheduling
 						</Link>
-						documentation page.
+						{" "}documentation page.
 					</Alert>
 				) : (
 					<WorkspaceScheduleForm
diff --git a/site/tailwind.config.js b/site/tailwind.config.js
@@ -59,7 +59,7 @@ module.exports = {
 					DEFAULT: "hsl(var(--border-default))",
 					warning: "hsl(var(--border-warning))",
 					green: "hsl(var(--border-green))",
-					sky: "hsl(var(--border-sky))",
+					pending: "hsl(var(--border-sky))",
 					destructive: "hsl(var(--border-destructive))",
 					success: "hsl(var(--border-success))",
 					hover: "hsl(var(--border-hover))",

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,4 @@`
`1`	`1`	`import type { Interpolation, Theme } from "@emotion/react";`
`2`		`-`
`3`	`2`	`import CircularProgress from "@mui/material/CircularProgress";`
`4`	`3`	`import Link from "@mui/material/Link";`
`5`	`4`	`import type { ApiErrorResponse } from "api/errors";`
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,4 @@`
`1`	`1`	`import { css } from "@emotion/css";`
`2`		`-`
`3`	`2`	`import Autocomplete from "@mui/material/Autocomplete";`
`4`	`3`	`import CircularProgress from "@mui/material/CircularProgress";`
`5`	`4`	`import TextField from "@mui/material/TextField";`
Original file line number	Diff line number	Diff line change
`@@ -109,7 +109,7 @@ const WorkspaceSchedulePage: FC = () => {`
`109`	`109`	`>`
`110`	`110`	`Prebuilt Workspaces Scheduling`
`111`	`111`	`</Link>`
`112`		`- documentation page.`
	`112`	`+ {" "}documentation page.`
`113`	`113`	`</Alert>`
`114`	`114`	`) : (`
`115`	`115`	`<WorkspaceScheduleForm`