From 71695aba6cdfed68bfb298a4ebf83712622d340d Mon Sep 17 00:00:00 2001
From: MartinBraquet <martin.braquet@gmail.com>
Date: Tue, 20 Jan 2026 13:35:18 +0100
Subject: [PATCH] Improve button for reset filters

---
 web/components/filters/desktop-filters.tsx | 10 ++++------
 web/components/filters/mobile-filters.tsx  | 14 ++++++--------
 web/components/searches/button.tsx         | 14 ++++++++++++++
 3 files changed, 24 insertions(+), 14 deletions(-)

diff --git a/web/components/filters/desktop-filters.tsx b/web/components/filters/desktop-filters.tsx
index c94a899..6b0e818 100644
--- a/web/components/filters/desktop-filters.tsx
+++ b/web/components/filters/desktop-filters.tsx
@@ -41,6 +41,7 @@ import {
 import {InterestFilter, InterestFilterText} from "web/components/filters/interest-filter";
 import {OptionTableKey} from "common/profiles/constants";
 import {useT} from "web/lib/locale";
+import {ResetFiltersButton} from "web/components/searches/button";
 
 export function DesktopFilters(props: {
   filters: Partial<FilterFields>
@@ -71,12 +72,9 @@ export function DesktopFilters(props: {
   return (
     <>
 
-      <button
-        className="text-ink-900 hover:text-primary-500 underline"
-        onClick={clearFilters}
-      >
-        {t('filter.reset', 'Reset filters')}
-      </button>
+      <ResetFiltersButton
+        clearFilters={clearFilters}
+      />
 
       <MyMatchesToggle
         setYourFilters={setYourFilters}
diff --git a/web/components/filters/mobile-filters.tsx b/web/components/filters/mobile-filters.tsx
index 988456b..c583e9a 100644
--- a/web/components/filters/mobile-filters.tsx
+++ b/web/components/filters/mobile-filters.tsx
@@ -42,6 +42,7 @@ import {MdLanguage, MdLocalBar} from "react-icons/md";
 import {LuCigarette, LuGraduationCap} from "react-icons/lu";
 import {RiScales3Line} from "react-icons/ri";
 import {PiHandsPrayingBold} from "react-icons/pi";
+import {ResetFiltersButton} from "web/components/searches/button";
 
 function MobileFilters(props: {
   filters: Partial<FilterFields>
@@ -87,8 +88,8 @@ function MobileFilters(props: {
       {/*    height: 'env(safe-area-inset-top)',*/}
       {/*  }}*/}
       {/*/>*/}
-      <Row>
-        <Col className="p-4 pb-2">
+      <Row className="justify-between px-4">
+        <Col className="py-2">
           <MyMatchesToggle
             setYourFilters={setYourFilters}
             youProfile={youProfile}
@@ -96,12 +97,9 @@ function MobileFilters(props: {
             hidden={!youProfile}
           />
         </Col>
-        <button
-          className="text-ink-900 hover:text-primary-500 underline"
-          onClick={clearFilters}
-        >
-          {t('filter.reset', 'Reset filters')}
-        </button>
+        <ResetFiltersButton
+          clearFilters={clearFilters}
+        />
       </Row>
 
       {/* Short Bios */}
diff --git a/web/components/searches/button.tsx b/web/components/searches/button.tsx
index 026e0ca..c3afc2f 100644
--- a/web/components/searches/button.tsx
+++ b/web/components/searches/button.tsx
@@ -46,6 +46,20 @@ export function BookmarkSearchButton(props: {
   )
 }
 
+export function ResetFiltersButton(props: {
+  clearFilters: () => void
+}) {
+  const {clearFilters} = props
+  const t = useT()
+  return (
+    <>
+      <Button onClick={clearFilters} color="gray-outline" size={'xs'}>
+        {t('filter.reset', 'Reset filters')}
+      </Button>
+    </>
+  )
+}
+
 
 function ButtonModal(props: {
   open: boolean