feat(App): enhance Toaster component with rich colors, close button, and custom toast options

This commit is contained in:
Jaime Idolpx 2026-06-11 18:34:45 -04:00
parent e43ba5dd61
commit fed75c77df

View File

@ -234,7 +234,16 @@ function AppPage({ title, onBack }: { title: string; onBack: () => void }) {
return ( return (
<WsProvider> <WsProvider>
<div className="size-full flex flex-col bg-neutral-50"> <div className="size-full flex flex-col bg-neutral-50">
<Toaster position="bottom-center" offset="calc(4rem + env(safe-area-inset-bottom))" /> <Toaster
position="bottom-center"
offset="calc(4rem + env(safe-area-inset-bottom))"
richColors
closeButton
duration={5000}
toastOptions={{
style: { fontSize: '0.9rem', fontWeight: 500, padding: '14px 16px' },
}}
/>
<header className="bg-[#4d4d4d] px-0 py-0 flex-shrink-0" style={{ paddingTop: 'env(safe-area-inset-top)' }}> <header className="bg-[#4d4d4d] px-0 py-0 flex-shrink-0" style={{ paddingTop: 'env(safe-area-inset-top)' }}>
<div className="flex items-stretch justify-between min-h-[56px]"> <div className="flex items-stretch justify-between min-h-[56px]">
<button onClick={() => setCurrentPage('status')} className="flex items-center h-full"> <button onClick={() => setCurrentPage('status')} className="flex items-center h-full">