[$500] Login - Expensify logo is too close to the top of the screen

[izarutskaya]

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: v1.4.42-0
Reproducible in staging?: Y
Reproducible in production?: N
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: Applause-Internal team
Slack conversation:

Action Performed:

1. Launch New Expensify app.
2. Log out if logged in.

Expected Result:

There will be adequate spacing between Expensify logo and the top of the screen.

Actual Result:

Expensify logo is too close to the top of the screen.

Workaround:

Unknown

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

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01f5aa21ec0e08e780
• Upwork Job ID: 1758113096034033664
• Last Price Increase: 2024-02-15
• Automatic offers:
• getusha | Contributor | 0
• rayane-djouah | Contributor | 0

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~01f5aa21ec0e08e780

[melvin-bot]

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

[melvin-bot]

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

[github-actions]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[melvin-bot]

Current assignee @puneetlath is eligible for the Engineering assigner, not assigning anyone new.

[izarutskaya]

We think that this bug might be related to #vip-vsb
CC @quinthar

[ZhenjaHorbach]

Problem related with this PR

#34837

Earlier we use isInModal since for SignInModal we already have padding top since we have an additional element (in this case, a header with a back button)

and using isInModal we disabled paddingTop inside SignInPage

App/src/pages/signin/SignInModal.tsx

Lines 22 to 30 in 7a5c68a

	<ScreenWrapper
	style={[StyleUtils.getBackgroundColorStyle(theme.PAGE_THEMES[SCREENS.RIGHT_MODAL.SIGN_IN].backgroundColor)]}
	includeSafeAreaPaddingBottom={false}
	shouldEnableMaxHeight
	testID={SignInModal.displayName}
	>
	<HeaderWithBackButton onBackButtonPress={() => Navigation.goBack()} />
	<SignInPage isInModal />
	</ScreenWrapper>

But now we make disabled paddingTop for all cases, even when we don't have a header with a back button

e299ff5#diff-c5a5c5593f21966821ea88d4630dd1c2b31bc851de5a3634f5d41ac8604d84abR250

Because shouldUseNarrowLayout is always true when isSmallScreenWidth is true

App/src/hooks/useResponsiveLayout.ts

Line 19 in c9bc960

const shouldUseNarrowLayout = isSmallScreenWidth || isInModal;

I think for these case we need use isInModal instead shouldUseNarrowLayout from useResponsiveLayout or return old logic and just pass isInModal like param from SignInModal

Just in case I'll add a proposition

Proposal

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

Login - Expensify logo is too close to the top of the screen

What is the root cause of that problem?

The main problem with issue is that we always set paddingTop is 0 for SignInPage for mobile apps

App/src/pages/signin/SignInPage.tsx

Line 249 in c2a718c

style={[styles.signInPage, StyleUtils.getSafeAreaPadding({...safeAreaInsets, bottom: 0, top: shouldUseNarrowLayout ? 0 : safeAreaInsets.top}, 1)]}

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

I think for these case we need use isInModal instead shouldUseNarrowLayout from useResponsiveLayout or return old logic and just pass isInModal like param from SignInModal

e299ff5#diff-c5a5c5593f21966821ea88d4630dd1c2b31bc851de5a3634f5d41ac8604d84abR250

What alternative solutions did you explore? (Optional)

NA

[jjcoffee]

@ZhenjaHorbach's proposal LGTM! I agree this is a regression from #34837, so depending on urgency we may want to let @rayane-djouah take a stab at fixing this first.

🎀👀🎀 C+ reviewed

[melvin-bot]

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

[Beamanator]

I agree this should be fixed (& probably by the originating PR author) but not needed to fix asap as a deploy blocker

[situchan]

@rayane-djouah and @getusha may handle this

[groovedevelopers]

Proposal

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

Login - Expensify logo is too close to the top of the screen

What is the root cause of that problem?

The position of the logo is not set well

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

set position to absolute and set the appropriate values for top, left

[melvin-bot]

📣 @groovedevelopers! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

1. Make sure you've read and understood the contributing guidelines.
2. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
3. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
4. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.
   
   Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[groovedevelopers]

Contributor details
Your Expensify account email: groovytee01@gmail.com
Upwork Profile Link: https://www.upwork.com/freelancers/~01565b0a8934c1826a

[melvin-bot]

✅ Contributor details stored successfully. Thank you for contributing to Expensify!

[jjcoffee]

Unassigning as @rayane-djouah and @getusha will be handling this. cc @puneetlath

[melvin-bot]

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

[puneetlath]

@rayane-djouah mind commenting here so I can assign you?

[rayane-djouah]

We will handle this as a regression from #34837

[melvin-bot]

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

[puneetlath]

@rayane-djouah @getusha how's this going?

[rayane-djouah]

sorry for the delay, working on it now.

[rayane-djouah]

updated the PR

[rayane-djouah]

@puneetlath we can close this issue

[puneetlath]

Ah cool, thanks.