[Due for payment 2025-05-14] [$125] Bank icons are too small in the "Pay" menu

[m-natarajan]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: 9.1.30-0
Reproducible in staging?: need reproduction (requires real bank)
Reproducible in production?:
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?:
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @shawnborton
Slack conversation (hyperlinked to channel name): #expensify - bugs

Action Performed:

1. Send an invoice to user A
2. Sign in as user B
3. Go to the invoice
4. Click on "Pay" and observe the options menu

Expected Result:

Band icon should be correct size

Actual Result:

Bank icon is too small

Workaround:

unknown

Platforms:

Select the officially supported platforms where the issue was reproduced:

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• Windows: Chrome
• MacOS: Chrome / Safari
• MacOS: Desktop

Platforms Tested:

On which of our officially supported platforms was this issue tested:

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• Windows: Chrome
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021914517278232314681
• Upwork Job ID: 1914517278232314681
• Last Price Increase: 2025-04-22
• Automatic offers:
• nkdengineer | Contributor | 107090423

Issue Owner

Current Issue Owner: @

Issue Owner

Current Issue Owner: @VictoriaExpensify

[melvin-bot]

Triggered auto assignment to @VictoriaExpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[MelvinBot]

This has been labelled "Needs Reproduction". Follow the steps here: https://stackoverflowteams.com/c/expensify/questions/16989

[samranahm]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Bank icons are too small in the "Pay" menu

What is the root cause of that problem?

App/src/components/Icon/BankIcons/index.ts

Lines 36 to 38 in 28fd6af

	} else {
	bankIcon.iconHeight = variables.cardIconHeight;
	bankIcon.iconWidth = variables.cardIconWidth;

we are using 26 here

App/src/styles/variables.ts

Lines 252 to 253 in ab26fec

	cardIconWidth: 40,
	cardIconHeight: 26,

What changes do you think we should make in order to solve the problem?

we need to update this to 40

cardIconHeight: 40,

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

N/A

What alternative solutions did you explore? (Optional)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[nyomanjyotisa]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Bank icons are too small in the "Pay" menu

What is the root cause of that problem?

We don't set the iconWidth and iconHeight value here, and it will use the default one, which is 20

App/src/components/SettlementButton/index.tsx

Lines 166 to 171 in 28fd6af

	formattedPaymentMethods.map((formattedPaymentMethod) => ({
	text: formattedPaymentMethod?.title ?? '',
	description: formattedPaymentMethod?.description ?? '',
	icon: formattedPaymentMethod?.icon,
	onSelected: () => onPress(CONST.IOU.PAYMENT_TYPE.EXPENSIFY, payAsBusiness, formattedPaymentMethod.methodID, formattedPaymentMethod.accountType),
	}));

App/src/components/MenuItem.tsx

Lines 727 to 745 in 28fd6af

	<Icon
	contentFit={contentFit}
	hovered={isHovered}
	pressed={pressed}
	src={icon}
	width={iconWidth}
	height={iconHeight}
	fill={
	displayInDefaultIconColor
	? undefined
	: iconFill ??
	StyleUtils.getIconFillColor(
	getButtonState(focused || isHovered, pressed, success, disabled, interactive),
	true,
	isPaneMenu,
	)
	}
	additionalStyles={additionalIconStyles}
	/>

App/src/components/Icon/index.tsx

Lines 58 to 59 in 28fd6af

	width = variables.iconSizeNormal,
	height = variables.iconSizeNormal,

What changes do you think we should make in order to solve the problem?

set iconWidth and iconHeight value to variables.iconSizeExtraLarge which is 40, or any other value by the design team

App/src/components/SettlementButton/index.tsx

Lines 166 to 171 in 28fd6af

	formattedPaymentMethods.map((formattedPaymentMethod) => ({
	text: formattedPaymentMethod?.title ?? '',
	description: formattedPaymentMethod?.description ?? '',
	icon: formattedPaymentMethod?.icon,
	onSelected: () => onPress(CONST.IOU.PAYMENT_TYPE.EXPENSIFY, payAsBusiness, formattedPaymentMethod.methodID, formattedPaymentMethod.accountType),
	}));

                formattedPaymentMethods.map((formattedPaymentMethod) => ({
                    ...
                    iconWidth: variables.iconSizeExtraLarge,
                    iconHeight: variables.iconSizeExtraLarge,
                    ...
                }));

Might need to check in other places as well, and do the same

Result:

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

None

What alternative solutions did you explore? (Optional)

None

[dominictb]

@VictoriaExpensify I can reproduce this following the same steps in OP.

I can take over as C+ as per this thread.

[allgandalf]

Able to reproduce , please assign me as C+

[nkdengineer]

🚨 Edited by proposal-police: This proposal was edited at 2025-04-25 03:20:18 UTC.

Proposal

Please re-state the problem that we are trying to solve in this issue.

Bank icon is too small

What is the root cause of that problem?

We don't add the iconSize and the border for icon in here

App/src/components/SettlementButton/index.tsx

Lines 166 to 171 in 28fd6af

	formattedPaymentMethods.map((formattedPaymentMethod) => ({
	text: formattedPaymentMethod?.title ?? '',
	description: formattedPaymentMethod?.description ?? '',
	icon: formattedPaymentMethod?.icon,
	onSelected: () => onPress(CONST.IOU.PAYMENT_TYPE.EXPENSIFY, payAsBusiness, formattedPaymentMethod.methodID, formattedPaymentMethod.accountType),
	}));

And we pass this style here

App/src/components/PopoverMenu.tsx

Lines 320 to 321 in 28fd6af

	// Spread other props dynamically
	{...menuItemProps}

What changes do you think we should make in order to solve the problem?

We should add the iconStyles as formattedPaymentMethod.iconStyles

          formattedPaymentMethods.map((formattedPaymentMethod) => ({
                    ...
                    iconStyles: formattedPaymentMethod.iconStyles
                    ...
             })

App/src/components/SettlementButton/index.tsx

Lines 166 to 171 in 28fd6af

	formattedPaymentMethods.map((formattedPaymentMethod) => ({
	text: formattedPaymentMethod?.title ?? '',
	description: formattedPaymentMethod?.description ?? '',
	icon: formattedPaymentMethod?.icon,
	onSelected: () => onPress(CONST.IOU.PAYMENT_TYPE.EXPENSIFY, payAsBusiness, formattedPaymentMethod.methodID, formattedPaymentMethod.accountType),
	}));

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

None

What alternative solutions did you explore? (Optional)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[VictoriaExpensify]

Agree this is an issue we should fix!