small updates to alert display

beszel/site/src/components/routes/home.tsx

@@ -72,7 +72,7 @@ export default function () {
 											className="hover:-translate-y-[1px] duration-200 bg-transparent border-foreground/10  hover:shadow-md shadow-black"
 										>
 											<info.icon className="h-4 w-4" />
-											<AlertTitle className="mb-2">
+											<AlertTitle>
 												{alert.sysname} {info.name}
 											</AlertTitle>
 											<AlertDescription>

beszel/site/src/components/table-alerts.tsx

@@ -104,7 +104,7 @@ function AlertStatus({ system, alerts }: { system: SystemRecord; alerts: AlertRe
 		>
 			<div className="grid gap-1 select-none">
 				<p className="font-semibold flex gap-3 items-center">
-					<ServerIcon className="h-4 w-4 opacity-85" /> System status
+					<ServerIcon className="h-4 w-4 opacity-85" /> System Status
 				</p>
 				<span className="block text-sm text-muted-foreground">
 					Triggers when status switches between up and down.
@@ -189,7 +189,7 @@ function AlertWithSlider({
 				})}
 			>
 				<div className="grid gap-1 select-none">
-					<p className="font-semibold flex gap-3 items-center">
+					<p className="font-semibold flex gap-3 items-center capitalize">
 						<Icon className="h-4 w-4 opacity-85" /> {title}
 					</p>
 					{!alert && <span className="block text-sm text-muted-foreground">{description}</span>}

beszel/site/src/components/ui/alert.tsx

@@ -1,59 +1,59 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from 'react'
+// import { cva, type VariantProps } from 'class-variance-authority'
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils'
 
-const alertVariants = cva(
-  "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
-  {
-    variants: {
-      variant: {
-        default: "bg-background text-foreground",
-        destructive:
-          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  }
-)
+// const alertVariants = cva(
+//   "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
+//   {
+//     variants: {
+//       variant: {
+//         default: "bg-background text-foreground",
+//         destructive:
+//           "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+//       },
+//     },
+//     defaultVariants: {
+//       variant: "default",
+//     },
+//   }
+// )
 
 const Alert = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
->(({ className, variant, ...props }, ref) => (
-  <div
-    ref={ref}
-    role="alert"
-    className={cn(alertVariants({ variant }), className)}
-    {...props}
-  />
-))
-Alert.displayName = "Alert"
-
-const AlertTitle = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLHeadingElement>
+	HTMLDivElement,
+	// React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+	// >(({ className, variant, ...props }, ref) => (
+	React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
-  <h5
-    ref={ref}
-    className={cn("mb-1 font-medium leading-none tracking-tight", className)}
-    {...props}
-  />
+	<div
+		ref={ref}
+		role="alert"
+		className={cn(
+			'relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground bg-background text-foreground',
+			className
+		)}
+		{...props}
+	/>
 ))
-AlertTitle.displayName = "AlertTitle"
+Alert.displayName = 'Alert'
+
+const AlertTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
+	({ className, ...props }, ref) => (
+		<h5
+			ref={ref}
+			className={cn('mb-1 font-medium leading-none tracking-tight', className)}
+			{...props}
+		/>
+	)
+)
+AlertTitle.displayName = 'AlertTitle'
 
 const AlertDescription = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
+	HTMLParagraphElement,
+	React.HTMLAttributes<HTMLParagraphElement>
 >(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("text-sm [&_p]:leading-relaxed", className)}
-    {...props}
-  />
+	<div ref={ref} className={cn('text-sm [&_p]:leading-relaxed', className)} {...props} />
 ))
-AlertDescription.displayName = "AlertDescription"
+AlertDescription.displayName = 'AlertDescription'
 
 export { Alert, AlertTitle, AlertDescription }

beszel/site/src/lib/utils.ts

@@ -306,25 +306,25 @@ export const alertInfo = {
 		desc: 'Triggers when CPU usage exceeds a threshold.',
 	},
 	Memory: {
-		name: 'Memory usage',
+		name: 'memory usage',
 		unit: '%',
 		icon: MemoryStickIcon,
 		desc: 'Triggers when memory usage exceeds a threshold.',
 	},
 	Disk: {
-		name: 'Disk usage',
+		name: 'disk usage',
 		unit: '%',
 		icon: HardDriveIcon,
 		desc: 'Triggers when usage of any disk exceeds a threshold.',
 	},
 	Bandwidth: {
-		name: 'Bandwidth',
+		name: 'bandwidth',
 		unit: ' MB/s',
 		icon: EthernetIcon,
 		desc: 'Triggers when combined up/down exceeds a threshold.',
 	},
 	Temperature: {
-		name: 'Temperature',
+		name: 'temperature',
 		unit: '°C',
 		icon: ThermometerIcon,
 		desc: 'Triggers when any sensor exceeds a threshold.',