Invert bootsplash colors + fade splash screen on web by zoontek · Pull Request #16932 · Expensify/App

zoontek · 2023-04-04T18:25:54Z

Details

Following this discussion with @shawnborton, he thought it could be great to invert splash screen colors, in orders to see the app icon "grow" into the splash screen.

This PR provides that + as a bonus, it adds fading on the web splash screen (for consistency with native) - I can revert the commit if this is not wanted.

Fixed Issues

#16863 (comment)

Tests

⚠️ Checkout Add BootSplash support for Android 12 #16863 branch, then merge this one in it.
Starts the app on Android, iOS or web
Verify that the splash screen colors are inverted

Offline tests

QA Steps

Web

Open the App
Verify that the splash screen had a dark green background, light green logo, and fades away.

iOS and Android

Open the App
Verify that the splash screen had a light green background, dark green logo, and fades away.

No QA for other platforms.

PR Author Checklist

Screenshots/Videos

Web

Screen.Recording.2023-04-04.at.20.53.13.mov

iOS

Android

android.mp4

MelvinBot · 2023-04-04T18:26:34Z

@neil-marcellini Please copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button]

shawnborton · 2023-04-04T18:41:33Z

Is it possible to only do this on native devices? For web, I feel like the green is pretty distracting. But for mobile, it's nice because it looks like the app icon morphs into the splash screen.

zoontek · 2023-04-04T18:55:04Z

@shawnborton I rolled back the change, but kept the fade.

Screen.Recording.2023-04-04.at.20.53.13.mov

shawnborton · 2023-04-04T18:55:42Z

Nice, I think that feels pretty good to me

neil-marcellini · 2023-04-05T16:48:55Z

Tagging in a C+ for some extra review help https://expensify.slack.com/archives/C02NK2DQWUX/p1680713244754089?thread_ts=1680713226.483109&cid=C02NK2DQWUX

neil-marcellini

@zoontek it looks like you included the changes from #16863 here correct? I think it would be much more simple to review if you remove those changes and instruct us reviewers to check out the branch from 16863, and then merge these changes into it for testing.

0xmiroslav · 2023-04-05T17:18:30Z

This is on hold for review until #16863 is merged, right?

zoontek · 2023-04-06T08:08:42Z

@neil-marcellini @0xmiroslav Yes. I can dissociate both PR if you prefer, remove the changes from #16863 from this one.

I made that because, as this PR is about the transition between the app icon and the splash screen, you cannot really experience the effect without the other PR (which solve the Android 12 double splash screen issue)

zoontek · 2023-04-06T08:27:53Z

@neil-marcellini @0xmiroslav Done! I updated the instructions.

0xmiroslav · 2023-04-06T09:03:54Z

If this one is going to be merged sooner than #16863, I think no need to test based on that branch. If this will be merged later, Let's still put this on hold.
Which option?

zoontek · 2023-04-06T09:36:29Z

@0xmiroslav You cannot merge this one before #16863 since the image format change for Android 12: they must include an additional padding:

If you want to merge this one before, I will have to update this PR to re-generate assets in this PR to not include the additional padding, wait for it to be merged then update the other PR.

So it's easier to keep this one on hold. The other PR is not that huge, I think the review will probably be achieved soon.

0xmiroslav · 2023-04-06T12:01:16Z

ok still holding this seems best way to go

zoontek · 2023-04-06T14:18:42Z

@0xmiroslav @neil-marcellini #16863 has been merged, I rebased this one.

neil-marcellini

Much easier to review now, thank you! Looks good and tests well.

neil-marcellini · 2023-04-06T17:06:30Z

@0xmiroslav all you!

0xmiroslav · 2023-04-07T22:39:22Z

@zoontek please add iOS splash screenshot as well

0xmiroslav · 2023-04-07T22:45:28Z

Native apps show black logo on green background
But web/desktop show green logo on black background (current version)

So inconsistent between platforms.
Is this approved design? cc: @shawnborton

zoontek · 2023-04-08T09:14:29Z

@0xmiroslav Yes, here: #16932 (comment)

I opened the PR with light splash screen on web, but had to rollback this part.

EDIT: I added an iOS screenshot.

0xmiroslav · 2023-04-08T10:25:00Z

@0xmiroslav Yes, here: #16932 (comment)

I opened the PR with light splash screen on web, but had to rollback this part.

