Enhance UI components with gradient backgrounds and improved interactions: update Button, Dropdown, MovieCard layouts (Aurora, Minimal, Zeus), Pagination, Navbar, and Search components to utilize gradient styles for a more visually appealing design. Refactor Pagination to use the new Button component for consistency.
This commit is contained in:
Norbert Maciaszek
@@ -57,8 +57,9 @@ export const Search = () => {
|
||||
{isSearchOpen && (
|
||||
<div className="fixed inset-0 z-[60] overflow-y-auto">
|
||||
{/* Aurora Background */}
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-purple-900/95 via-blue-900/95 to-teal-900/95 backdrop-blur-2xl"></div>
|
||||
<div className="absolute 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-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>
|
||||
|
||||
{/* Close button */}
|
||||
<Button
|
||||
@@ -86,7 +87,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="relative bg-white/10 backdrop-blur-xl border border-white/20 rounded-2xl p-2">
|
||||
<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"
|
||||
onChange={handleSearch}
|
||||
@@ -122,7 +123,7 @@ export const Search = () => {
|
||||
{results && (
|
||||
<div className="mb-12">
|
||||
<MovieList
|
||||
overrideMovies={results.slice(0, 5).map((m) => ({
|
||||
overrideMovies={results.slice(0, 4).map((m) => ({
|
||||
...m,
|
||||
favorite: false,
|
||||
seen: false,
|
||||
@@ -134,7 +135,7 @@ export const Search = () => {
|
||||
)}
|
||||
|
||||
{/* Show More Button */}
|
||||
{total_results > 5 && (
|
||||
{total_results > 4 && (
|
||||
<div className="text-center">
|
||||
<div className="relative inline-block">
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-purple-500 to-cyan-500 rounded-xl blur-lg opacity-50"></div>
|
||||
|
||||
@@ -29,7 +29,8 @@ export const Navbar = () => {
|
||||
{/* Main Navbar */}
|
||||
<header className="fixed top-0 w-full z-50 transition-all duration-300">
|
||||
{/* Aurora background effect */}
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-purple-900/80 via-blue-900/80 to-teal-900/80 backdrop-blur-xl"></div>
|
||||
<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 */}
|
||||
@@ -70,7 +71,7 @@ export const Navbar = () => {
|
||||
<Link
|
||||
key={link.href}
|
||||
href={link.href}
|
||||
className="group relative px-4 py-2 rounded-xl transition-all duration-300 hover:bg-white/10 backdrop-blur-sm"
|
||||
className="group relative px-4 py-2 rounded-xl transition-all duration-300 hover:bg-gradient-to-r hover:from-white/10 hover:to-white/5 border border-transparent hover:border-white/10"
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-lg">{link.icon}</span>
|
||||
@@ -90,7 +91,7 @@ export const Navbar = () => {
|
||||
{/* Mobile Menu Button */}
|
||||
<button
|
||||
onClick={toggleMobileMenu}
|
||||
className="md:hidden relative p-3 rounded-xl bg-white/10 backdrop-blur-sm border border-white/20 transition-all duration-300 hover:bg-white/20 hover:scale-105"
|
||||
className="md:hidden relative p-3 rounded-xl bg-gradient-to-br from-white/15 to-white/5 border border-white/20 transition-all duration-300 hover:bg-gradient-to-br hover:from-white/25 hover:to-white/10 hover:scale-105 shadow-lg"
|
||||
>
|
||||
<div className="w-6 h-6 flex items-center justify-center">
|
||||
{isMobileMenuOpen ? (
|
||||
@@ -112,14 +113,15 @@ export const Navbar = () => {
|
||||
<div className="fixed inset-0 z-40 md:hidden">
|
||||
{/* Backdrop */}
|
||||
<div
|
||||
className="absolute inset-0 bg-black/70 backdrop-blur-sm transition-opacity duration-300"
|
||||
className="absolute inset-0 bg-gradient-to-br from-black/85 via-slate-900/90 to-black/85 transition-opacity duration-300"
|
||||
onClick={toggleMobileMenu}
|
||||
/>
|
||||
|
||||
{/* Menu Panel */}
|
||||
<div className="absolute top-0 right-0 w-80 max-w-[85vw] h-full">
|
||||
{/* Aurora background */}
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-slate-800/95 to-slate-900/95 backdrop-blur-xl"></div>
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-slate-800/98 via-slate-850/99 to-slate-900/98"></div>
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-purple-500/8 via-transparent to-cyan-500/8"></div>
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-purple-500/10 via-transparent to-cyan-500/10"></div>
|
||||
|
||||
<div className="relative h-full flex flex-col p-6 pt-24">
|
||||
@@ -138,7 +140,7 @@ export const Navbar = () => {
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-12 h-12 rounded-xl bg-gradient-to-r from-purple-500/20 to-cyan-500/20 flex items-center justify-center text-2xl backdrop-blur-sm">
|
||||
<div className="w-12 h-12 rounded-xl bg-gradient-to-r from-purple-500/25 via-purple-400/15 to-cyan-500/25 flex items-center justify-center text-2xl border border-white/10 shadow-lg shadow-purple-500/10">
|
||||
{link.icon}
|
||||
</div>
|
||||
<div>
|
||||
|
||||
Reference in New Issue
Block a user