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) => { { 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 = ({ >