Fixed UI misalignments

This commit is contained in:
2026-10-26 19:57:32 +02:00
parent 80c798e5e6
commit 9f132eeb29
22 changed files with 860 additions and 214 deletions
@@ -3,6 +3,7 @@ import { createPortal } from 'react-dom';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import {
Search,
Trash2,
Bell,
LogOut,
Calendar,
@@ -197,6 +198,7 @@ export function DashboardPage() {
top5Unread,
markAsRead,
markAllAsRead,
deleteMessage,
sendMessage,
isSending,
} = useInAppNotifications();
@@ -1221,9 +1223,25 @@ export function DashboardPage() {
</div>
</div>
</div>
<span className="text-xs text-slate-400/70 shrink-0">
{formatFullDate(msg.createdAt)}
</span>
<div className="flex items-center gap-2.5 shrink-0">
<span className="text-xs text-slate-400/70">
{formatFullDate(msg.createdAt)}
</span>
<button
type="button"
onClick={e => {
e.stopPropagation();
deleteMessage(msg.id);
if (selectedNotification?.id === msg.id) {
setSelectedNotification(null);
}
}}
className="p-1.5 rounded-lg text-slate-400 hover:text-rose-400 hover:bg-rose-500/10 border border-transparent hover:border-rose-500/20 transition cursor-pointer"
title="Delete message (Archive)"
>
<Trash2 className="w-3.5 h-3.5" />
</button>
</div>
</div>
);
})
@@ -1905,16 +1923,30 @@ export function DashboardPage() {
/>
</div>
{/* Action Buttons: Reply and Close */}
{/* Action Buttons: Reply, Delete, and Close */}
<div className="flex items-center justify-between pt-2 border-t border-white/[0.08]">
<button
type="button"
onClick={() => handleReplyToMessage(selectedNotification)}
className="px-5 py-2.5 rounded-xl bg-emerald-600 hover:bg-emerald-500 text-white text-xs font-semibold flex items-center gap-2 shadow-lg shadow-emerald-500/20 transition-all cursor-pointer"
>
<Reply className="w-3.5 h-3.5" />
<span>Reply</span>
</button>
<div className="flex items-center gap-2">
<button
type="button"
onClick={() => handleReplyToMessage(selectedNotification)}
className="px-5 py-2.5 rounded-xl bg-emerald-600 hover:bg-emerald-500 text-white text-xs font-semibold flex items-center gap-2 shadow-lg shadow-emerald-500/20 transition-all cursor-pointer"
>
<Reply className="w-3.5 h-3.5" />
<span>Reply</span>
</button>
<button
type="button"
onClick={() => {
deleteMessage(selectedNotification.id);
setSelectedNotification(null);
}}
className="px-4 py-2.5 rounded-xl bg-rose-500/10 hover:bg-rose-500/20 text-rose-400 border border-rose-500/30 text-xs font-semibold flex items-center gap-2 transition-all cursor-pointer"
title="Delete message (Archive)"
>
<Trash2 className="w-3.5 h-3.5" />
<span>Delete</span>
</button>
</div>
<button
type="button"
onClick={() => setSelectedNotification(null)}