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

isagoico · 2024-01-23T23:50:22Z

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

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?

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 · 2024-01-23T23:50:26Z

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

melvin-bot · 2024-01-23T23:50:27Z

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

melvin-bot · 2024-01-23T23:50:31Z

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

jeremy-croff · 2024-01-24T00:25:35Z

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 · 2024-01-24T00:26:14Z

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 · 2024-01-24T04:55:39Z

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?

In the <svg tag here, we should set fill="currentColor". This currentColor approach is also already used in the eReceiptIcon.
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 · 2024-01-24T05:59:19Z

@abdulrahuman5196 can you confirm this?

This is because of a regression from: #33863

If so, this should be assigned to @thesahindia

shawnborton · 2024-01-24T08:44:01Z

cc @barttom for the possible regression above ^^

barttom · 2024-01-24T09:03:25Z

@shawnborton Yup, I think this is regression. I didn't know that this file is used anywhere instead of an app icon.
I've removed the defined color because for icon we need to have a neutral color to provide different states e.g. for hover.
I haven't found any possibility to define color for the splash logo, so I'll create a separate file dedicated to a splash logo.
I'll create PR today

shawnborton · 2024-01-24T09:13:21Z

Wonderful, thanks!

dukenv0307 · 2024-01-24T09:36:38Z

I haven't found any possibility to define color for the splash logo, so I'll create a separate file dedicated to a splash logo.

@barttom I don't think we need a separate file. Please take a look at my proposal.

possibility to define color for the splash logo

@barttom It addresses your concern here.

Thank you!

melvin-bot · 2024-01-25T22:00:56Z

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

thesahindia · 2024-01-25T22:36:42Z

@dangrous, the PR is ready. It just need your eyes.

jliexpensify · 2024-02-06T03:42:36Z

Hmm sorry, I am not sure I'm understanding here - wasn't this a regression, as correctly identified by @jeremy-croff ? If so, then the GH issue goes to the Contributor and C+ who worked on the original PR which caused the regression. So why is @dukenv0307 proposing compensation?

jliexpensify · 2024-02-06T03:43:31Z

Said another way - it's great that your proposal is the fix @dukenv0307, but in the case of a regression, it's on the original PR owners to fix it, right? Which is @barttom

dangrous · 2024-02-06T20:30:40Z

ha so this one is particularly confusing - I think these are the discussions:

@dukenv0307 proposed a solution for this bug, however the issue was determined to be a regression, so the original authors took it on. The solution they pushed is similar. This solution ended up being reverted as well, so it's moot, but even if it was, I don't think we typically offer compensation (but we appreciate the effort!)
@jeremy-croff proposed a solution for this bug, however the issue was determined to be a regression, so the original authors took it on. The solution they pushed was reverted, and the new solution is similar to the one @jeremy-croff proposed. Again, I don't think we typically offer compensation for this case, since it's covered by the original authors.

However, it brings up an interesting more general point - think of the following scenario:

Issue exists
Contributor A proposes Solution A
Contributor B proposes Solution B
We go with Contributor A, and merge Solution A
Solution A causes a regression and is reverted
Contributor A looks into the regression and determines that Solution B would be a better fix and implements it.
So, in the end, we're using Contributor B's proposal but Contributor A was the only one involved.

Important: I don't think this is likely to happen very often, and I will stress again, since this issue itself was a regression as well, it doesn't apply here either. But might be interesting to discuss at some point. All in all, no action required here I don't think. Just a thought experiment.

jeremy-croff · 2024-02-06T20:41:08Z

ha so this one is particularly confusing - I think these are the discussions:

@dukenv0307 proposed a solution for this bug, however the issue was determined to be a regression, so the original authors took it on. The solution they pushed is similar. This solution ended up being reverted as well, so it's moot, but even if it was, I don't think we typically offer compensation (but we appreciate the effort!)

@jeremy-croff proposed a solution for this bug, however the issue was determined to be a regression, so the original authors took it on. The solution they pushed was reverted, and the new solution is similar to the one @jeremy-croff proposed. Again, I don't think we typically offer compensation for this case, since it's covered by the original authors.

However, it brings up an interesting more general point - think of the following scenario:

Issue exists

Contributor A proposes Solution A

Contributor B proposes Solution B

