Michael/LogiFlow
1
0 Fork 0
mirror of https://github.com/R0m1k3/LogiFlow.git synced 2026-10-16 19:56:32 +02:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
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
This commit is contained in:
michaelschal committed 2025-08-17 08:22:15 +00:00
1 parent ce92323060
commit 26d1a7aada
1 file changed
+45 -27
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/AnnouncementCard.tsx
+45 -27
View File
@@ -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 ( return (
<Card> <Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2"> <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">Informations</CardTitle> <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"> <div className="flex items-center gap-2">
{user?.role === 'admin' && ( {user?.role === 'admin' && (
<Dialog open={isCreateDialogOpen} onOpenChange={(open) => { <Dialog open={isCreateDialogOpen} onOpenChange={(open) => {
@@ -354,7 +371,6 @@ export default function AnnouncementCard() {
</DialogContent> </DialogContent>
</Dialog> </Dialog>
)} )}
<Megaphone className="h-4 w-4 text-muted-foreground" />
</div> </div>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
@@ -369,35 +385,37 @@ export default function AnnouncementCard() {
<div className="space-y-3"> <div className="space-y-3">
{announcements.map((announcement) => { {announcements.map((announcement) => {
const priorityConfig = getPriorityConfig(announcement.type); const priorityConfig = getPriorityConfig(announcement.type);
const PriorityIcon = priorityConfig.icon; const TypeIcon = getTypeIcon(announcement.type);
return ( 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-1 min-w-0"> <div className="flex items-start gap-3 flex-1 min-w-0">
<div className="flex items-center gap-2 mb-1"> <TypeIcon className="h-4 w-4 text-muted-foreground mt-0.5 flex-shrink-0" />
<h4 className="font-medium text-sm truncate"> <div className="flex-1 min-w-0">
{announcement.title} <div className="flex items-center justify-between gap-2 mb-1">
</h4> <h4 className="font-medium text-sm truncate">
<Badge variant={priorityConfig.color} className="flex items-center gap-1 text-xs"> {announcement.title}
<PriorityIcon className="w-2.5 h-2.5" /> </h4>
{priorityConfig.label} <Badge variant={priorityConfig.color} className="flex items-center gap-1 text-xs flex-shrink-0">
</Badge> {priorityConfig.label}
</div> </Badge>
</div>
{announcement.content && ( {announcement.content && (
<p className="text-xs text-muted-foreground mb-1 line-clamp-1"> <p className="text-xs text-muted-foreground mb-1 line-clamp-1">
{announcement.content} {announcement.content}
</p> </p>
)} )}
<div className="flex items-center gap-3 text-xs text-muted-foreground"> <div className="flex items-center gap-3 text-xs text-muted-foreground">
<span> <span>
{safeFormat(safeDate(announcement.createdAt), 'dd/MM à HH:mm')} {safeFormat(safeDate(announcement.createdAt), 'dd/MM à HH:mm')}
</span> </span>
<span> <span>
{announcement.author.firstName} {announcement.author.lastName} {announcement.author.firstName} {announcement.author.lastName}
{announcement.group && ` • ${announcement.group.name}`} {announcement.group && ` • ${announcement.group.name}`}
</span> </span>
</div>
</div> </div>
</div> </div>
{user?.role === 'admin' && ( {user?.role === 'admin' && (