[HOLD for payment 2024-01-24] [$500] Implement new layout in About page

[roryabraham]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

HOLD on #26784

Action Performed:

Open the Settings -> About page.

Expected Result:

Except it should also include the app version in the same font color as the < back button beneath the coin on the About page.

Notes:

• It should be implemented with the IllustratedHeaderPageLayout

• because the app version needs to be included in the top section, the IllustratedHeaderPageLayout component may need to be updated to allow us to render some stuff beneath the animation

• Currently the aspect ratio for all these animations are the same, so by setting the animation to 100% width the top section of the screen always has the same height. We need to render the app version in the top section without adjusting the animation size or the height of the top (colored) section.

• The animation lottie asset is here:

  Loading.json.zip

• The correct background color is yellow600 or #D18000

Actual Result:

It does not look like that.

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0179e9954261696fde
• Upwork Job ID: 1699055159124353024
• Last Price Increase: 2023-09-05
• Automatic offers:
• s77rt | Reviewer | 26508154
• Pujan92 | Contributor | 26508156

[melvin-bot]

Triggered auto assignment to @Christinadobrzyn (NewFeature), see https://stackoverflowteams.com/c/expensify/questions/14418#:~:text=BugZero%20process%20steps%20for%20feature%20requests for more details.

[melvin-bot]

Triggered auto assignment to @isabelastisser (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[melvin-bot]

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

[roryabraham]

Please use our proposal template

[roryabraham]

Ok, I know there's a lot of time pressure to try to write these proposals as fast as possible, but please try to take the time it needs to write a quality proposal. There's an additional consideration for this layout that wasn't needed for #26775 (i.e: the app version text, not shown in the mockup)

[Pujan92]

Proposal

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

Implement new layout for about page

What is the root cause of that problem?

New feature

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

Add IllustratedHeaderPageLayout as the wrapper component and pass the current content inside it. We need to remove logo and version part from there bcoz that needs to be displayed on the animation. For showing the version number we can pass overlayContent function(to display content on top of animation) which is going to be added in this PR. With that we need to provide some top margin to align the version text below coin. Set the prop values respective to the about page(considering the right animation file and bg color defined in the themecolors).

       <IllustratedHeaderPageLayout
            title={translate('initialSettingsPage.about')}
            onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS)}
            illustration={LottieAnimations....}
            backgroundColor={'#D18000'}
        >
            
        </IllustratedHeaderPageLayout>

[melvin-bot]

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

Offer link
Upwork job

[melvin-bot]

📣 @Pujan92 🎉 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 📖

[melvin-bot]

This issue has not been updated in over 15 days. @Pujan92, @s77rt, @isabelastisser, @roryabraham eroding to Monthly issue.

P.S. Is everyone reading this sure this is really a near-term priority? Be brave: if you disagree, go ahead and close it out. If someone disagrees, they'll reopen it, and if they don't: one less thing to do!

[isabelastisser]

@roryabraham are you still working on this?

[roryabraham]

Hi, progress here has stalled as we are very stuck in general due to problems with the spinning coin animation.

[isabelastisser]

@roryabraham if this is not being prioritized, should we close this and reopen it when the problems with the spinning coin animation resolve?

[isabelastisser]

Bump @roryabraham on my question above. Thanks!

[roryabraham]

I'm not sure. Maybe we can choose another animation for this page since there's some as-yet-unidentified problem with the spinning coin animation.

cc @Expensify/design

[shawnborton]

Can you summarize again what the problem is with the existing coin animation? I can take that to Augenblick to try to get some revisions made.

[Pujan92]

@shawnborton existing coin animation isn't working properly for safari browser, may be that team can check once in any lottie preview online within safari to figure out the issue. Sharing the screencast about how it looks for me in safari.

Screen.Recording.2023-12-19.at.18.12.10.mov

[shawnborton]

Cool, asked internally for a new version of this. Will keep you posted!

[shawnborton]

Can you try this one?

Expensify-Loading-121923.json.zip

[Pujan92]

It still isn't the smooth and proper for safari.

1. Safari

Screen.Recording.2023-12-20.at.00.16.16.mov

After converting to the .lottie file

Screen.Recording.2023-12-20.at.00.16.35.mov

2. Chrome

Screen.Recording.2023-12-20.at.00.14.12.mov

[shawnborton]

We're looking into it, will report back.

[shawnborton]

Here is a new version to try: EXP-Loading-Coin.zip

[roryabraham]

PR merged! 🚀 Thanks @shawnborton for working with our design partners to get an animation that worked as expected and was correctly sized

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.4.25-10 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Fix: Implement new layout in About page #27241

If no regressions arise, payment will be issued on 2024-01-24. 🎊

For reference, here are some details about the assignees on this issue:

• @Pujan92 requires payment automatic offer (Contributor)
• @s77rt requires payment automatic offer (Reviewer)

[melvin-bot]

BugZero Checklist: The PR adding this new feature has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@s77rt] Please propose regression test steps to ensure the new feature will work correctly on production in further releases.
• [@isabelastisser] Link the GH issue for creating/updating the regression test once above steps have been agreed upon.

[s77rt]

I don't think we need a regression test here for the simplicity. This kinda of design change is not something that would just break. This is an improvement more than a new feature.

[isabelastisser]

The payments were made in Upwork:

@Pujan92 requires payment automatic offer (Contributor) $500
@s77rt requires payment automatic offer (Reviewer) $500

[isabelastisser]

all set!