[Due for payment 2026-04-07] [$250] Change option row and push inputs chevrons to new look

[dubielzyk-expensify]

Now that we have changed the chevrons (the little > icon) of the workspace editor and expenses/reports, it's time to bring the consistency over to push inputs and option rows

For all pushrows and options rows:

Spec:

Notes:

• Icon goes from 20px -> 16px
• Icon goes from 100% opacity to 50% opacity
• Icon should be 100% opacity on hover
• We wanna make sure we do a test build of this before we merge it into the product
• All other layout should stay the same

cc @Expensify/design @Expensify/product-pr

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021994245730839678008
• Upwork Job ID: 1994245730839678008
• Last Price Increase: 2025-11-28
• Automatic offers:
• dominictb | Reviewer | 109638059
• daledah | Contributor | 109638062

Issue Owner

Current Issue Owner: @mallenexpensify

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~021994245730839678008

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @dominictb (External)

[daledah]

🚨 Edited by proposal-police: This proposal was edited at 2025-11-28 03:59:45 UTC.

Proposal

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

Change option row and push inputs chevrons to new look

What is the root cause of that problem?

Improvement

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

1. Update the width and height of this icon to 16px

    width={variables.iconSizeSmall}
    height={variables.iconSizeSmall}

App/src/components/MenuItem.tsx

Lines 951 to 956 in fcabc6d

	<Icon
	src={iconRight}
	fill={StyleUtils.getIconFillColor(getButtonState(focused || isHovered, pressed, success, disabled, interactive))}
	width={hasSubMenuItems ? variables.iconSizeSmall : variables.iconSizeNormal}
	height={hasSubMenuItems ? variables.iconSizeSmall : variables.iconSizeNormal}
	/>

2. Then add hover effect by adding these styles here

    !isHovered && styles.opacitySemiTransparent,
    isHovered && styles.opacity1,

App/src/components/MenuItem.tsx

Lines 947 to 948 in fcabc6d

	hasSubMenuItems && styles.opacitySemiTransparent,
	hasSubMenuItems && styles.pl6,

3. We can create MenuItem.test.tsx and verify the chevron in inputs has styles:
   Size: 16px
   Opacity: 50% default
   Opacity: 100% on hover

4. Optional: we can do the same with SplitListItem here

Screen.Recording.2025-11-28.at.10.36.36.mov

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.

[github-actions]

⚠️ @daledah Thanks for your proposal. Please update it to follow the proposal template, as proposals are only reviewed if they follow that format (note the mandatory sections).

[dominictb]

@daledah proposal LGTM

🎀 👀 🎀 C+ reviewed

[melvin-bot]

Triggered auto assignment to @inimaga, see https://stackoverflow.com/c/expensify/questions/7972 for more details.