Fixed UI misalignments
This commit is contained in:
@@ -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)}
|
||||
|
||||
Reference in New Issue
Block a user