Skip to content

🚸 app: increase icon button hit areas #946

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
dieguezguille wants to merge 2 commits into
base: main
Choose a base branch
from
Open

🚸 app: increase icon button hit areas #946

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
96596c7
✨ app: create icon button component
dieguezguille Mar 25, 2026
722f5fb
🚸 app: replace pressable icons with icon button component
dieguezguille Apr 7, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/four-colts-rhyme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@exactly/mobile": patch
---

🚸 replace pressable icons with icon button component
5 changes: 5 additions & 0 deletions .changeset/petite-taxes-do.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@exactly/mobile": patch
---

✨ create icon button component
10 changes: 5 additions & 5 deletions src/components/activity/details/ActivityDetails.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import React from "react";
import { useTranslation } from "react-i18next";
import { Pressable } from "react-native";

import { useRouter } from "expo-router";

Expand All @@ -17,6 +16,7 @@ import { present } from "../../../utils/intercom";
import reportError from "../../../utils/reportError";
import ActionButton from "../../shared/ActionButton";
import GradientScrollView from "../../shared/GradientScrollView";
import IconButton from "../../shared/IconButton";

import type { ActivityItem } from "../../../utils/queryClient";

Expand All @@ -28,17 +28,17 @@ export default function ActivityDetails() {
return (
<GradientScrollView variant="neutral" stickyHeader>
<XStack gap="$s3_5" justifyContent="space-between" alignItems="center">
<Pressable
<IconButton
icon={ArrowLeft}
aria-label={t("Back")}
onPress={() => {
if (router.canGoBack()) {
router.back();
} else {
router.replace("/(main)/(home)");
}
}}
>
<ArrowLeft size={24} color="$uiNeutralPrimary" />
</Pressable>
/>
</XStack>
{item.type === "card" && <CardActivity item={item} />}
{item.type === "received" && <ReceivedActivity item={item} />}
Expand Down
9 changes: 5 additions & 4 deletions src/components/add-funds/AddCrypto.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ import useAccount from "../../utils/useAccount";
import AssetLogo from "../shared/AssetLogo";
import ChainLogo from "../shared/ChainLogo";
import CopyAddressSheet from "../shared/CopyAddressSheet";
import IconButton from "../shared/IconButton";
import Image from "../shared/Image";
import SafeView from "../shared/SafeView";
import Skeleton from "../shared/Skeleton";
Expand Down Expand Up @@ -74,17 +75,17 @@ export default function AddCrypto() {
<View gap="$s5">
<XStack gap="$s3" justifyContent="space-around" alignItems="center">
<View position="absolute" left={0}>
<Pressable
<IconButton
icon={ArrowLeft}
aria-label={t("Back")}
onPress={() => {
if (router.canGoBack()) {
router.back();
} else {
router.replace("/(main)/(home)");
}
}}
>
<ArrowLeft size={24} color="$uiNeutralPrimary" />
</Pressable>
/>
</View>
<View flexDirection="row" alignItems="center" alignSelf="center">
<Text emphasized subHeadline primary>
Expand Down
18 changes: 9 additions & 9 deletions src/components/add-funds/AddFunds.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import React from "react";
import { useTranslation } from "react-i18next";
import { Pressable } from "react-native";

import { useLocalSearchParams, useRouter } from "expo-router";

Expand All @@ -21,6 +20,7 @@ import queryClient, { type AuthMethod } from "../../utils/queryClient";
import reportError from "../../utils/reportError";
import { getKYCStatus, getRampProviders } from "../../utils/server";
import ChainLogo from "../shared/ChainLogo";
import IconButton from "../shared/IconButton";
import SafeView from "../shared/SafeView";
import Skeleton from "../shared/Skeleton";
import Text from "../shared/Text";
Expand Down Expand Up @@ -96,7 +96,9 @@ export default function AddFunds() {
<View gap="$s6" fullScreen padded>
<YStack gap="$s4_5">
<XStack flexDirection="row" gap="$s3_5" justifyContent="space-between" alignItems="center">
<Pressable
<IconButton
icon={ArrowLeft}
aria-label={t("Back")}
onPress={() => {
if (type === "crypto" || type === "fiat") {
if (router.canGoBack()) {
Expand All @@ -108,19 +110,17 @@ export default function AddFunds() {
router.replace("/(main)/(home)");
}
}}
>
<ArrowLeft size={24} color="$uiNeutralPrimary" />
</Pressable>
/>
<Text emphasized subHeadline primary>
{t(type === "crypto" ? "Cryptocurrencies" : type === "fiat" ? "Bank transfers" : "Add Funds")}
</Text>
<Pressable
<IconButton
icon={CircleHelp}
aria-label={t("Help")}
onPress={() => {
presentArticle("8950801").catch(reportError);
}}
>
<CircleHelp color="$uiNeutralPrimary" />
</Pressable>
/>
</XStack>
</YStack>
<ScrollView flex={1}>
Expand Down
25 changes: 13 additions & 12 deletions src/components/add-funds/Bridge.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@ import ownerConfig from "../../utils/wagmi/owner";
import AssetLogo from "../shared/AssetLogo";
import ChainLogo from "../shared/ChainLogo";
import GradientScrollView from "../shared/GradientScrollView";
import IconButton from "../shared/IconButton";
import SafeView from "../shared/SafeView";
import Skeleton from "../shared/Skeleton";
import ExaSpinner from "../shared/Spinner";
Expand Down Expand Up @@ -475,7 +476,9 @@ export default function Bridge() {
<GradientScrollView variant={isError ? "error" : isSuccess ? "success" : "neutral"}>
<View flex={1}>
<YStack gap="$s7" paddingBottom="$s9">
<Pressable
<IconButton
icon={X}
aria-label={t("Close")}
onPress={() => {
if (!isPending) {
setSourceAmount(0n);
Expand All @@ -485,9 +488,7 @@ export default function Bridge() {
}
router.dismissTo("/activity");
}}
>
<X size={24} color="$uiNeutralPrimary" />
</Pressable>
/>
<YStack gap="$s4_5" justifyContent="center" alignItems="center">
<Square
size={80}
Expand Down Expand Up @@ -572,27 +573,27 @@ export default function Bridge() {
justifyContent="space-between"
alignItems="center"
>
<Pressable
<IconButton
icon={ArrowLeft}
aria-label={t("Back")}
onPress={() => {
if (router.canGoBack()) {
router.back();
} else {
router.replace("/(main)/(home)");
}
}}
>
<ArrowLeft size={24} color="$uiNeutralPrimary" />
</Pressable>
/>
<Text primary emphasized subHeadline>
{t("Add funds")}
</Text>
<Pressable
<IconButton
icon={CircleHelp}
aria-label={t("Help")}
onPress={() => {
openBrowser("https://li.fi/").catch(reportError); // TODO replace with article
}}
>
<CircleHelp color="$uiNeutralPrimary" />
</Pressable>
/>
</View>
<ScrollView showsVerticalScrollIndicator={false} flex={1}>
<View padded>
Expand Down
15 changes: 7 additions & 8 deletions src/components/add-funds/Fees.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React, { useCallback, useRef, useState } from "react";
import { Trans, useTranslation } from "react-i18next";
import { Platform, Pressable } from "react-native";
import { Platform } from "react-native";
import { WebView } from "react-native-webview";

import { Redirect, useLocalSearchParams, useRouter } from "expo-router";
Expand All @@ -21,6 +21,7 @@ import openBrowser from "../../utils/openBrowser";
import { APIError } from "../../utils/queryClient";
import reportError from "../../utils/reportError";
import { getKYCStatus, getRampProviders } from "../../utils/server";
import IconButton from "../shared/IconButton";
import SafeView from "../shared/SafeView";
import Button from "../shared/StyledButton";
import Text from "../shared/Text";
Expand Down Expand Up @@ -131,9 +132,7 @@ export default function Fees() {
return (
<SafeView fullScreen>
<View padded>
<Pressable onPress={() => setTOSLink(undefined)}>
<ArrowLeft size={24} color="$uiNeutralPrimary" />
</Pressable>
<IconButton icon={ArrowLeft} aria-label={t("Back")} onPress={() => setTOSLink(undefined)} />
</View>
<TOSView
uri={tosLink}
Expand All @@ -152,17 +151,17 @@ export default function Fees() {
<View gap="$s4_5" fullScreen padded>
<View gap="$s4_5">
<View flexDirection="row" gap="$s3_5" justifyContent="space-between" alignItems="center">
<Pressable
<IconButton
icon={ArrowLeft}
aria-label={t("Back")}
onPress={() => {
if (router.canGoBack()) {
router.back();
} else {
router.replace("/(main)/(home)");
}
}}
>
<ArrowLeft size={24} color="$uiNeutralPrimary" />
</Pressable>
/>
</View>
</View>
<ScrollView flex={1}>
Expand Down
10 changes: 5 additions & 5 deletions src/components/add-funds/KYC.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import React from "react";
import { useTranslation } from "react-i18next";
import { Pressable } from "react-native";

import { Redirect, useLocalSearchParams, useRouter } from "expo-router";

Expand All @@ -17,6 +16,7 @@ import { isValidCurrency } from "../../utils/currencies";
import { startAddressKYC, startMantecaKYC } from "../../utils/persona";
import queryClient from "../../utils/queryClient";
import reportError from "../../utils/reportError";
import IconButton from "../shared/IconButton";
import SafeView from "../shared/SafeView";
import Button from "../shared/StyledButton";
import Text from "../shared/Text";
Expand Down Expand Up @@ -81,7 +81,9 @@ export default function KYC() {
<View gap="$s4_5" fullScreen padded>
<View gap="$s4_5">
<View flexDirection="row" gap="$s3" justifyContent="space-between" alignItems="center">
<Pressable
<IconButton
icon={ArrowLeft}
aria-label={t("Back")}
onPress={() => {
queryClient.removeQueries({ queryKey: ["ramp", "kyc-tokens", provider] });
if (router.canGoBack()) {
Expand All @@ -90,9 +92,7 @@ export default function KYC() {
router.replace("/(main)/(home)");
}
}}
>
<ArrowLeft size={24} color="$uiNeutralPrimary" />
</Pressable>
/>
</View>
</View>
<ScrollView flex={1}>
Expand Down
10 changes: 5 additions & 5 deletions src/components/add-funds/Onboard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import React from "react";
import { useTranslation } from "react-i18next";
import { Pressable } from "react-native";

import { Redirect, useLocalSearchParams, useRouter } from "expo-router";

Expand All @@ -20,6 +19,7 @@ import USD from "../../assets/images/usd.svg";
import USDC from "../../assets/images/usdc.svg";
import USDT from "../../assets/images/usdt.svg";
import { isValidCurrency } from "../../utils/currencies";
import IconButton from "../shared/IconButton";
import SafeView from "../shared/SafeView";
import Button from "../shared/StyledButton";
import Text from "../shared/Text";
Expand Down Expand Up @@ -50,17 +50,17 @@ export default function Onboard() {
<View gap="$s4_5" fullScreen padded>
<View gap="$s4_5">
<View flexDirection="row" gap="$s3_5" justifyContent="space-between" alignItems="center">
<Pressable
<IconButton
icon={ArrowLeft}
aria-label={t("Back")}
onPress={() => {
if (router.canGoBack()) {
router.back();
} else {
router.replace("/(main)/(home)");
}
}}
>
<ArrowLeft size={24} color="$uiNeutralPrimary" />
</Pressable>
/>
</View>
</View>
<ScrollView flex={1}>
Expand Down
21 changes: 14 additions & 7 deletions src/components/add-funds/Ramp.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import { isValidCurrency, fees as rampFees } from "../../utils/currencies";
import reportError from "../../utils/reportError";
import { getRampProviders, getRampQuote } from "../../utils/server";
import Button from "../shared/Button";
import IconButton from "../shared/IconButton";
import InfoAlert from "../shared/InfoAlert";
import ModalSheet from "../shared/ModalSheet";
import SafeView from "../shared/SafeView";
Expand Down Expand Up @@ -122,17 +123,17 @@ export default function Ramp() {
<View gap="$s4_5" fullScreen padded>
<View gap="$s4_5">
<View flexDirection="row" gap="$s3_5" justifyContent="space-between" alignItems="center">
<Pressable
<IconButton
icon={ArrowLeft}
aria-label={t("Back")}
onPress={() => {
if (router.canGoBack()) {
router.back();
} else {
router.replace("/(main)/add-funds");
}
}}
>
<ArrowLeft size={24} color="$uiNeutralPrimary" />
</Pressable>
/>
<Text secondary emphasized>
{deposits.length > 0
? t("{{currency}} via {{methods}}", {
Expand Down Expand Up @@ -350,6 +351,7 @@ function DepositCard({ deposit, isLoading, copyToClipboard }: DepositCardPropert
}

function DetailRow({ label, value, isLoading, onCopy }: DetailRowProperties) {
const { t } = useTranslation();
return (
<XStack gap="$s3" alignItems="center" justifyContent="space-between">
<YStack flex={1} minWidth={0}>
Expand All @@ -360,9 +362,14 @@ function DetailRow({ label, value, isLoading, onCopy }: DetailRowProperties) {
{isLoading || !value ? <Skeleton width={100} height={16} /> : value}
</Text>
</YStack>
<Pressable disabled={isLoading || !value} onPress={onCopy} style={{ flexShrink: 0 }}>
<Copy size={24} color={isLoading || !value ? "$uiNeutralPlaceholder" : "$interactiveBaseBrandDefault"} />
</Pressable>
<IconButton
icon={Copy}
color={isLoading || !value ? "$uiNeutralPlaceholder" : "$interactiveBaseBrandDefault"}
disabled={isLoading || !value}
aria-label={t("Copy")}
flexShrink={0}
onPress={onCopy}
/>
</XStack>
);
}
Expand Down
Loading
Loading