Unclip the search filter icon and unify filter controls on tune

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}

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' })}
         />

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',
+  },
 });

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')}
             />