Filter bar fix

This commit is contained in:
2025-10-18 17:50:39 +02:00
parent 27fc028bad
commit 9ef83f7963
2 changed files with 8 additions and 13 deletions
@@ -107,9 +107,9 @@ const DeckManager = () => {
return ( return (
<div className="w-full flex flex-col bg-[color:var(--color-background)]"> <div className="w-full flex flex-col bg-[color:var(--color-background)]">
<div className="w-full max-w-6xl mx-auto px-4 py-10"> <div className="w-full max-w-[1200px] mx-auto px-4 py-10">
{/* Filters */} {/* Filters */}
<div className="flex flex-col md:flex-row gap-4 justify-between items-center mb-10 bg-[color:var(--color-surface)]/80 backdrop-blur-lg rounded-2xl px-6 py-4 shadow-lg"> <div className="flex flex-col md:flex-row gap-3 justify-between items-center mb-10 bg-[color:var(--color-surface)]/80 backdrop-blur-lg rounded-2xl px-6 py-4 shadow-lg">
<div className="flex gap-2 items-center w-full md:w-auto"> <div className="flex gap-2 items-center w-full md:w-auto">
<SearchBox <SearchBox
value={search} value={search}
@@ -249,7 +249,7 @@ const DeckManager = () => {
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-8 mt-8"> <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-8 mt-8">
{/* Create New Deck (Mockup) */} {/* Create New Deck (Mockup) */}
<div <div
onClick={() => navigate('/deck-creator')} onClick={() => navigate("/deck-creator")}
className="flex flex-col items-center justify-center h-48 bg-[color:var(--color-card)] border-2 border-dashed border-[color:var(--color-success)] rounded-2xl cursor-pointer hover:bg-[color:var(--color-success)]/20 transition-all duration-200 shadow-lg" className="flex flex-col items-center justify-center h-48 bg-[color:var(--color-card)] border-2 border-dashed border-[color:var(--color-success)] rounded-2xl cursor-pointer hover:bg-[color:var(--color-success)]/20 transition-all duration-200 shadow-lg"
> >
<FaPlus style={{ color: "var(--color-success)" }} className="text-5xl mb-2" /> <FaPlus style={{ color: "var(--color-success)" }} className="text-5xl mb-2" />
@@ -296,12 +296,7 @@ const DeckManager = () => {
</div> </div>
{/* Deck Info Popup */} {/* Deck Info Popup */}
{selectedDeck && ( {selectedDeck && <DeckInfoPopUp deck={selectedDeck} onClose={() => setSelectedDeck(null)} />}
<DeckInfoPopUp
deck={selectedDeck}
onClose={() => setSelectedDeck(null)}
/>
)}
</div> </div>
) )
} }
@@ -1,7 +1,7 @@
// src/pages/Decks/DeckManagerPage.jsx // src/pages/Decks/DeckManagerPage.jsx
// Deck Management Page (with Navbar, no Footer) // Deck Management Page (with Navbar, no Footer)
import DeckManager from "../../components/Landingpage/DeckManager.jsx" import DeckManager from "../../components/DeckCreator/DeckManager.jsx"
import Navbar from "../../components/Navbar/Navbar.jsx" import Navbar from "../../components/Navbar/Navbar.jsx"
export default function DeckManagerPage() { export default function DeckManagerPage() {