use UI button component on filter and toolbar

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>