[$1000] Web - Log in - Text is centered when the window is minimized

[kbecciv]

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

---

Issue found when executing PR #15737

Action Performed:

1. Go to URL https://staging.new.expensify.com/
2. In the email field, enter the expensifail email
3. Press continue
4. Adjust the window to make smaller
5. Pay attention to the text "Welcome back! Please enter the magic code sent to email address"

Expected Result:

The text is centered on the left edge

There should ever only be 1 scroll bar on the right hand side

Actual Result:

Text is centered

There are 2 scrollbars on the right hand side

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android / native
• Android / Chrome
• iOS / native
• iOS / Safari
• Windows / Chrome
• MacOS / Desktop

Version Number: 1.3.1.0

Reproducible in staging?: Yes

Reproducible in production?: No

If this was caught during regression testing, add the test name, ID and link from TestRail:

Email or phone of affected tester (no customers):

Logs: https://stackoverflow.com/c/expensify/questions/4856

Notes/Photos/Videos: Any additional supporting documentation

Bug6022219_Recording__4209.mp4

Expensify/Expensify Issue URL:

Issue reported by: Applause - Internal Team

Slack conversation:

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~013d2ed168915073c8
• Upwork Job ID: 1648657734302478336
• Last Price Increase: 2023-04-19

[MelvinBot]

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

[MelvinBot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[dylanexpensify]

Pay attention to the text "Welcome back! Please enter the magic code sent to applausetester+ihchat4@applause.expensifail.com"
Can we confirm this happens to any users outside of this specific email @kbecciv?

[kbecciv]

Yes, I can reproduce with my account in Windows/Chrome

[PrashantMangukiya]

Proposal

Posting proposal early as per new guidelines

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

Web Log in - Text is centered aligned when window is minimized. It should be left aligned.

What is the root cause of that problem?

Welcome back text rendered via code below

App/src/pages/signin/SignInPageLayout/SignInPageContent.js

Lines 68 to 70 in f599146

	<Text style={[styles.loginHeroBody, styles.mb5, styles.textNormal, !props.isSmallScreenWidth ? styles.textAlignLeft : {}]}>
	{props.welcomeText}
	</Text>

At line 68 it uses styles.loginHeroBody and for large screen it left align text via !props.isSmallScreenWidth ? styles.textAlignLeft : {}

styles.loginHeroBody consist code below, At line 3125 it has center style applied

App/src/styles/styles.js

Lines 3121 to 3126 in f599146

	loginHeroBody: {
	fontFamily: fontFamily.EXP_NEUE,
	fontSize: variables.fontSizeSignInHeroBody,
	color: themeColors.textLight,
	textAlign: 'center',
	},

So here what happen, for large screen it will align text left due to !props.isSmallScreenWidth ? styles.textAlignLeft : {} at line 68 but for small screen it will align text at center because of styles.loginHeroBody. This is the root cause of the problem.

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

Here important thing is we can not remove center style from styles.loginHeroBody because it is used in the sign in page hero section (shown besides of the login form) where we need hero text center aligned.

So we can remove !props.isSmallScreenWidth ? styles.textAlignLeft : {} from line 68 and replace it with styles.textAlignLeft So it will align text left as per need.

So updated code will be as under:

 <Text style={[styles.loginHeroBody, styles.mb5, styles.textNormal, styles.textAlignLeft]}> 
     {props.welcomeText} 
 </Text> 

So this will solve the problem and shows text left aligned.

What alternative solutions did you explore? (Optional)

None

Results

Web.mp4

[Pujan92]

Proposal

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

Magic code text in singin page is center in small screens

What is the root cause of that problem?

Class loginHeroHeader which has been given to that Text consists the prop textAlign: 'center'.

App/src/pages/signin/SignInPageLayout/SignInPageContent.js

Lines 56 to 57 in f54a8bd

	<Text style={[
	styles.loginHeroHeader,

App/src/styles/styles.js

Lines 3114 to 3119 in f54a8bd

	loginHeroHeader: {
	fontFamily: fontFamily.EXP_NEW_KANSAS_MEDIUM,
	color: themeColors.success,
	fontWeight: '500',
	textAlign: 'center',
	},

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

We can remove this(textAlign: 'center') prop from the class as this seems to be not a common property everywhere this class has been used. So the below changes may be require.

1. Remove textAlign prop from the loginHeroHeader class
   

   App/src/styles/styles.js

   Line 3118 in f54a8bd

   textAlign: 'center',

2. Remove this line as we need the text to be left for all the screens and default it will be left
   

   App/src/pages/signin/SignInPageLayout/SignInPageContent.js

   Line 60 in f54a8bd

   !props.isSmallScreenWidth ? styles.textAlignLeft : {},

3. Add styles.textAlignCenter for the SignInHeroCopy where we need the text to be center for all screens
   

   App/src/pages/signin/SignInHeroCopy.js

   Line 18 in f54a8bd

   <Text style={[styles.loginHeroHeader,

[dylanexpensify]

@kbecciv can you link slack convo for this please?

[MelvinBot]

Job added to Upwork: https://www.upwork.com/jobs/~013d2ed168915073c8

[MelvinBot]

Current assignee @dylanexpensify is eligible for the External assigner, not assigning anyone new.