[HOLD for payment 2023-12-28][$500][Theme Switching] 🐛 Android - Track distance - The inscription in the pop-up window is hardly visible in light mode

[lanitochka17]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number: 1.4.13-0
Reproducible in staging?: Y
Reproducible in production?: N
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: Applause - Internal Team
Slack conversation:

Action Performed:

Precondition: user turns on light mode on the app

1. Open the app
2. Login with any account
3. Go to Settings -> Workspaces -> Open any WS -> Reimbursements -> Track distance
4. Tap on Unit

Expected Result:

The inscription in the pop-up window is good visible

Actual Result:

The inscription in the pop-up window is hardly visible
The same behavior happens with pop-up windows during connecting bank account

Workaround:

Unknown

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

Add any screenshot/video evidence

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @alexpensify

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01ee03b399c3458856
• Upwork Job ID: 1737582136051163136
• Last Price Increase: 2023-12-20

[github-actions]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[melvin-bot]

Triggered auto assignment to @jasperhuangg (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[jasperhuangg]

@grgia looks like this is related to themes, do you think you could get a fix up?

[jasperhuangg]

At least for the workspace reimburse view portion of this issue–it seems like the bug is coming from us not passing theme styles into these components:

App/src/pages/workspace/reimburse/WorkspaceRateAndUnitPage.js

Lines 182 to 205 in 4592a7c

	<TextInput
	role={CONST.ROLE.PRESENTATION}
	inputID="rate"
	containerStyles={[this.props.themeStyles.mt4]}
	defaultValue={PolicyUtils.getUnitRateValue(distanceCustomRate, this.props.toLocaleDigit)}
	label={this.props.translate('workspace.reimburse.trackDistanceRate')}
	aria-label={this.props.translate('workspace.reimburse.trackDistanceRate')}
	placeholder={lodashGet(this.props, 'policy.outputCurrency', CONST.CURRENCY.USD)}
	autoCompleteType="off"
	autoCorrect={false}
	inputMode={CONST.INPUT_MODE.DECIMAL}
	maxLength={12}
	value={this.state.rate}
	onChangeText={(value) => this.setState({rate: value})}
	/>
	<View style={[this.props.themeStyles.mt4]}>
	<Picker
	value={this.state.unit}
	label={this.props.translate('workspace.reimburse.trackDistanceUnit')}
	items={this.getUnitItems()}
	onInputChange={(value) => this.setState({unit: value})}
	/>
	</View>

@grgia do you know what styles we're supposed to be passing here?

[grgia]

@jasperhuangg if we pass the {color: theme.textLight} we can make the text white for now on both platforms (or textReversed depending on what this looks like on dark mode)

[neonbhai]

Proposal

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

Track distance - The inscription in the pop-up window is hardly visible in light mode

What is the root cause of that problem?

All these errors are because of the Picker component.
We are missing the backgroundColor prop for this component in all places. This did work until now, since by default it takes the dark mode.

The text is hardcoded to be always white here:

App/src/components/Picker/BasePicker.tsx

Line 168 in 4592a7c

items={items.map((item) => ({...item, color: theme.pickerOptionsTextColor}))}

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

We should make sure the BasePicker component gets the right theme here

color: theme.textLight

For Base Picker Background

We should pass the backgroundColor prop for the Picker components:

App/src/components/AddPlaidBankAccount.js

Lines 246 to 255 in 4592a7c

	<Picker
	label={translate('addPersonalBankAccountPage.chooseAccountLabel')}
	onInputChange={onSelect}
	items={options}
	placeholder={{
	value: '',
	label: translate('bankAccount.chooseAnAccount'),
	}}
	value={selectedPlaidAccountID}
	/>

App/src/pages/workspace/reimburse/WorkspaceRateAndUnitPage.js

Lines 199 to 204 in 4592a7c

	<Picker
	value={this.state.unit}
	label={this.props.translate('workspace.reimburse.trackDistanceUnit')}
	items={this.getUnitItems()}
	onInputChange={(value) => this.setState({unit: value})}
	/>

App/src/pages/ReimbursementAccount/CompanyStep.js

Lines 233 to 241 in 4592a7c

	<InputWrapper
	InputComponent={Picker}
	inputID="incorporationType"
	label={translate('companyStep.companyType')}
	items={_.map(_.keys(CONST.INCORPORATION_TYPES), (key) => ({value: key, label: translate(`companyStep.incorporationTypes.${key}`)}))}
	placeholder={{value: '', label: '-'}}
	defaultValue={getDefaultStateForField('incorporationType')}
	shouldSaveDraft
	/>

backgroundColor={theme.componentBG}

Alternatively

We can remove the backgroundColor prop and set it according to theme inside the BasePicker component itself.

[Julesssss]

@neonbhai I like setting this in the base picker, any reason why you made that your alternative solution?

[situchan]

All of these are same issues:

• [Theme Switching] 🐛 Android - Download confirmation window still dark in light theme #33120
• [HOLD for payment 2023-12-28][$500][Theme Switching] 🐛 Android - Track distance - The inscription in the pop-up window is hardly visible in light mode #33136
• [Theme Switching] 🐛 Android - Distance - Mapbox remains in dark mode when the app is in light mode #33137
• [Theme Switching] 🐛 Android - Scan - Capture error and camera access pop-ups are not in dark mode #33138
• [Theme Switching] 🐛 Android - Scan - "Wrong attachment" pop-up is not in light mode and incorrect 'filetype' spelling #33164

We should make native alert modal and picker background to white in light mode
Original PR which hardcoded dark theme in native android: #16103

[neonbhai]

any reason why you made that your alternative solution?

@Julesssss Hey, was wondering if it wasn't done already for a reason. Setting it in base picker itself is a cleaner solution!

[grgia]

@situchan I agree with that, we should fix those in one PR

[grgia]

@neonbhai @situchan
#16103
Does your proposal work if we remove the dark mode hardcoded background color from this PR? Or do we need to keep that? I'd test locally but my android emulator is completely broken right now

[situchan]

Goin

@neonbhai @situchan #16103 Does your proposal work if we remove the dark mode hardcoded background color from this PR? Or do we need to keep that? I'd test locally but my android emulator is completely broken right now

Will try test, but I think it will depend on system theme.

If we should match with app theme, there should be way to communicate between RN and native so if user preference is updated in RN, it should send to native so that native modals update theme properly.

[grgia]

Will try test, but I think it will depend on system theme.

Thank you, I think if we go this route, we should try to match the theme.

I guess the alternative is using one modal color style on all devices since it only affects android. Let me check with design @situchan

[grgia]

This one specifically has a secondary problem as the text color is being set to text (?) so at least we should pass the correct text color for both themes

[grgia]

@situchan if you're able to test the solution, I think for now if we fix the text color to white so it's at least readable then we can remove the deploy blocker and fix the modals pending the convo in slack.
I've been trying to get my android emulator working but I can't seem to get anything to build without fail, so I am unable to debug this right now.

If @neonbhai's proposal addresses the text color so it works on the 4 cases (OS Dark/Dark, OS Dark/Light OS Light/Dark OS Light/Light), then let's move forward with that- even if the modal remains dark theme on android light

[neonbhai]

@grgia having the color as theme.textLight fixes the issue:

This will work on all 4 cases since popover color is dark for every case.

cc: @situchan

[situchan]

App/src/components/Picker/BasePicker.tsx

Lines 167 to 168 in 4592a7c

	// We add a text color to prevent white text on white background dropdown items on Windows
	items={items.map((item) => ({...item, color: theme.pickerOptionsTextColor}))}

@neonbhai that color was also hardcoded intentionally to fix windows picker issue

[situchan]

I think we should use platform specific code for this.
cc: @grgia

[grgia]

App/src/styles/theme/themes/light.ts

Line 68 in 655c06c

pickerOptionsTextColor: colors.productLight900,

@situchan the pickerOptionsTextColor is set to a light color on light mode

[situchan]

@neonbhai can you share your test branch?

[alexpensify]

@neonbhai and @situchan - to prepare for the payment process, please apply for the job here:

https://www.upwork.com/jobs/~01ee03b399c3458856

I'm OOO starting on Friday and want to make sure that this one is ready for payment next week. Thanks!

[neonbhai]

Hi @alexpensify, Thank you! Looks like I'll have to buy upwork connects to apply. Please send an invite if possible!
Upwork profile link here.

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.4.14-6 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Picker style fix #33194

If no regressions arise, payment will be issued on 2023-12-28. 🎊

After the hold period is over and BZ checklist items are completed, please complete any of the applicable payments for this issue, and check them off once done.

• External issue reporter
• Contributor that fixed the issue
• Contributor+ that helped on the issue and/or PR

For reference, here are some details about the assignees on this issue:

• @neonbhai requires payment (Needs manual offer from BZ)
• @situchan requires payment (Needs manual offer from BZ)

[melvin-bot]

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@situchan] The PR that introduced the bug has been identified. Link to the PR:
• [@situchan] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:
• [@situchan] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:
• [@situchan] Determine if we should create a regression test for this bug.
• [@situchan] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.
• [@alexpensify] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[alexpensify]

I've confirmed that offers have been sent via Upwork to @situchan and @neonbhai. @situchan please complete the checklist. It looks like the payment date changed to December 28.

Heads up, I'm OOO until January 4, but I will log in on Friday, December 29 to complete this payment process pending no regression.

[roryabraham]

Waiting for BZ checklists and payments here, not expecting payments to be complete until 12/29.

[alexpensify]

Closing - Thank you everyone for your patience here. I've completed the payment process in Upwork and closed this job. Happy New Year!

@situchan please complete the checklist when you get a chance, thanks!

[situchan]

Happy new year!

We can skip checklist as regression came from theme switching (which won't happen again in the future) and bug was caught by QA team

[alexpensify]

Noted and thank you.

[neonbhai]

Thanks @alexpensify, wishing you a Happy New Year!