Workspace - The price $9 in upgrade page is not legible 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: 9.0.5-3
Reproducible in staging?: Y
Reproducible in production?: N
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Issue reported by: Applause - Internal Team

Issue found when executing PR #43822

Action Performed:

Precondition:

• App theme is light

1. Go to staging.new.expensify.com
2. Go to Workspace settings.
3. Add upgrade/report-fields to the url (eg, https://staging.new.expensify.com/settings/workspaces/31DF97D37125FBD6/upgrade/report-fields
   )

Expected Result:

The content will be legible in light mode

Actual Result:

The price $9 is not legible in light 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

[melvin-bot]

Triggered auto assignment to @Gonals (DeployBlockerCash), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[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.

[lanitochka17]

@Gonals FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[lanitochka17]

We think that this bug might be related to #wave-collect - Release 2

[etCoderDysto]

Proposal

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

The price $9 in upgrade page is not legible in light mode

What is the root cause of that problem?

We are passing styles.textWhite instead of styles.themeTextColor here

App/src/pages/workspace/upgrade/UpgradeIntro.tsx

Line 50 in 51dd814

<Text style={[styles.textWhite, styles.textBold]}>{translate(`workspace.upgrade.${feature.id}.pricing.amount`)}</Text>

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

Change styles.textWhite to styles.themeTextColor below

App/src/pages/workspace/upgrade/UpgradeIntro.tsx

Line 50 in 51dd814

<Text style={[styles.textWhite, styles.textBold]}>{translate(`workspace.upgrade.${feature.id}.pricing.amount`)}</Text>

What alternative solutions did you explore? (Optional)

[ShridharGoel]

Proposal

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

Workspace - The price $9 in upgrade page is not legible in light mode.

What is the root cause of that problem?

Text colour is fixed to white in the below line, which makes it not legible in light mode.

App/src/pages/workspace/upgrade/UpgradeIntro.tsx

Line 50 in e0ccba5

<Text style={[styles.textWhite, styles.textBold]}>{translate(`workspace.upgrade.${feature.id}.pricing.amount`)}</Text>

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

styles.textWhite needs to be removed.

<Text style={[styles.textNormal, styles.textSupporting]}>
    {translate(`workspace.upgrade.${feature.id}.pricing.onlyAvailableOnPlan`)}
    <Text style={[styles.textBold]}>{translate(`workspace.upgrade.${feature.id}.pricing.amount`)}</Text>
    {translate(`workspace.upgrade.${feature.id}.pricing.perActiveMember`)}
</Text>

[Julesssss]

This was a side effect of this PR.

[Julesssss]

I realise this shouldn't be a blocker as the feature is locked, but I had already started...

PR in review

[Julesssss]

Merged, no need to CP

[ShridharGoel]

@Julesssss Should this be closed?