From e38b847e50dbadb7ae5c1b1706ebdf0dbf1b6073 Mon Sep 17 00:00:00 2001
From: feruzm <fmiboy@gmail.com>
Date: Mon, 17 Aug 2026 07:39:28 +0000
Subject: [PATCH 1/2] Unclip the search filter icon and unify filter controls
 on tune

IconButton is a fixed 30x30 with a border radius, so it clips its children on
iOS. The search screen added paddingHorizontal: 8 to that fixed box, leaving
14pt of content width for a 22pt glyph, and 4pt was sliced off each side of the
funnel. Reported from a device screenshot.

The padding was standing in for a touch target, which the component already
supports properly via hitSlop, so use that instead.

Switch the glyph to tune, which reads better at this size, and use the same one
for the wallet manage-tokens button that was a cog. A cog reads as app settings,
while that control picks which tokens are shown. filter/filter-outline carried
whether any filter was set and tune has no outline variant, so that moves to
colour.
---
 src/screens/searchResult/screen/searchResultScreen.tsx | 9 +++++++--
 src/screens/searchResult/screen/searchResultStyles.ts  | 8 +++++++-
 src/screens/wallet/children/walletHeader.tsx           | 5 ++++-
 3 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/src/screens/searchResult/screen/searchResultScreen.tsx b/src/screens/searchResult/screen/searchResultScreen.tsx
index 05f6717373..873b46f4b1 100644
--- a/src/screens/searchResult/screen/searchResultScreen.tsx
+++ b/src/screens/searchResult/screen/searchResultScreen.tsx
@@ -92,10 +92,15 @@ const SearchResultScreen = ({ navigation }: any) => {
         </View>
         <IconButton
           style={styles.filterButton}
-          iconStyle={styles.filterIcon}
+          // `tune` has no outline variant, so "some filter is set" is carried by colour
+          // rather than by swapping the glyph.
+          iconStyle={activeFilterCount > 0 ? styles.filterIconActive : styles.filterIcon}
           iconType="MaterialCommunityIcons"
-          name={activeFilterCount > 0 ? 'filter' : 'filter-outline'}
+          name="tune"
           size={22}
+          // Restores the touch target the removed padding was providing, without
+          // shrinking the content box the icon is drawn in.
+          hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
           onPress={_openFilters}
           accessibilityLabel={intl.formatMessage({ id: 'search_result.filters.open' })}
         />
diff --git a/src/screens/searchResult/screen/searchResultStyles.ts b/src/screens/searchResult/screen/searchResultStyles.ts
index 4905d7614c..09180bfac9 100644
--- a/src/screens/searchResult/screen/searchResultStyles.ts
+++ b/src/screens/searchResult/screen/searchResultStyles.ts
@@ -51,12 +51,18 @@ export default EStyleSheet.create({
   searchInputWrapper: {
     flex: 1,
   },
+  // ⛔ No horizontal padding here. `IconButton` is a fixed 30x30 with a border radius,
+  // which makes it clip its children on iOS, so padding shrinks the content box rather
+  // than growing the button: 8pt a side left 14pt for a 22pt glyph and sliced 4pt off
+  // each edge of the icon. Use the component's `hitSlop` to enlarge the touch target.
   filterButton: {
     marginTop: 20,
     marginRight: 12,
-    paddingHorizontal: 8,
   },
   filterIcon: {
     color: '$iconColor',
   },
+  filterIconActive: {
+    color: '$primaryBlue',
+  },
 });
diff --git a/src/screens/wallet/children/walletHeader.tsx b/src/screens/wallet/children/walletHeader.tsx
index 45e3990031..be91263652 100644
--- a/src/screens/wallet/children/walletHeader.tsx
+++ b/src/screens/wallet/children/walletHeader.tsx
@@ -239,7 +239,10 @@ export const WalletHeader = ({
           >
             <Icon
               iconType="MaterialCommunityIcons"
-              name="cog"
+              // `tune` rather than a cog: this picks which tokens are shown, which is the
+              // same kind of control as the search and wallet history filters, and those
+              // now share this glyph. A cog reads as app settings.
+              name="tune"
               size={20}
               color={EStyleSheet.value('$iconColor')}
             />

From 76137e51b19fab86d151cc3dfa71ad98225e67cb Mon Sep 17 00:00:00 2001
From: feruzm <fmiboy@gmail.com>
Date: Mon, 17 Aug 2026 07:40:35 +0000
Subject: [PATCH 2/2] Use the shared tune glyph for the history filter button

---
 src/screens/assetDetails/screen/assetDetailsScreen.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/screens/assetDetails/screen/assetDetailsScreen.tsx b/src/screens/assetDetails/screen/assetDetailsScreen.tsx
index 45af22da3e..d6e997e3e6 100644
--- a/src/screens/assetDetails/screen/assetDetailsScreen.tsx
+++ b/src/screens/assetDetails/screen/assetDetailsScreen.tsx
@@ -302,7 +302,9 @@ const AssetDetailsScreen = ({ navigation, route }: AssetDetailsScreenProps) => {
     <SafeAreaView edges={['top']} style={styles.container}>
       <BasicHeader
         title={intl.formatMessage({ id: 'wallet.coin_details' })}
-        rightIconName={canFilterActivities ? 'filter-list' : undefined}
+        // `tune` is the shared glyph for filter controls across the app: search filters
+        // and the wallet's manage-tokens button use the same one.
+        rightIconName={canFilterActivities ? 'tune' : undefined}
         rightIconAccessibilityLabel={intl.formatMessage({ id: 'wallet.filter_activities' })}
         iconType="MaterialIcons"
         handleRightIconPress={_onFilterPress}