[Due for payment 2025-04-10] [$250] Incorrect Icon Color in Flight Details Option Row

[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.1.17-0
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?:
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: @dubielzyk-expensify
Slack conversation (hyperlinked to channel name): #Expensify Bugs

Action Performed:

Prerequisite: The user have booked flight trip.

1. Navigate to Workspace where user have the trip report
2. Click View Trip
3. Click Trip Summary and observe the flight details in RHP

Expected Result:

The Icon color for the Modify trip and Trip support external link should use the grey color

Actual Result:

Icon color are in green

Workaround:

Unknown

Platforms:

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

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021904285720528943779
• Upwork Job ID: 1904285720528943779
• Last Price Increase: 2025-03-24
• Automatic offers:
• allgandalf | Contributor | 106659226

Issue Owner

Current Issue Owner: @lschurr

[melvin-bot]

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

[m-natarajan]

Proposal by @allgandalf

Proposal

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

Flight details option row icons are green. They should be icon color

What is the root cause of that problem?

we use theme.iconSuccessFill which is causing this bug:

App/src/pages/Travel/TripDetailsPage.tsx

Line 110 in 4750e38

iconFill={theme.iconSuccessFill}

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

We need to update it to the same colour which is used at other places. i.e. remove the iconFill, let it take the default value like other places. else we can explicitly set it to take the icon colour

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

N/A this is a simple UI bug, alternatively we can simply mock onyx data then render the screen and verify that the icon colour is present for the menu item

What alternative solutions did you explore? (Optional)

N/A

[melvin-bot]

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

[melvin-bot]

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

[neonbhai]

Proposal

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

Incorrect Icon Color in Flight Details Option Row

What is the root cause of that problem?

This is caused by the incorrect color passed here:

App/src/pages/Travel/TripDetailsPage.tsx

Line 110 in 351ac63

iconFill={theme.iconSuccessFill}

and here:

App/src/pages/Travel/TripDetailsPage.tsx

Line 126 in 351ac63

iconFill={theme.iconSuccessFill}

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

We will omit the iconFill prop here and here as this would allow the MenuItem styles defined here to take over, which would give the correct styles consistent with other places in the App

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

N/A simple UI bug, we will not need a test here

[alitoshmatov]

Pretty straightforward fix, we can with @allgandalf 's proposal

C+ reviewed 🎀 👀 🎀

[melvin-bot]

Triggered auto assignment to @NikkiWines, see https://stackoverflow.com/c/expensify/questions/7972 for more details.