mirror of
https://github.com/mauriceboe/TREK.git
synced 2026-06-27 09:11:46 +00:00
feat(dashboard): boarding-pass hero, atlas row, live widgets + modal portal fix
Reworked dashboard layout: boarding-pass hero with hover + days-left countdown, atlas stats row with real flags, searchable currency widget, editable timezone widget, new-trip FAB. Modals now portal to document.body to avoid inheriting dashboard-scoped button/font styles.
This commit is contained in:
@@ -1,4 +1,5 @@
|
||||
import React, { useEffect, useCallback, useRef } from 'react'
|
||||
import ReactDOM from 'react-dom'
|
||||
import { X } from 'lucide-react'
|
||||
|
||||
const sizeClasses: Record<string, string> = {
|
||||
@@ -48,7 +49,7 @@ export default function Modal({
|
||||
|
||||
if (!isOpen) return null
|
||||
|
||||
return (
|
||||
return ReactDOM.createPortal(
|
||||
<div
|
||||
className="fixed inset-0 z-[200] flex items-start sm:items-center justify-center px-4 modal-backdrop trek-backdrop-enter"
|
||||
style={{ backgroundColor: 'rgba(15, 23, 42, 0.5)', paddingTop: 70, paddingBottom: 'calc(20px + var(--bottom-nav-h))', overflow: 'hidden' }}
|
||||
@@ -94,6 +95,7 @@ export default function Modal({
|
||||
)}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>,
|
||||
document.body
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user