[$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.

[MelvinBot]

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

[MelvinBot]

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

[Vishrut19]

Hey! Can I work on this issue ??

[MelvinBot]

📣 @Vishrut19! 📣

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. 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.
2. 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.
3. 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>

[Vishrut19]

Contributor details
Your Expensify account email: vishrutagarwalla19@gmail.com
Upwork Profile Link: https://www.upwork.com/freelancers/~01927a702bd08b4e3d

[MelvinBot]

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

[b-antonenko]

Proposal:

Need to remove or change css property text-align:

Example:

removed:

changed text-align: left:

Also, I've mentioned that the text 'Welcome Back' is losing its style when the window becomes smaller.

[Vishrut19]

Hey! Can someone suggest me how I can contribute or take up this issue?

[PrashantMangukiya]

@Vishrut19 Follow this guideline

[Vishrut19]

Can someone tell me that how to take an issue?

[jayeshmangwani]

Can someone tell me that how to take an issue?

@Vishrut19 #17575 (comment)

This may help https://github.com/Expensify/App/blob/main/contributingGuides/CONTRIBUTING.md#propose-a-solution-for-the-job

[dianaferreira1]

Proposal

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

Log in - Text is centered when the window is minimized instead of being centered on te left edge

What is the root cause of that problem?

The textAlign: 'center' property in both the loginHeroHeader and loginHeroBody styles. This property centers the text within its container. When the window is minimized, the container may become narrower than the text, causing it to be centered and not aligned with the left edge. To fix this error, the textAlign property can be changed to textAlign: 'left' to align the text with the left edge of the container.

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

update the styles for loginHeroHeader and loginHeroBody to use textAlign: 'left' instead of 'center'
loginHeroHeader: {
fontFamily: fontFamily.EXP_NEW_KANSAS_MEDIUM,
color: themeColors.success,
fontWeight: '500',
textAlign: 'left',
},

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

[mountiny]

cc @grgia

Also lets make sure there are no 2 scrollbars showing, there should be only one.

[mountiny]

Also removing the Needs reproduction, I think this is reproducible reliably on Windows, but internally we dont have any windows device so we will have to rely on the community here

[s77rt]

Thanks everyone for the proposals, will review asap. But first I'd like to get some confirmations:

1. The text being centred seems intended. cc @grgia since you added that initially here 3a8cfbd
2. The double scroll bar is reported already here for iOS Safari [HOLD for payment 2023-05-02] [$1000] Login page showing multiple scroll sliders #16625 so maybe we should update that issue instead. cc @mountiny

---

Diff in text alignments:

Center (current)	Left

[mountiny]

probably best to hear from @grgia if we should close this out or no

[grgia]

Yes, that text should be centered on small screen widths. Closing out

[mountiny]

@dylanexpensify You migth want to terminate the Upwork job