progress on settings / alerts

beszel/site/src/components/routes/settings/general.tsx

@@ -9,6 +9,7 @@ import {
 } from '@/components/ui/select'
 import { chartTimeData } from '@/lib/utils'
 import { Separator } from '@/components/ui/separator'
+import { SaveIcon } from 'lucide-react'
 
 export default function SettingsProfilePage() {
 	return (
@@ -20,8 +21,11 @@ export default function SettingsProfilePage() {
 			<Separator className="mt-6 mb-5" /> */}
 			<div className="space-y-5">
 				<div className="space-y-2">
-					<Label>Default chart period</Label>
-					{/* <Input placeholder="Username" /> */}
+					<div className="mb-4">
+						<h3 className="mb-1 text-lg font-medium">Chart options</h3>
+						<p className="text-sm text-muted-foreground">Adjust display options for charts.</p>
+					</div>
+					<Label className="block">Default time period</Label>
 					<Select defaultValue="1h">
 						<SelectTrigger>
 							<SelectValue />
@@ -35,11 +39,14 @@ export default function SettingsProfilePage() {
 						</SelectContent>
 					</Select>
 					<p className="text-[0.8rem] text-muted-foreground">
-						Sets the default time range for charts.
+						Sets the default time range for charts when a system is viewed.
 					</p>
 				</div>
 				<Separator />
-				<Button type="submit">Save settings</Button>
+				<Button type="submit" className="flex items-center gap-1.5">
+					<SaveIcon className="h-4 w-4" />
+					Save settings
+				</Button>
 			</div>
 		</div>
 	)