We go with Contributor A, and merge Solution A

Solution A causes a regression and is reverted

Contributor A looks into the regression and determines that Solution B would be a better fix and implements it.

So, in the end, we're using Contributor B's proposal but Contributor A was the only one involved.

Important: I don't think this is likely to happen very often, and I will stress again, since this issue itself was a regression as well, it doesn't apply here either. But might be interesting to discuss at some point. All in all, no action required here I don't think. Just a thought experiment.

I agree and thanks for reviewing the situation. I also was the contributor to identify it as a regression.
It's a tiny bit painful as a new contributor because this has happened to me twice this week and I have not gotten any proposals accepted yet. I will keep on trying though.
This one was unfortunately more verbose copy paste of my logic:
#35663 (comment) and PR https://github.com/Expensify/App/pull/35872/files#diff-78609be64f9c89b1986ed92266ac4cfd0ad05a5751bee8678d61a1e61822ac39R102
Which is not even what the accepted proposal proposed! 🥲

jliexpensify · 2024-02-07T01:55:27Z

Thanks for summarising @dangrous - and yes, this is a little complex.

So, in the end, we're using Contributor B's proposal but Contributor A was the only one involved.

Honestly, if I had to make a judgment, I would give part payment (maybe like $250) to @jeremy-croff for:

