[HOLD for payment 2024-03-07] Splash logo icon is black instead of green (prod only)

[isagoico]

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: v1.4.29-1
Reproducible in staging?: No
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @coleaeason
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1706050599347949

Action Performed:

1. Reload the app

Expected Result:

Splash icon should be green.

Actual Result:

Splash icon is black.

Workaround:

N/A

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

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01aac5767909c58b6b
• Upwork Job ID: 1749942692150059008
• Last Price Increase: 2024-01-23

[melvin-bot]

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

[melvin-bot]

Triggered auto assignment to @jliexpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[melvin-bot]

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

[jeremy-croff]

This is because of a regression from: #33863

Proposal

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

Page loading screen icon color is wrong

What is the root cause of that problem?

A recent code change removed the default svg fill color to improve to hover state of this reused icon in the settings menu list. It did not cross-reference it's usage in the loading splash screen.

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

Create a seperate SVG with the fill color, to be used for the splash screen.

Keep the existing SVG as is for an improved hover state fill color.

What alternative solutions did you explore? (Optional)

[aswin-s]

Proposal

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

Expensify icon shown on splash screen is black in production environment for web platforms

What is the root cause of that problem?

The icon file being used as splash icon is new-expensify.svg as per splashLogo configuration in webpack config.

App/web/index.html

Line 168 in 0efabc2

<%= htmlWebpackPlugin.options.splashLogo %>

App/config/webpack/webpack.common.js

Line 68 in 0efabc2

splashLogo: fs.readFileSync(path.resolve(__dirname, `../../assets/images/new-expensify${mapEnvToLogoSuffix(envFile)}.svg`), 'utf-8'),

App/config/webpack/webpack.common.js

Lines 27 to 32 in 0efabc2

	const envToLogoSuffixMap = {
	production: '',
	staging: '-stg',
	dev: '-dev',
	adhoc: '-adhoc',
	};

Other logos have fill color defined in their styles as st2{fill:#03d47c}. However for production logo fill color is missing in styles. That's why the icon looks black.

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

Add fill:#03d47c to svg style definition of new-expensify.svg.

.st0{fill-rule:evenodd;clip-rule:evenodd; fill:#03d47c}

So update new-expensify.svg with the updated style like below

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="Layer_1" x="0" y="0" version="1.1" viewBox="0 0 81 81" style="enable-background:new 0 0 81 81" xml:space="preserve"><style type="text/css">.st0{fill-rule:evenodd;clip-rule:evenodd; fill:#03d47c}</style><g><defs><rect id="SVGID_1_" width="80" height="80" x=".8"/></defs><clipPath id="SVGID_00000144338341264450383030000002729908262559559608_"><use xlink:href="#SVGID_1_" style="overflow:visible"/></clipPath><g style="clip-path:url(#SVGID_00000144338341264450383030000002729908262559559608_)"><path d="M54.9,28.2v-8.3H26.6v40.3h28.2v-8.3H37v-7.7h14.4v-8.5H37v-7.3H54.9z" class="st0"/><path d="M40.8,6.5C40.8,6.5,40.8,6.5,40.8,6.5c7.1,0,13.7,2.2,19.2,6c1.4,1,3.3,0.9,4.5-0.3l0,0 c1.3-1.3,1.3-3.5-0.3-4.7C57.5,2.8,49.5,0,40.8,0c-22.1,0-40,17.9-40,40c0,8.7,2.8,16.8,7.5,23.3c1.1,1.5,3.3,1.6,4.7,0.3l0,0 c1.2-1.2,1.3-3.1,0.3-4.5c-3.8-5.4-6-12-6-19.2C7.3,21.5,22.2,6.5,40.8,6.5C40.7,6.5,40.8,6.5,40.8,6.5L40.8,6.5z" class="st0"/><path d="M73.7,17.4c-1.1-1.6-3.4-1.7-4.7-0.3l0,0c-1.2,1.2-1.3,3-0.4,4.4c3.5,5.3,5.6,11.7,5.6,18.5 c0,6.8-2.1,13.4-5.8,18.8c-0.9,1.4-0.9,3.3,0.3,4.5l0,0c1.4,1.4,3.6,1.3,4.7-0.3c4.6-6.5,7.3-14.4,7.3-23 C80.8,31.5,78.2,23.8,73.7,17.4z" class="st0"/><path d="M40.8,73.5c-6.8,0-13.2-2.1-18.5-5.6c-1.4-0.9-3.3-0.8-4.4,0.4l0,0c-1.4,1.4-1.3,3.6,0.3,4.7 c6.4,4.4,14.2,7,22.6,7c8.4,0,16.4-2.7,23-7.3c1.6-1.1,1.7-3.3,0.3-4.7l0,0c-1.2-1.2-3.1-1.3-4.5-0.3 C54.2,71.3,47.7,73.5,40.8,73.5z" class="st0"/></g></g></svg>

Result

Before	After

What alternative solutions did you explore? (Optional)

None (edited)

[dukenv0307]

Proposal

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

Splash icon is black.

What is the root cause of that problem?

From this PR, we've removed the fill color of the new-expensify.svg icon in order to support Hover/non-hover color, leading to the black icon in splash screen because in splash screen we're using the icon as is.

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

1. In the <svg tag here, we should set fill="currentColor". This currentColor approach is also already used in the eReceiptIcon.

2. Then add color to the CSS style of the SVG here. We already use the same way of targeting the svg in the @media above that, just that here we will apply to all web screens so no need for @media.

.splash-logo > svg {
    color: #03d47c;
}

The #03d47c color is the color present before the PR that removed it was merged.

• When the icon is used inside Hovered components, that fill will be overridden with the hover color so no change there
• When the icon is used in Splash screen, it will take the color CSS style as currentColor and renders properly

With this solution there's no need for a duplicate svg just for the splash screen.

What alternative solutions did you explore? (Optional)

Instead of using SVG directly for the splash screen, we can use <img instead and set src to the svg path, and set the coloring style to the img.

[jliexpensify]

@abdulrahuman5196 can you confirm this?

This is because of a regression from: #33863

If so, this should be assigned to @thesahindia

[shawnborton]

cc @barttom for the possible regression above ^^