gitadmin/moviebox
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: remove blur effects from AuroraBackground and various components for improved performance and visual clarity

Browse Source
This commit is contained in:
Norbert Maciaszek
2025-08-21 18:23:29 +02:00
parent 9051d4887c
commit a440debaff
8 changed files with 102 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/organisms/Navbar/components/Search/index.tsx
View File

@@ -60,9 +60,7 @@ export const Search = () => {
{isSearchOpen && (
<div className="fixed inset-0 z-[60] overflow-y-auto">
{/* Aurora Background */}
<div className="fixed inset-0 bg-gradient-to-br from-purple-900/98 via-blue-900/98 to-teal-900/98"></div>
<div className="fixed inset-0 bg-gradient-to-tr from-slate-900/95 via-slate-800/90 to-slate-900/95"></div>
<div className="fixed inset-0 bg-gradient-to-tr from-pink-500/20 via-transparent to-cyan-500/20 animate-pulse"></div>
<div className="fixed inset-0 bg-gradient-to-tr from-purple-900/98 via-blue-900/98 to-teal-900/98 brightness-75"></div>
{/* Close button */}
<Button
@@ -87,7 +85,7 @@ export const Search = () => {
{/* Enhanced Search Input */}
<div className="relative max-w-2xl mx-auto">
<div className="absolute inset-0 bg-gradient-to-r from-purple-500/30 to-cyan-500/30 rounded-2xl blur-xl"></div>
<div className="absolute inset-0 bg-gradient-to-r from-purple-500/30 to-cyan-500/30 rounded-2xl"></div>
<div className="relative bg-gradient-to-br from-white/15 via-white/8 to-white/12 border border-white/20 rounded-2xl p-2 shadow-2xl shadow-purple-500/10">
<SearchInput
className="w-full px-3 bg-transparent border-none text-lg lg:text-xl placeholder-gray-400 text-white focus:outline-none"
@@ -104,7 +102,7 @@ export const Search = () => {
<div className="text-center py-20">
<div className="relative inline-block">
<Spinner />
<div className="absolute inset-0 bg-gradient-to-r from-purple-400 to-cyan-400 rounded-full opacity-30 blur-lg animate-pulse"></div>
<div className="absolute inset-0 bg-gradient-to-r from-purple-400 to-cyan-400 rounded-full opacity-30 animate-pulse"></div>
</div>
<p className="text-gray-300 mt-4 text-lg">Szukam filmów...</p>
</div>

4
src/components/organisms/Navbar/index.tsx
View File

@@ -37,8 +37,6 @@ export const Navbar = () => {
<header className="sticky top-0 w-full z-50 transition-all duration-300">
{/* Aurora background effect */}
<div className="absolute inset-0 bg-gradient-to-r from-slate-900/95 via-slate-800/98 to-slate-900/95"></div>
<div className="absolute inset-0 bg-gradient-to-r from-purple-600/15 via-blue-600/10 to-teal-600/15"></div>
<div className="absolute inset-0 bg-gradient-to-r from-purple-500/10 via-transparent to-cyan-500/10"></div>
{/* Border glow */}
<div className="absolute bottom-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-purple-400/50 to-transparent"></div>
@@ -57,7 +55,7 @@ export const Navbar = () => {
alt="MovieBox"
className="w-10 h-10 lg:w-12 lg:h-12 transition-all duration-300 group-hover:brightness-110"
/>
<div className="absolute inset-0 bg-gradient-to-r from-purple-400 to-cyan-400 rounded-full opacity-0 group-hover:opacity-20 transition-opacity duration-300 blur-md"></div>
<div className="absolute inset-0 bg-gradient-to-r from-purple-400 to-cyan-400 rounded-full opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
</div>
<div className="hidden sm:block">
<h1 className="text-xl lg:text-2xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-white to-gray-300 group-hover:from-purple-200 group-hover:to-cyan-200 transition-all duration-300">