[Pay meow][$250] Make the app splash screen look the same on all platforms

[shawnborton]

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:
Reproducible in staging?:
Reproducible in production?:
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: @shawnborton
Slack conversation: Link

Action Performed:

1. Open up the app on mWeb, Web, or Desktop
2. Notice that the splash screen is dark
3. However on native mobile apps, notice that the splash screen is green

Expected Result:

1. Let's make the app splash screen green on all platforms
2. This means that we don't need to adjust anything about the mobile apps, but we need to modify web, mWeb, and desktop to use a green splash.

This is what the splash should look like:

Actual Result:

1. The app splash screen is not green on all platforms

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

cc @grgia - we talked about this one in Slack, sorry for the delay in creating the issue. Any details you want to add?

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0105d7830f9d724cc5
• Upwork Job ID: 1775314488272797696
• Last Price Increase: 2024-04-03
• Automatic offers:
• ShridharGoel | Contributor | 0

[melvin-bot]

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

[shawnborton]

cc @Expensify/design for vis too

[ShridharGoel]

Proposal

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

Change the splash background on web to match the mobile experience.

What is the root cause of that problem?

New change.

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

We need to change the colour in #splash defined in index.html to the below:

background-color: #03D47C;

splash-logo is defined in webpack.common.ts. We will need to add the updated assets there.

new HtmlWebpackPlugin({
    template: 'web/index.html',
    filename: 'index.html',
    splashLogo: fs.readFileSync(path.resolve(__dirname, `../../assets/images/new-expensify${mapEnvironmentToLogoSuffix(file)}.svg`), 'utf-8'),
    isWeb: platform === 'web',
    isProduction: file === '.env.production',
    isStaging: file === '.env.staging',
})

[melvin-bot]

⚠️ Could not update price automatically because there is no linked Upwork Job ID. The BZ team member will need to update the price manually in Upwork.

[melvin-bot]

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

[melvin-bot]

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

[mallenexpensify]

@grgia I made this External but then realized you self-assigned. Do you not want a contributor to help with this? Thx

[grgia]

Yeah let's make it external @mallenexpensify !

[melvin-bot]

Current assignee @rushatgabhane is eligible for the External assigner, not assigning anyone new.

[rushatgabhane]

@ShridharGoel on native, could you please make sure that the notification status bar is also theme dependent?

[ShridharGoel]

@rushatgabhane @drawable/bootsplash occupies the whole screen, so making the colour theme dependent should also make the status bar colour theme dependent.

Status bar colour is set as transparent: <item name="android:statusBarColor">@android:color/transparent</item>

[rushatgabhane]

oh awesome!

[rushatgabhane]

@ShridharGoel's proposal LGTM 🎀 👀 🎀

[melvin-bot]

Current assignee @grgia is eligible for the choreEngineerContributorManagement assigner, not assigning anyone new.

[melvin-bot]

📣 @ShridharGoel 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[ShridharGoel]

@shawnborton Can you confirm that #03D47C (light theme) and #061B09 (dark theme) are the correct colours?

[shawnborton]

Cool, I could definitely get down with green as the best option here.

[ShridharGoel]

Is it okay to add new logos by directly editing the colours in existing SVGs?

…

On Mon, Apr 8, 2024, 8:05 PM Shawn Borton ***@***.***> wrote: Cool, I could definitely get down with green as the best option here. — Reply to this email directly, view it on GitHub <#39369 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AIPLJHD4ERQ6TWD2ZFGEMO3Y4KTLJAVCNFSM6AAAAABFR3HWJWVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDANBSHEZDCMJXG4> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[shawnborton]

Probably? I guess we need to decide if we want to keep the staging and dev subscript text on these during start up... mobile currently does not have them, but all other platforms do. So if that's the case, the design team can help create new assets with the correct colors there given that the green we use for "STG" is quite similar to the green we'd be using for the background.

[ShridharGoel]

Makes sense, so how can we decide whether "DEV" and "STG" are needed?

[ShridharGoel]

Also, DEV and STG are for internal use and not for customers, so I think it should be fine even if they match a little to the background.

[shawnborton]

Makes sense, so how can we decide whether "DEV" and "STG" are needed?

We currently do this on web/mWeb.

[ShridharGoel]

We currently do this on web/mWeb.

Yeah, so I was just asking about how can we decide whether to keep them or not since you mentioned the below:

I guess we need to decide if we want to keep the staging and dev subscript text on these during start up

[shawnborton]

Let's get confirmation from the entire @Expensify/design that we want to move forward with a green BG, and if so, I'll update this issue so we can get proposals based on our new solution. From here, the design team can provide the correct assets needed.

[ShridharGoel]

Proposal

Updated to make the web splash theme same as mobile.

[dubielzyk-expensify]

Thanks Shawn. I'm okay with this as well. Sounds like the best compromise.

[shawnborton]

Okay I've updated the title and description of the bug.

The replacement assets to use are here: SplashAssets.zip

[ShridharGoel]

Thanks, will open a PR soon.

[rushatgabhane]

PR on production last week - #39997 (comment)

@mallenexpensify please attach payment summary when you can, thank you : )

[rushatgabhane]

Manual request here - https://staging.new.expensify.com/r/7309992663381871

[JmillsExpensify]

@mallenexpensify can I get a payment summary?

[mallenexpensify]

PR hit production on 4/22.

Contributor: @ShridharGoel paid $250 via Upwork
Contributor+: @rushatgabhane due $250 via NewDot

@ShridharGoel can you please accept the job and reply here once you have?
https://www.upwork.com/jobs/~0105d7830f9d724cc5

[JmillsExpensify]

$250 approved for @rushatgabhane

[ShridharGoel]

@mallenexpensify @JmillsExpensify Accepted it

[mallenexpensify]

@ShridharGoel paid, main payment post updated above

Thx