golomazov/hotelsync
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: notifications — unified dark style, centered at bottom

Browse Source
This commit is contained in:
HotelSync
2026-04-17 11:30:46 +03:00
parent e6d84e6fd7
commit 9d12e157b1
2 changed files with 10 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/PushBanner.tsx
View File

@@ -50,8 +50,8 @@ export function PushBanner() {
}
return (
<div className="fixed bottom-24 left-4 right-24 z-40 max-w-xs">
<div className="bg-slate-800 dark:bg-slate-900 text-white rounded-2xl shadow-xl px-4 py-3 flex items-center gap-3">
<div className="fixed bottom-6 left-1/2 -translate-x-1/2 z-40 w-80">
<div className="bg-slate-800 text-white rounded-2xl shadow-xl px-4 py-3 flex items-center gap-3">
<div className="w-8 h-8 rounded-full bg-brand-600 flex items-center justify-center shrink-0">
<Bell size={15} />
</div>
@@ -63,7 +63,7 @@ export function PushBanner() {
className="text-xs font-semibold text-brand-300 hover:text-brand-200 disabled:opacity-50 transition-colors whitespace-nowrap">
{loading ? '...' : 'Включить'}
</button>
<button onClick={dismiss} className="text-slate-400 hover:text-white transition-colors">
<button onClick={dismiss} className="text-slate-500 hover:text-white transition-colors">
<X size={14} />
</button>
</div>

14
src/components/chat/ChatWidget.tsx
View File

@@ -1018,7 +1018,7 @@ export function ChatWidget() {
{/* Toast notifications */}
{toasts.length > 0 && (
<div className="fixed top-4 right-4 z-[70] flex flex-col gap-2 w-72">
<div className="fixed bottom-6 left-1/2 -translate-x-1/2 z-[70] flex flex-col items-center gap-2 w-80 pointer-events-none">
{toasts.map(toast => (
<ToastNotifCard
key={toast.id}
@@ -1059,15 +1059,15 @@ function ToastNotifCard({ toast, showText, onClose, onClick }: {
return (
<div
onClick={onClick}
className="flex items-start gap-3 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-600 rounded-2xl shadow-lg px-4 py-3 cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-700/80 transition-colors"
className="pointer-events-auto w-full flex items-center gap-3 bg-slate-800 text-white rounded-2xl shadow-xl px-4 py-3 cursor-pointer hover:bg-slate-700 transition-colors"
>
<div className="shrink-0 mt-0.5 w-8 h-8 rounded-full bg-brand-100 dark:bg-brand-900/30 flex items-center justify-center">
<MessageSquare size={15} className="text-brand-600 dark:text-brand-400" />
<div className="shrink-0 w-8 h-8 rounded-full bg-brand-600 flex items-center justify-center">
<MessageSquare size={15} className="text-white" />
</div>
<div className="flex-1 min-w-0">
<p className="text-sm font-semibold text-slate-800 dark:text-slate-100 truncate">{toast.roomName}</p>
<p className="text-sm font-semibold truncate">{toast.roomName}</p>
{showText ? (
<p className="text-xs text-slate-500 dark:text-slate-400 truncate mt-0.5">
<p className="text-xs text-slate-400 truncate mt-0.5">
{toast.senderName ? `${toast.senderName.split(' ')[0]}: ` : ''}{toast.text || 'Новое сообщение'}
</p>
) : (
@@ -1076,7 +1076,7 @@ function ToastNotifCard({ toast, showText, onClose, onClick }: {
</div>
<button
onClick={e => { e.stopPropagation(); onClose() }}
className="shrink-0 text-slate-300 hover:text-slate-500 dark:text-slate-600 dark:hover:text-slate-400 transition-colors p-0.5 mt-0.5"
className="shrink-0 text-slate-500 hover:text-slate-300 transition-colors p-0.5"
>
<X size={13} />
</button>