[HOLD for Payment 2024-09-24] [$125] The pressed state of option rows/menu items uses a very dark BG color

[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.0.17-0
Reproducible in staging?: y
Reproducible in production?: y
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: https://expensify.slack.com/archives/C049HHMV9SM/p1722977671278059

Action Performed:

1. Go to workspace settings
2. Go to more features > Toggle Workflows
3. Go to workflows
4. Long press the "Add approval workflow" or any option row

Expected Result:

Should be simple opacity reduction, custom BG color

Actual Result:

notice that it uses a very dark BG color.

Workaround:

visual

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~016a8138980835380a
• Upwork Job ID: 1820968618804470137
• Last Price Increase: 2024-08-06
• Automatic offers:
• eh2077 | Reviewer | 103434092
• rayane-djouah | Contributor | 103434093

Issue Owner

Current Issue Owner: @eh2077

[melvin-bot]

Triggered auto assignment to @twisterdotcom (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.

[rayane-d]

Proposal

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

The state of our menu item became so dark when it's pressed. We need to just reduce its opacity to 80% when pressed, and use a lighter background color compared to the currently used one.

What is the root cause of that problem?

in MenuItem's PressableWithSecondaryInteraction we use getButtonBackgroundColorStyle style function:

App/src/components/MenuItem.tsx

Lines 545 to 546 in 1147c3b

	StyleUtils.getButtonBackgroundColorStyle(getButtonState(focused || isHovered, pressed, success, disabled, interactive), true),
	...(Array.isArray(wrapperStyle) ? wrapperStyle : [wrapperStyle]),

and getButtonBackgroundColorStyle returns theme.buttonPressedBG background color when the button state is pressed:

App/src/styles/utils/index.ts

Line 1293 in 1147c3b

return {backgroundColor: theme.buttonPressedBG};

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

we should use activeOpacity={0.8} here to reduce its opacity to 80% when pressed :

App/src/components/MenuItem.tsx

Lines 533 to 559 in 1147c3b

	<PressableWithSecondaryInteraction
	onPress={shouldCheckActionAllowedOnPress ? Session.checkIfActionIsAllowed(onPressAction, isAnonymousAction) : onPressAction}
	onPressIn={() => shouldBlockSelection && shouldUseNarrowLayout && DeviceCapabilities.canUseTouchScreen() && ControlSelection.block()}
	onPressOut={ControlSelection.unblock}
	onSecondaryInteraction={onSecondaryInteraction}
	wrapperStyle={outerWrapperStyle}
	style={({pressed}) =>
	[
	containerStyle,
	combinedStyle,
	!interactive && styles.cursorDefault,
	!shouldRemoveBackground &&
	StyleUtils.getButtonBackgroundColorStyle(getButtonState(focused || isHovered, pressed, success, disabled, interactive), true),
	...(Array.isArray(wrapperStyle) ? wrapperStyle : [wrapperStyle]),
	!focused && (isHovered || pressed) && hoverAndPressStyle,
	shouldGreyOutWhenDisabled && disabled && styles.buttonOpacityDisabled,
	isHovered && interactive && !focused && !pressed && !shouldRemoveBackground && styles.hoveredComponentBG,
	] as StyleProp<ViewStyle>
	}
	disabledStyle={shouldUseDefaultCursorWhenDisabled && [styles.cursorDefault]}
	disabled={disabled || isExecuting}
	ref={ref}
	role={CONST.ROLE.MENUITEM}
	accessibilityLabel={title ? title.toString() : ''}
	accessible
	onFocus={onFocus}
	>

and isMenuItem ? {backgroundColor: theme. buttonHoveredBG} : {backgroundColor: theme.buttonPressedBG}; here:

App/src/styles/utils/index.ts

Line 1293 in 1147c3b

return {backgroundColor: theme.buttonPressedBG};

To make the menu item background color theme.buttonHoveredBG when it's pressed.

We can ajust the color or define meaningful names as necessary.

Result:

Screen.Recording.2024-08-06.at.10.32.08.PM.mov

What alternative solutions did you explore? (Optional)

Use the same theme.border style for both the active and pressed states of the menu item.

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

Upwork job price has been updated to $125

[eh2077]

@rayane-djouah 's proposal looks good to me. We should ensure both light and dark modes working as expected - we can check this in PR

🎀👀🎀 C+ reviewed