idolpx/meatloaf-config
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: update SearchOverlay background opacity and button styling for improved aesthetics

Browse Source
This commit is contained in:
Jaime Idolpx 2026-04-14 00:37:04 -04:00
parent 6b0ffb7de2
commit c6d382a88d
1 changed files with 4 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/app/components/SearchOverlay.tsx
View File

@ -87,7 +87,7 @@ export default function SearchOverlay({ config, setConfig, onClose }: SearchOver
initial={{ opacity: 0 }} initial={{ opacity: 0 }}
animate={{ opacity: 1 }} animate={{ opacity: 1 }}
exit={{ opacity: 0 }} exit={{ opacity: 0 }}
className="fixed inset-0 z-50 backdrop-blur-md bg-black/30 flex items-center justify-center" className="fixed inset-0 z-50 backdrop-blur-md bg-black/40 flex items-center justify-center"
onClick={onClose} onClick={onClose}
> >
<motion.div <motion.div
@ -95,7 +95,7 @@ export default function SearchOverlay({ config, setConfig, onClose }: SearchOver
animate={{ y: 0, opacity: 1 }} animate={{ y: 0, opacity: 1 }}
exit={{ y: -50, opacity: 0 }} exit={{ y: -50, opacity: 0 }}
transition={{ type: 'spring', damping: 25, stiffness: 300 }} transition={{ type: 'spring', damping: 25, stiffness: 300 }}
className="w-full h-full max-w-2xl sm:rounded-xl bg-white shadow-2xl overflow-auto flex flex-col justify-center mx-0 sm:mx-auto my-0 sm:my-20 p-0 sm:p-0" className="w-full h-full max-w-2xl sm:rounded-xl bg-white/50 shadow-2xl overflow-auto flex flex-col justify-center mx-0 sm:mx-auto my-0 sm:my-20 p-0 sm:p-0"
style={{ maxHeight: '100dvh' }} style={{ maxHeight: '100dvh' }}
onClick={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}
> >
@ -121,10 +121,10 @@ export default function SearchOverlay({ config, setConfig, onClose }: SearchOver
<button <button
onClick={handleSearch} onClick={handleSearch}
disabled={isSearching} disabled={isSearching}
className="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 flex items-center gap-2" className="p-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 flex items-center justify-center"
aria-label="Search"
> >
<Search className="w-5 h-5" /> <Search className="w-5 h-5" />
Search
</button> </button>
</div> </div>
</div> </div>