[HOLD for payment 2024-01-25] [HOLD for payment 2024-01-24] Referral - Info icon in Referral banner is black in dark mode

[lanitochka17]

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: 1.4.25-1
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:

1. Go to FAB > Request money > Manual
2. Enter amount > Next

Expected Result:

The info icon in Referral banner is white in dark mode

Actual Result:

The info icon in Referral banner is black in dark mode

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

[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 @pecanoro (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[bernhardoj]

Proposal

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

The referral info icon color is black in dark mode.

What is the root cause of that problem?

This is a regression from #32692 where we migrate to SelectionList and creating our own referral component but we forget to pass a fill props to the icon like we do in BaseOptionsSelector.

App/src/components/OptionsSelector/BaseOptionsSelector.js

Lines 687 to 701 in 178a339

	<Text>
	{this.props.translate(`referralProgram.${this.props.referralContentType}.buttonText1`)}
	<Text
	color={this.props.theme.success}
	style={this.props.themeStyles.textStrong}
	>
	{this.props.translate(`referralProgram.${this.props.referralContentType}.buttonText2`)}
	</Text>
	</Text>
	<Icon
	src={Info}
	height={20}
	width={20}
	fill={this.props.theme.icon}
	/>

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

Pass the fill props as below

fill={theme.icon}

[shubham1206agra]

I believe @lukemorawski is working on this already.
cc @cristipaval

Slack link https://expensify.slack.com/archives/C01GTK53T8Q/p1705068053060889

[brunovjk]

I believe @lukemorawski is working on this already.

#34443 (comment)

[pecanoro]

@brunovjk I see, thank you for sharing it! The only issue is that since this is a deploy blocker, I am not sure if we want to get a fix CPed as soon as possible and I think that PR will take a bit. Do you have an ETA of when it will be ready? Since it's a small design issue, if it's going to get fixed soon, maybe we can wait, but if it's going to take a few days, maybe we want a PR just to fix this problem from @lukemorawski

[lukemorawski]

@pecanoro I can fix this in couple minutes and post a PR to this issue

[pecanoro]

@lukemorawski That would be great! Thank you!

[brunovjk]

@pecanoro My PR will be ready for review today, I have an urgent to complete the PR because there are other blockers that it solves.

But I understand the urgency, the main purpose of my PR is different anyway, #31779,
So perhaps it would be better if @lukemorawski deals with this 'icon style' in a new PR here and I revert the commit about it in my PR.
What do you think @lukemorawski?