theming, date, time localisation, additional features, seeding initial cleanup

components/announcements/announcements-list.tsx

@@ -59,22 +59,22 @@ export function AnnouncementsList() {
 	const getPriorityIcon = (priority: string) => {
 		switch (priority) {
 			case 'high':
-				return <AlertCircle className='h-4 w-4 text-red-500' />;
+				return <AlertCircle className='h-4 w-4 text-destructive' />;
 			case 'medium':
-				return <AlertTriangle className='h-4 w-4 text-yellow-500' />;
+				return <AlertTriangle className='h-4 w-4 text-amber-500 dark:text-amber-400' />;
 			default:
-				return <Info className='h-4 w-4 text-blue-500' />;
+				return <Info className='h-4 w-4 text-primary' />;
 		}
 	};
 
 	const getPriorityColor = (priority: string) => {
 		switch (priority) {
 			case 'high':
-				return 'bg-red-100 text-red-800 border-red-200';
+				return 'bg-destructive/10 text-destructive border-destructive/20 dark:bg-destructive/20';
 			case 'medium':
-				return 'bg-yellow-100 text-yellow-800 border-yellow-200';
+				return 'bg-amber-100 text-amber-800 border-amber-200 dark:bg-amber-950/50 dark:text-amber-400 dark:border-amber-800/30';
 			default:
-				return 'bg-blue-100 text-blue-800 border-blue-200';
+				return 'bg-primary/10 text-primary border-primary/20 dark:bg-primary/20';
 		}
 	};
 
@@ -91,13 +91,15 @@ export function AnnouncementsList() {
 					{announcements
 						.filter((a) => a.isActive)
 						.map((announcement) => (
-							<div key={announcement.id} className='p-4 border rounded-lg bg-gray-50'>
+							<div key={announcement.id} className='p-4 border rounded-lg bg-card'>
 								<div className='flex items-start justify-between gap-3'>
 									<div className='flex items-start gap-2 flex-1'>
 										{getPriorityIcon(announcement.priority)}
 										<div className='space-y-1'>
-											<h4 className='font-medium text-sm'>{announcement.title}</h4>
-											<p className='text-sm text-gray-600'>{announcement.content}</p>
+											<h4 className='font-medium text-sm text-foreground'>
+												{announcement.title}
+											</h4>
+											<p className='text-sm text-muted-foreground'>{announcement.content}</p>
 										</div>
 									</div>
 									<Badge
@@ -111,8 +113,8 @@ export function AnnouncementsList() {
 						))}
 
 					{announcements.filter((a) => a.isActive).length === 0 && (
-						<div className='text-center py-8 text-gray-500'>
-							<Bell className='h-8 w-8 mx-auto mb-2 opacity-30' />
+						<div className='text-center py-8 text-muted-foreground'>
+							<Bell className='h-8 w-8 mx-auto mb-2 text-muted-foreground/30' />
 							<p>No announcements at this time</p>
 						</div>
 					)}