Identifying the regression (note: we wouldn't pay for this)
Providing the actual working solution when no one else could

As 2 regressions basically halves the payment of the C and C+ down to $125 each.

melvin-bot · 2024-02-07T15:05:02Z

Payment Summary

Upwork Job

Contributor: @barttom is from an agency-contributor and not due payment
Reviewer: @thesahindia owed $500 via NewDot

BugZero Checklist (@jliexpensify)

I have verified the correct assignees and roles are listed above and updated the neccesary manual offers
I have verified that there are no duplicate or incorrect contracts on Upwork for this job (https://www.upwork.com/ab/applicants/1749942692150059008/hired)
I have paid out the Upwork contracts or cancelled the ones that are incorrect
I have verified the payment summary above is correct

dangrous · 2024-02-07T18:12:15Z

That makes sense to me @jliexpensify!

So to update/clarify melvin's comment up there ^ - we will not be handling payment fo either the contributor or reviewer on this issue, as it's a regression (it will be handled on the original issue). We will be giving partial payment to @jeremy-croff for their help and solutions.

But no payment should happen yet since the fix of the fix of the fix is still in progress, despite it now being 7 days after the merge of the PR that supposedly fixed this issue but was reverted.

Is that all correct?

jliexpensify · 2024-02-07T23:13:03Z

Yep, I think that's fair and thanks for considering my approach @dangrous!

So in summary - for this specific GH:

Contributor: @jeremy-croff $250 (context here)

Upworks Job

jeremy-croff · 2024-02-13T07:11:35Z

Yep, I think that's fair and thanks for considering my approach @dangrous!

So in summary - for this specific GH:

Contributor: @jeremy-croff $250 (context here)

Upworks Job

I applied to it, is there anything else I need to do to get it accepted?

jliexpensify · 2024-02-13T22:54:30Z

Huh, is that Job loading for you @jeremy-croff ? I'm getting timeout errors when trying to view it

jeremy-croff · 2024-02-13T22:56:46Z

Huh, is that Job loading for you @jeremy-croff ? I'm getting timeout errors when trying to view it

Yeah it is

jliexpensify · 2024-02-13T23:12:10Z

Weird, must have been temporary! Sent you an offer, just got to wait until the fix hits prod - we pay after 7 days.

jliexpensify · 2024-02-16T00:17:50Z

Not deployed yet

dangrous · 2024-02-16T15:32:23Z

fix number 3 has been merged! not yet on staging/prod but we should be able to close this out shortly

jliexpensify · 2024-02-21T03:55:05Z

Deployed to staging yesterday

jliexpensify · 2024-02-28T03:38:48Z

Deployed to prod, adjusted payment date

melvin-bot · 2024-03-05T15:02:23Z

Payment Summary

Upwork Job

Contributor: @barttom is from an agency-contributor and not due payment
Reviewer: @thesahindia owed $500 via NewDot

BugZero Checklist (@jliexpensify)

I have verified the correct assignees and roles are listed above and updated the neccesary manual offers
I have verified that there are no duplicate or incorrect contracts on Upwork for this job (https://www.upwork.com/ab/applicants/1749942692150059008/hired)
I have paid out the Upwork contracts or cancelled the ones that are incorrect
I have verified the payment summary above is correct

melvin-bot · 2024-03-05T19:02:55Z

Payment Summary

Upwork Job

Contributor: @barttom is from an agency-contributor and not due payment
Reviewer: @thesahindia owed $500 via NewDot

BugZero Checklist (@jliexpensify)

I have verified the correct assignees and roles are listed above and updated the neccesary manual offers
I have verified that there are no duplicate or incorrect contracts on Upwork for this job (https://www.upwork.com/ab/applicants/1749942692150059008/hired)
I have paid out the Upwork contracts or cancelled the ones that are incorrect
I have verified the payment summary above is correct

jliexpensify · 2024-03-05T22:05:16Z

The above summary is not correct, here's the correct one to be paid.

melvin-bot · 2024-03-07T19:10:09Z

Payment Summary

Upwork Job

Contributor: @barttom is from an agency-contributor and not due payment
Reviewer: @thesahindia owed $500 via NewDot

BugZero Checklist (@jliexpensify)

I have verified the correct assignees and roles are listed above and updated the neccesary manual offers
I have verified that there are no duplicate or incorrect contracts on Upwork for this job (https://www.upwork.com/ab/applicants/1749942692150059008/hired)
I have paid out the Upwork contracts or cancelled the ones that are incorrect
I have verified the payment summary above is correct

jliexpensify · 2024-03-08T00:04:58Z

Paid, job closed!

isagoico added External Added to denote the issue can be worked on by a contributor Daily KSv2 Bug Something is broken. Auto assigns a BugZero manager. labels Jan 23, 2024

melvin-bot bot changed the title ~~Splash logo icon is black instead of green (prod only)~~ [$500] Splash logo icon is black instead of green (prod only) Jan 23, 2024

melvin-bot bot assigned jliexpensify Jan 23, 2024

melvin-bot bot added the Help Wanted Apply this label when an issue is open to proposals by contributors label Jan 23, 2024

melvin-bot bot assigned abdulrahuman5196 Jan 23, 2024

barttom mentioned this issue Jan 24, 2024

fix: changed color on splash screen #35097

Merged

54 tasks

melvin-bot bot added Reviewing Has a PR in review Weekly KSv2 and removed Daily KSv2 labels Jan 24, 2024

melvin-bot bot assigned dangrous Jan 25, 2024

dangrous assigned barttom and thesahindia and unassigned abdulrahuman5196 Jan 26, 2024

melvin-bot bot removed Help Wanted Apply this label when an issue is open to proposals by contributors labels Jan 26, 2024

melvin-bot bot added Daily KSv2 and removed Weekly KSv2 labels Feb 7, 2024

jliexpensify changed the title ~~[HOLD for payment 2024-02-07] [$500] Splash logo icon is black instead of green (prod only)~~ [HOLD for payment 2024-02-??] [$500] Splash logo icon is black instead of green (prod only) Feb 7, 2024

jliexpensify changed the title ~~[HOLD for payment 2024-02-??] [$500] Splash logo icon is black instead of green (prod only)~~ [HOLD for payment 2024-02-??] Splash logo icon is black instead of green (prod only) Feb 7, 2024

rlinoz mentioned this issue Feb 26, 2024

Android - Go to Expensify Classic icon is black instead of green #35468

Closed

6 tasks

jliexpensify changed the title ~~[HOLD for payment 2024-02-??] Splash logo icon is black instead of green (prod only)~~ [HOLD for payment 2024-03-05] Splash logo icon is black instead of green (prod only) Feb 28, 2024

dukenv0307 mentioned this issue Feb 28, 2024

[$500] Hold Request - "Hold/unhold request" text is not translated to Spanish #36836

Closed

6 tasks

jliexpensify changed the title ~~[HOLD for payment 2024-03-05] Splash logo icon is black instead of green (prod only)~~ [HOLD for payment 2024-03-07] Splash logo icon is black instead of green (prod only) Mar 5, 2024

jliexpensify closed this as completed Mar 8, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

isagoico commented Jan 23, 2024 •

edited by melvin-bot bot

Loading

melvin-bot bot commented Jan 23, 2024

melvin-bot bot commented Jan 23, 2024

melvin-bot bot commented Jan 23, 2024

jeremy-croff commented Jan 24, 2024 •

edited

Loading

aswin-s commented Jan 24, 2024 •

edited

Loading

dukenv0307 commented Jan 24, 2024 •

edited

Loading

jliexpensify commented Jan 24, 2024

shawnborton commented Jan 24, 2024

barttom commented Jan 24, 2024

shawnborton commented Jan 24, 2024

dukenv0307 commented Jan 24, 2024

melvin-bot bot commented Jan 25, 2024

thesahindia commented Jan 25, 2024

jliexpensify commented Feb 6, 2024

jliexpensify commented Feb 6, 2024

dangrous commented Feb 6, 2024

jeremy-croff commented Feb 6, 2024 •

edited

Loading

jliexpensify commented Feb 7, 2024 •

edited

Loading

melvin-bot bot commented Feb 7, 2024

dangrous commented Feb 7, 2024

jliexpensify commented Feb 7, 2024

jeremy-croff commented Feb 13, 2024

jliexpensify commented Feb 13, 2024

jeremy-croff commented Feb 13, 2024

jliexpensify commented Feb 13, 2024

jliexpensify commented Feb 16, 2024

dangrous commented Feb 16, 2024

jliexpensify commented Feb 21, 2024

jliexpensify commented Feb 28, 2024 •

edited

Loading

melvin-bot bot commented Mar 5, 2024

melvin-bot bot commented Mar 5, 2024

jliexpensify commented Mar 5, 2024

melvin-bot bot commented Mar 7, 2024

jliexpensify commented Mar 8, 2024

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

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

Comments

isagoico commented Jan 23, 2024 • edited by melvin-bot bot Loading

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

melvin-bot bot commented Jan 23, 2024

melvin-bot bot commented Jan 23, 2024

melvin-bot bot commented Jan 23, 2024

jeremy-croff commented Jan 24, 2024 • edited Loading

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

aswin-s commented Jan 24, 2024 • edited Loading

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

dukenv0307 commented Jan 24, 2024 • edited Loading

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

jliexpensify commented Jan 24, 2024

shawnborton commented Jan 24, 2024

barttom commented Jan 24, 2024

shawnborton commented Jan 24, 2024

dukenv0307 commented Jan 24, 2024

melvin-bot bot commented Jan 25, 2024

thesahindia commented Jan 25, 2024

jliexpensify commented Feb 6, 2024

jliexpensify commented Feb 6, 2024

dangrous commented Feb 6, 2024

jeremy-croff commented Feb 6, 2024 • edited Loading

jliexpensify commented Feb 7, 2024 • edited Loading

melvin-bot bot commented Feb 7, 2024

Payment Summary

BugZero Checklist (@jliexpensify)

dangrous commented Feb 7, 2024

jliexpensify commented Feb 7, 2024

jeremy-croff commented Feb 13, 2024

jliexpensify commented Feb 13, 2024

jeremy-croff commented Feb 13, 2024

jliexpensify commented Feb 13, 2024

jliexpensify commented Feb 16, 2024

dangrous commented Feb 16, 2024

jliexpensify commented Feb 21, 2024

jliexpensify commented Feb 28, 2024 • edited Loading

melvin-bot bot commented Mar 5, 2024

Payment Summary

BugZero Checklist (@jliexpensify)

melvin-bot bot commented Mar 5, 2024

Payment Summary

BugZero Checklist (@jliexpensify)

jliexpensify commented Mar 5, 2024

melvin-bot bot commented Mar 7, 2024

Payment Summary

BugZero Checklist (@jliexpensify)

jliexpensify commented Mar 8, 2024

isagoico commented Jan 23, 2024 •

edited by melvin-bot bot

Loading

jeremy-croff commented Jan 24, 2024 •

edited

Loading

aswin-s commented Jan 24, 2024 •

edited

Loading

dukenv0307 commented Jan 24, 2024 •

edited

Loading

jeremy-croff commented Feb 6, 2024 •

edited

Loading

jliexpensify commented Feb 7, 2024 •

edited

Loading

jliexpensify commented Feb 28, 2024 •

edited

Loading