From 5d76670a4086d5b8bbf53eaaa8049f999e9eafa7 Mon Sep 17 00:00:00 2001
From: Giovanni-Josserand <josserand.giovanni@gmail.com>
Date: Mon, 12 Jan 2026 10:15:04 +0100
Subject: [PATCH] use UI button component on filter and toolbar

---
 src/components/Filter/Filter.jsx   | 21 +++++++++++++--------
 src/components/ToolBar/ToolBar.jsx |  9 +++++----
 2 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/src/components/Filter/Filter.jsx b/src/components/Filter/Filter.jsx
index 3dcf4ae..d323cc9 100644
--- a/src/components/Filter/Filter.jsx
+++ b/src/components/Filter/Filter.jsx
@@ -1,4 +1,5 @@
 import styles from "./Filter.module.css";
+import Button from "../ui/button/button.jsx"
 
 function Filter({isFilterVisible, filters, setFilters}){
     const setAlphabeticalOrder = (order) => {
@@ -18,31 +19,35 @@ function Filter({isFilterVisible, filters, setFilters}){
     return (
         <div className={`${styles.filterContainer} ${isFilterVisible ? styles.filterOpen : styles.filterClose}`}>
             <abbr title="Tri alphabétique croissant (A à Z)">
-                <button className={`${styles.filterTag} glassCard ${filters.alphabetical !== "asc" ? "" : styles.active}`}
+                <Button className={`${styles.filterTag} glassCard ${filters.alphabetical !== "asc" ? "" : styles.active}`}
+                        variant={"default"}
                         onClick={() => setAlphabeticalOrder("asc")}>
                     <img src={"sortByAlpha.svg"} alt="Tri alphabétique croissant (A à Z)"/>
-                </button>
+                </Button>
             </abbr>
 
             <abbr title="Tri alphabétique décroissant (Z à A)">
-                <button className={`${styles.filterTag} glassCard ${filters.alphabetical !== "desc" ? "" : styles.active}`}
+                <Button className={`${styles.filterTag} glassCard ${filters.alphabetical !== "desc" ? "" : styles.active}`}
+                        variant={"default"}
                         onClick={() => setAlphabeticalOrder("desc")}>
                     <img src={"sortByAntiAlpha.svg"} alt="Tri alphabétique décroissant (Z à A)"/>
-                </button>
+                </Button>
             </abbr>
 
             <abbr title="Tri chronologique décroissant (du plus récent au plus ancien)">
-                <button className={`${styles.filterTag} glassCard ${filters.yearOrder !== "desc" ? "" : styles.active}`}
+                <Button className={`${styles.filterTag} glassCard ${filters.yearOrder !== "desc" ? "" : styles.active}`}
+                        variant={"default"}
                         onClick={() => setYearOrder("desc")}>
                     <img src={"timerArrowUp.svg"} alt="Tri chronologique décroissant (du plus récent au plus ancien)"/>
-                </button>
+                </Button>
             </abbr>
 
             <abbr title="Tri chronologique croissant (du plus ancien au plus récent)">
-                <button className={`${styles.filterTag} glassCard ${filters.yearOrder !== "asc" ? "" : styles.active}`}
+                <Button className={`${styles.filterTag} glassCard ${filters.yearOrder !== "asc" ? "" : styles.active}`}
+                        variant={"default"}
                         onClick={() => setYearOrder("asc")}>
                     <img src={"timerArrowDown.svg"} alt="Tri chronologique croissant (du plus ancien au plus récent)"/>
-                </button>
+                </Button>
             </abbr>
         </div>
     )
diff --git a/src/components/ToolBar/ToolBar.jsx b/src/components/ToolBar/ToolBar.jsx
index 67ff494..3c4c298 100644
--- a/src/components/ToolBar/ToolBar.jsx
+++ b/src/components/ToolBar/ToolBar.jsx
@@ -3,6 +3,7 @@ import Filter from "../Filter/Filter.jsx";
 import {useEffect, useState} from "react";
 import SearchBar from "../SearchBar/SearchBar.jsx";
 import CreateEventBtn from "../createEventBtn/CreateEventBtn.jsx";
+import Button from "../ui/button/button.jsx";
 
 
 function ToolBar({setFilters, filters, showCreate = true}) {
@@ -40,14 +41,14 @@ function ToolBar({setFilters, filters, showCreate = true}) {
                     <CreateEventBtn />
                 ) : null}
 
-                <button className={`${styles.searchButton} glassCard`} onClick={() => setIsSearchVisible(true)}>
+                <Button className={`${styles.searchButton} glassCard`} variant={"default"} onClick={() => setIsSearchVisible(true)}>
                     <img src="search.svg" alt="Rechercher"/>
-                </button>
+                </Button>
 
                 <div className={`${styles.filterContainer} ${isFilterVisible ? "glassCard" : ""}`}>
-                    <button className={`${isFilterVisible ? "" : styles.mobileFilter} ${styles.sortButton} glassCard`} onClick={toggleFilters}>
+                    <Button className={`${isFilterVisible ? "" : styles.mobileFilter} ${styles.sortButton} glassCard`} variant={"default"} onClick={toggleFilters}>
                         <img src="filter.svg" alt="Filtrer"/>
-                    </button>
+                    </Button>
                     <div className={styles.filterMenu}>
                         <Filter isFilterVisible={isFilterVisible} filters={filters} setFilters={setFilters}/>
                     </div>