ciphera-net/pulse
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 15 Wiki Activity

feat: whole modal fades in/out together — glass + content as one unit

Browse Source
This commit is contained in:
Usman Baig
2026-03-26 00:27:26 +01:00
parent ae54e0f10a
commit f6e43976d8
1 changed files with 7 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
components/settings/unified/UnifiedSettingsModal.tsx
View File

@@ -384,28 +384,28 @@ export default function UnifiedSettingsModal() {
onClick={handleBackdropClick} onClick={handleBackdropClick}
/> />
{/* Glass panel — instant appear, fades out with content */} {/* Glass panel — always mounted, fades out on close */}
<div <div
className={`fixed inset-0 z-[61] flex items-center justify-center p-4 ${ className={`fixed inset-0 z-[61] flex items-center justify-center p-4 ${
isOpen isOpen
? 'opacity-100 pointer-events-auto' ? 'opacity-100 pointer-events-auto transition-opacity duration-150'
: showGlass : showGlass
? 'opacity-0 pointer-events-none transition-opacity duration-150' ? 'opacity-0 pointer-events-none transition-opacity duration-150'
: 'opacity-0 pointer-events-none invisible' : 'opacity-0 pointer-events-none invisible'
}`} }`}
> >
<div <div
className="w-full max-w-3xl h-[85vh] bg-neutral-900/65 backdrop-blur-3xl backdrop-saturate-150 supports-[backdrop-filter]:bg-neutral-900/60 border border-white/[0.08] rounded-2xl shadow-xl shadow-black/20 flex flex-col overflow-hidden" className="relative w-full max-w-3xl h-[85vh] bg-neutral-900/65 backdrop-blur-3xl backdrop-saturate-150 supports-[backdrop-filter]:bg-neutral-900/60 border border-white/[0.08] rounded-2xl shadow-xl shadow-black/20 flex flex-col overflow-hidden"
onClick={e => e.stopPropagation()} onClick={e => e.stopPropagation()}
> >
{/* Content animates in/out — glass panel stays visible during exit */} {/* Content animates in/out */}
<AnimatePresence onExitComplete={() => setShowGlass(false)}> <AnimatePresence onExitComplete={() => setShowGlass(false)}>
{isOpen && ( {isOpen && (
<motion.div <motion.div
className="flex flex-col h-full" className="flex flex-col h-full"
initial={{ opacity: 0, y: 10, scale: 0.95 }} initial={{ opacity: 0, scale: 0.98 }}
animate={{ opacity: 1, y: 0, scale: 1 }} animate={{ opacity: 1, scale: 1 }}
exit={{ opacity: 0, y: 10, scale: 0.95 }} exit={{ opacity: 0, scale: 0.98 }}
transition={{ duration: 0.15 }} transition={{ duration: 0.15 }}
> >
{/* Header */} {/* Header */}