Ah sorry, I should have checked discussion

0xmiroslav · 2023-04-09T11:45:49Z

This PR looks good, but I have some concerns in android from #16863:
(NAB since they're introduced by another PR)

splash logo change (1s-2s)
loading indicator before login page (8s-10s)

android12.mp4

status bar and navigation bar style change (24s-26s)

android8.mov

splash background with logo is applied to all activities including dev menu

zoontek · 2023-04-09T19:13:15Z

@0xmiroslav Could you try uninstalling the dev app, restart your phone and reinstall the same app (the dev one?)

I updated the navigationBar color to match the rest. It swithes from dark content to light content once the app booted (the system used dark content but your app uses light, you can tweak that as you want in themes files).

I also fixed 4. Android documentation mention that both application theme or main activity theme are fine, which is the mistake here (see step 3 here)

screen-20230409-205934.mp4

screen-20230409-211413.mp4

zoontek · 2023-04-10T18:53:35Z

@neil-marcellini @0xmiroslav I pushed the missing AppTheme on application. Sorry, I forgot to put it back.

0xmiroslav · 2023-04-10T18:54:31Z

so it seems build is already in process. may need to re-trigger

neil-marcellini · 2023-04-11T16:09:31Z

Ok I'll try to trigger it again. @0xmiroslav please let me know once you've approved.

0xmiroslav · 2023-04-12T11:03:18Z

BUG: iOS splash logo fade first time. tested on iPhone 14 Pro Max (simulator)

splash.mp4

0xmiroslav · 2023-04-12T11:04:58Z

@zoontek please pull from main. RN version upgraded now.

zoontek · 2023-04-12T12:13:15Z

@0xmiroslav Is the first appearing logo the color of the old one? Might be the good old one https://developer.apple.com/forums/thread/68244

Because on iOS no code changed (in both PRs), only assets.

0xmiroslav · 2023-04-12T12:15:31Z

@0xmiroslav Is the first appearing logo the color of the old one? Might be the good old one https://developer.apple.com/forums/thread/68244

Because on iOS no code changed (in both PRs), only assets.

yeah, not a blocker. happening on main

0xmiroslav · 2023-04-12T12:16:36Z

not sure why not sharing build links even after Ready To Build triggered twice

0xmiroslav · 2023-04-12T13:01:43Z

Reviewer Checklist

I have verified the author checklist is complete (all boxes are checked off).
I verified the correct issue is linked in the ### Fixed Issues section above
I verified testing steps are clear and they cover the changes made in this PR
- I verified the steps for local testing are in the Tests section
- I verified the steps for Staging and/or Production testing are in the QA steps section
- I verified the steps cover any possible failure scenarios (i.e. verify an input displays the correct error message if the entered data is not correct)
- I turned off my network connection and tested it while offline to ensure it matches the expected behavior (i.e. verify the default avatar icon is displayed if app is offline)
I checked that screenshots or videos are included for tests on all platforms
I included screenshots or videos for tests on all platforms
I verified tests pass on all platforms & I tested again on:
- Android / native
- Android / Chrome
- iOS / native
- iOS / Safari
- MacOS / Chrome / Safari
- MacOS / Desktop
If there are any errors in the console that are unrelated to this PR, I either fixed them (preferred) or linked to where I reported them in Slack
I verified proper code patterns were followed (see Reviewing the code)
- I verified that any callback methods that were added or modified are named for what the method does and never what callback they handle (i.e. toggleReport and not onIconClick).
- I verified that comments were added to code that is not self explanatory
- I verified that any new or modified comments were clear, correct English, and explained "why" the code was doing something instead of only explaining "what" the code was doing.
- I verified any copy / text shown in the product is localized by adding it to src/languages/* files and using the translation method
- I verified all numbers, amounts, dates and phone numbers shown in the product are using the localization methods
- I verified any copy / text that was added to the app is correct English and approved by marketing by adding the Waiting for Copy label for a copy review on the original GH to get the correct copy.
- I verified proper file naming conventions were followed for any new files or renamed files. All non-platform specific files are named after what they export and are not named "index.js". All platform-specific files are named for the platform the code supports as outlined in the README.
- I verified the JSDocs style guidelines (in STYLE.md) were followed
If a new code pattern is added I verified it was agreed to be used by multiple Expensify engineers
I verified that this PR follows the guidelines as stated in the Review Guidelines
I verified other components that can be impacted by these changes have been tested, and I retested again (i.e. if the PR modifies a shared library or component like Avatar, I verified the components using Avatar have been tested & I retested again)
I verified all code is DRY (the PR doesn't include any logic written more than once, with the exception of tests)
I verified any variables that can be defined as constants (ie. in CONST.js or at the top of the file that uses the constant) are defined as such
If a new component is created I verified that:
- A similar component doesn't exist in the codebase
- All props are defined accurately and each prop has a /** comment above it */
- The file is named correctly
- The component has a clear name that is non-ambiguous and the purpose of the component can be inferred from the name alone
- The only data being stored in the state is data necessary for rendering and nothing else
- For Class Components, any internal methods passed to components event handlers are bound to this properly so there are no scoping issues (i.e. for onClick={this.submit} the method this.submit should be bound to this in the constructor)
- Any internal methods bound to this are necessary to be bound (i.e. avoid this.submit = this.submit.bind(this); if this.submit is never passed to a component event handler like onClick)
- All JSX used for rendering exists in the render method
- The component has the minimum amount of code necessary for its purpose, and it is broken down into smaller components in order to separate concerns and functions
If any new file was added I verified that:
- The file has a description of what it does and/or why is needed at the top of the file if the code is not self explanatory
If a new CSS style is added I verified that:
- A similar style doesn't already exist
- The style can't be created with an existing StyleUtils function (i.e. StyleUtils.getBackgroundAndBorderStyle(themeColors.componentBG)
If the PR modifies code that runs when editing or sending messages, I tested and verified there is no unexpected behavior for all supported markdown - URLs, single line code, code blocks, quotes, headings, bold, strikethrough, and italic.
If the PR modifies a generic component, I tested and verified that those changes do not break usages of that component in the rest of the App (i.e. if a shared library or component like Avatar is modified, I verified that Avatar is working as expected in all cases)
If the PR modifies a component related to any of the existing Storybook stories, I tested and verified all stories for that component are still working as expected.
If a new page is added, I verified it's using the ScrollView component to make it scrollable when more elements are added to the page.
If the main branch was merged into this PR after a review, I tested again and verified the outcome was still expected according to the Test steps.
I have checked off every checkbox in the PR reviewer checklist, including those that don't apply to this PR.

Screenshots/Videos

Web

web.mov

Mobile Web - Chrome

Mobile Web - Safari

Desktop

iOS

ios.mp4

Android

android.mp4

0xmiroslav

Looks good and tests well but only one issue already reported.
I confirmed that splash logo changing issue still happens on fresh android physical device. I tested on Samsung Galaxy S10. So this is not related to cache.
But this was introduced in another PR so not a blocker for this PR. If needed, we can handle that in a new separate issue.
@neil-marcellini all yours

android.mp4

neil-marcellini

I think this is good to go. Thanks.

neil-marcellini · 2023-04-12T17:35:53Z

@zoontek I also added some QA steps for you. Merging!

MelvinBot · 2023-04-12T17:36:07Z

Congrats, that’s your 5th PR merged! 🎉 Do you know about the ContributorPlus role? It’s an opportunity to earn more in the Expensify Open Source community. Keep up the great work - thanks!

OSBotify · 2023-04-12T17:44:02Z

✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release.

OSBotify · 2023-04-13T03:43:42Z

🚀 Deployed to staging by https://github.com/neil-marcellini in version: 1.3.0-0 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

OSBotify · 2023-04-17T22:58:08Z

🚀 Deployed to production by https://github.com/mountiny in version: 1.3.0-2 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

0xmiroslav · 2023-04-18T04:54:30Z

@neil-marcellini can you please create new GH for tracking payment?

neil-marcellini · 2023-04-18T16:28:10Z

Sure thing, here's the payment issue.

0xmiroslav · 2023-04-18T16:28:34Z

Thanks

zoontek requested a review from a team as a code owner April 4, 2023 18:25

melvin-bot Bot requested review from neil-marcellini and removed request for a team April 4, 2023 18:26

zoontek mentioned this pull request Apr 4, 2023

Add BootSplash support for Android 12 #16863

Merged

53 tasks

neil-marcellini changed the title ~~Invert bootsplash colors~~ [HOLD 16863 merge] Invert bootsplash colors Apr 5, 2023

neil-marcellini requested a review from 0xmiroslav April 5, 2023 16:48

neil-marcellini reviewed Apr 5, 2023

View reviewed changes

Invert splash screen colors

7fe637a

zoontek changed the title ~~[HOLD 16863 merge] Invert bootsplash colors~~ [HOLD 16863 merge] Invert bootsplash colors + fade splash screen on web Apr 6, 2023

neil-marcellini previously approved these changes Apr 6, 2023

View reviewed changes

neil-marcellini changed the title ~~[HOLD 16863 merge] Invert bootsplash colors + fade splash screen on web~~ Invert bootsplash colors + fade splash screen on web Apr 6, 2023

0xmiroslav reviewed Apr 9, 2023

View reviewed changes

Comment thread web/splash/splash.js Outdated

neil-marcellini added the Ready To Build label Apr 10, 2023

Add back missing AppTheme on application

1c3b73c

neil-marcellini removed the Ready To Build label Apr 11, 2023

neil-marcellini added the Ready To Build label Apr 11, 2023

0xmiroslav approved these changes Apr 12, 2023

View reviewed changes

neil-marcellini approved these changes Apr 12, 2023

View reviewed changes

neil-marcellini merged commit 34c5155 into Expensify:main Apr 12, 2023

zoontek deleted the invert-bootsplash-colors branch April 12, 2023 22:54

OSBotify mentioned this pull request Apr 13, 2023

Deploy Checklist: New Expensify 2023-04-13 #17379

Closed

26 tasks

kbecciv mentioned this pull request Apr 13, 2023

Web - Login - No light green logo #17409

Closed

6 tasks

neil-marcellini mentioned this pull request Apr 18, 2023

C+ payment for PR #16932 #17594

Closed

kadiealexander mentioned this pull request Apr 26, 2023

[HOLD for payment 2023-06-01] [New Feature] Animate Native SplashScreen #14151

Closed

6 tasks

Conversation

zoontek commented Apr 4, 2023 • edited by neil-marcellini Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Details

Fixed Issues

Tests

Offline tests

QA Steps

PR Author Checklist

Screenshots/Videos

Uh oh!

MelvinBot commented Apr 4, 2023

Uh oh!

shawnborton commented Apr 4, 2023

Uh oh!

zoontek commented Apr 4, 2023

Uh oh!

shawnborton commented Apr 4, 2023

Uh oh!

neil-marcellini commented Apr 5, 2023

Uh oh!

neil-marcellini left a comment

Choose a reason for hiding this comment

Uh oh!

0xmiroslav commented Apr 5, 2023

Uh oh!

zoontek commented Apr 6, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

zoontek commented Apr 6, 2023

Uh oh!

0xmiroslav commented Apr 6, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

zoontek commented Apr 6, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

0xmiroslav commented Apr 6, 2023

Uh oh!

zoontek commented Apr 6, 2023

Uh oh!

neil-marcellini left a comment

Choose a reason for hiding this comment

Uh oh!

neil-marcellini commented Apr 6, 2023

Uh oh!

0xmiroslav commented Apr 7, 2023

Uh oh!

0xmiroslav commented Apr 7, 2023

Uh oh!

zoontek commented Apr 8, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

0xmiroslav commented Apr 8, 2023

Uh oh!

Uh oh!

0xmiroslav commented Apr 9, 2023

Uh oh!

zoontek commented Apr 9, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

zoontek commented Apr 10, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

0xmiroslav commented Apr 10, 2023

Uh oh!

neil-marcellini commented Apr 11, 2023

Uh oh!

0xmiroslav commented Apr 12, 2023

Uh oh!

0xmiroslav commented Apr 12, 2023

Uh oh!

zoontek commented Apr 12, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

0xmiroslav commented Apr 12, 2023

Uh oh!

0xmiroslav commented Apr 12, 2023

Uh oh!

0xmiroslav commented Apr 12, 2023

zoontek commented Apr 4, 2023 •

edited by neil-marcellini

Loading

zoontek commented Apr 6, 2023 •

edited

Loading

0xmiroslav commented Apr 6, 2023 •

edited

Loading

zoontek commented Apr 6, 2023 •

edited

Loading

zoontek commented Apr 8, 2023 •

edited

Loading

zoontek commented Apr 9, 2023 •

edited

Loading

zoontek commented Apr 10, 2023 •

edited

Loading

zoontek commented Apr 12, 2023 •

edited

Loading