[Due for payment 2025-04-16] [$250] Change buttonSuccessText to a lighter color

[dubielzyk-expensify]

Problem

Today our success buttons have a variable buttonSuccessText that points to colors.productLight100.

This makes the text a muddy because it's not quite bright enough against the green color:

Solution

Let's update the buttonSuccessText color to use #FCFBF9.

This'll make the text more legible and contrasting:

Note

I'm not a dev, so the above is my understanding of the change that needs to be done, but ultimately we care about making the change to the green success buttons text color.

cc @Expensify/design

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021905452878568319162
• Upwork Job ID: 1905452878568319162
• Last Price Increase: 2025-03-28
• Automatic offers:
• suneox | Reviewer | 106718303

Issue Owner

Current Issue Owner: @JmillsExpensify

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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

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

[bernhardoj]

Proposal

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

We want to change the button success text color to make it more contrast.

What is the root cause of that problem?

N/A

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

Update the buttonSuccessText style to use buttonSuccessText color.

App/src/styles/index.ts

Lines 801 to 803 in 2492a02

	buttonSuccessText: {
	color: theme.textLight,
	},

Before	After

Before text color (dark): #E7ECE9
Before text color (light): white

After text color: #FCFBF9 (productLight100)

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

N/A

[github-actions]

⚠️ 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).

[MuhammadUmairghufran]

Proposal

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

Currently, the success buttons in the application use the buttonSuccessText variable, which is set to colors.productLight100. This color does not provide enough contrast against the green background, making the text difficult to read.

What is the root cause of that problem?

The buttonSuccessText color (colors.productLight100) is too dim against the green success button background, leading to poor legibility. This occurs because the contrast between the text and background does not meet optimal accessibility standards.

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

To improve text readability, we should update the buttonSuccessText color to #FCFBF9. This color is lighter and provides better contrast against the green success button background, ensuring improved legibility and accessibility.

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

Visual Contrast Test: Ensure that the updated buttonSuccessText color meets accessibility contrast guidelines against the success button background.

Snapshot Tests: Verify that the UI reflects the new text color in various themes or modes.

Regression Test: Ensure that other button types (primary, secondary, danger, etc.) remain unaffected by this change.

Dark Mode Compatibility: Check that the new text color maintains sufficient contrast in dark mode, if applicable.

What alternative solutions did you explore? (Optional)

We considered other light shades for buttonSuccessText, but #FCFBF9 provides the best balance of contrast and visual aesthetics without altering the overall theme.

[melvin-bot]

📣 @MuhammadUmairghufran! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

1. Make sure you've read and understood the contributing guidelines.
2. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
3. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
4. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.
   
   Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>