Fix signin page layout

[jasperhuangg]

Details

The way the SigninPageLayout component was originally written was confusing and required bits and pieces of the forms that were its children to be located across separate components.

Since we eventually want to refactor the LoginForm to be a single component (without wide/narrow counterparts), I've refactored the SigninPageLayout to be easier to use with single component forms as children.

Fixed Issues

Expensify/Expensify#157816

QA Testing Steps

1. Navigate to the sign in page.
2. Verify that it looks the same as they do on production.
3. Enter an email for an account that's already been created.
4. Verify that the password entry page looks the same as it does on production.
5. Create a new account with an email you have access to (I recommend using EmailOnDeck).
6. Verify that resend validation link screen looks the same as it does on production.
7. For Web, Mobile Web, iOS, and Android, use the link in the email that was sent to access the set password page.
8. Verify that the set password page looks the same as it does on production.

Tested On

• Web
• Desktop
• iOS
• Mobile Web
• Android

Screenshots

Web

Mobile Web

Desktop (set password page can't be accessed via deep links on desktop)

iOS

Android

[marcaaron]

Looking good. Had a few minor comments.

[shawnborton]

Looks like the "Change Expensify login" blue link is not in the correct brand font. Can you fix that quickly?

[marcaaron]

Navigate to the sign in page, the set password page, and the resend validation link pages.

Can we provide more detailed test steps here? It might not yet be clear to QA how to access these various screens.

Let's also test and add screenshots for these platforms:

• Desktop
• iOS
• Android

[marcaaron]

Not sure if this was introduced here or another PR, but the SetPassword screen is missing padding on iOS

[jasperhuangg]

Looks like the "Change Expensify login" blue link is not in the correct brand font. Can you fix that quickly?

@shawnborton Which font is our brand font? It looks like for our styles we either default to a font or set it to GTA. These are the styles for that link in production:

https://github.com/Expensify/Expensify.cash/blob/0921feec98fa5d1ce14ee51071bebe9e148bccc8/src/styles/styles.js#L27-L30

[shawnborton]

You would just need to simply add fontFamily: fontFamily.GTA, but at the same time, I realize this is totally not something you introduced so we can keep the scope slimmer and fix this in a separate PR.

[jasperhuangg]

@shawnborton Sounds good, I'll make a new PR!

[jasperhuangg]

@marcaaron I fixed the iOS display issue with the Set Password page and provided screenshots/instructions for each page for each platform. Should be good for another review, thanks!

[marcaaron]

Looks good. But we'll need to merge master on this guy since there is a failure.

[jasperhuangg]

@marcaaron Looks like the tests are passing now after merging master, thanks for the review! Feel free to merge once you think everything checks out.

[marcaaron]

Changes look great but there's one more issue.