use UI button component on filter and toolbar

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>
     )

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>