Update announcement cards to match task card design and add type icons

Refactors the `AnnouncementCard` component to replicate the styling of the "To Do" task card, including icon placement next to titles, grey message text, square message corners, and right-aligned priority information with corresponding icons.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: e437ffed-c31b-44eb-9fd5-b6f9faa8e7ce
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/1957c339-2757-4d1f-8e92-e9f71a1ce58e/e437ffed-c31b-44eb-9fd5-b6f9faa8e7ce/ZIhswcI

client/src/components/AnnouncementCard.tsx

@@ -250,10 +250,27 @@ export default function AnnouncementCard() {
     }
   };
 
+  const getTypeIcon = (type: string) => {
+    switch (type) {
+      case 'error':
+        return AlertTriangle;
+      case 'warning':
+        return Bell;
+      case 'success':
+        return CheckCircle;
+      case 'info':
+      default:
+        return Info;
+    }
+  };
+
   return (
     <Card>
       <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+        <div className="flex items-center gap-2">
+          <Megaphone className="h-4 w-4 text-muted-foreground" />
           <CardTitle className="text-sm font-medium">Informations</CardTitle>
+        </div>
         <div className="flex items-center gap-2">
           {user?.role === 'admin' && (
             <Dialog open={isCreateDialogOpen} onOpenChange={(open) => {
@@ -354,7 +371,6 @@ export default function AnnouncementCard() {
               </DialogContent>
             </Dialog>
           )}
-          <Megaphone className="h-4 w-4 text-muted-foreground" />
         </div>
       </CardHeader>
       <CardContent>
@@ -369,17 +385,18 @@ export default function AnnouncementCard() {
           <div className="space-y-3">
             {announcements.map((announcement) => {
               const priorityConfig = getPriorityConfig(announcement.type);
-              const PriorityIcon = priorityConfig.icon;
+              const TypeIcon = getTypeIcon(announcement.type);
               
               return (
-                <div key={announcement.id} className="flex items-start justify-between p-3 rounded-lg border bg-card hover:bg-accent/50 transition-colors">
+                <div key={announcement.id} className="flex items-start justify-between p-3 bg-muted/30 transition-colors">
+                  <div className="flex items-start gap-3 flex-1 min-w-0">
+                    <TypeIcon className="h-4 w-4 text-muted-foreground mt-0.5 flex-shrink-0" />
                     <div className="flex-1 min-w-0">
-                    <div className="flex items-center gap-2 mb-1">
+                      <div className="flex items-center justify-between gap-2 mb-1">
                         <h4 className="font-medium text-sm truncate">
                           {announcement.title}
                         </h4>
-                      <Badge variant={priorityConfig.color} className="flex items-center gap-1 text-xs">
+                        <Badge variant={priorityConfig.color} className="flex items-center gap-1 text-xs flex-shrink-0">
-                        <PriorityIcon className="w-2.5 h-2.5" />
                           {priorityConfig.label}
                         </Badge>
                       </div>
@@ -400,6 +417,7 @@ export default function AnnouncementCard() {
                         </span>
                       </div>
                     </div>
+                  </div>
                   {user?.role === 'admin' && (
                     <div className="flex items-center gap-1 ml-2 flex-shrink-0">
                       <Button