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

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

HOLD on https://github.com/Expensify/App/pull/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

About this issue

Original URL
State: closed
Created 10 months ago
Comments: 40 (31 by maintainers)

Most upvoted comments

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>

Pujan92 on Sep 5, 2023

all set!

isabelastisser on Jan 29, 2024

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.

s77rt on Jan 18, 2024

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

shawnborton on Jan 2, 2024

Answered your questions there. Thanks

roryabraham on Sep 14, 2023

@Pujan92 took this off HOLD

roryabraham on Sep 12, 2023

@roryabraham Can we put this issue on Hold until the other PR gets merged

Pujan92 on Sep 6, 2023

@DylanDylann Your proposal still does not contain any information about how you intend to render the app version text and therefore is missing the most important piece from @Pujan92’s proposal.

roryabraham on Sep 5, 2023