Login page welcome text style differs between platforms (Inconsistent)

[Santhosh-Sellavel]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Action Performed:

1. Logout If already logged in, log out.
2. See the welcome text

Expected Result:

The same style everywhere!

Actual Result:

It's bolded in Android, not bolded everywhere else!

Note: Ignore screens have some error messages.

Android

iOS

mWeb

Desktop

Web

Workaround:

Can the user still use Expensify without this being fixed? Yes

Platform:

Where is this issue occurring?
Confused, Let's say all for now.

• Web
• iOS
• Desktop App
• Mobile Web

Version Number:
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation
Expensify/Expensify Issue URL:

View all open jobs on GitHub

Suggestion

I don't know what's expected or which is correct. But style should be the same across all platforms!

[MelvinBot]

Triggered auto assignment to @sakluger (AutoAssignerTriage), see https://stackoverflow.com/c/expensify/questions/4749 for more details.

[Santhosh-Sellavel]

Proposal

I do see this happens because of the following reasons.
The style we use for welcome text is

In the h3 style for fontFamily.GTA_BOLD, we have written a separate export for bold style alone.

bold contains following files, style for android & index.js for all the other platforms

index.android.js

index.js

So this is the reason we have different styles between platforms. We could modify the same to fix the issue! But first, we want to figure out what's intended.

[shawnborton]

I think we want the text to appear bold on all platforms. Does this mean all bold text is broken on Android?

[Santhosh-Sellavel]

Yes, it looks like @shawnborton!

[Santhosh-Sellavel]

Do you expect GTAmericaExp-Regular for all bold styles? @shawnborton

[shawnborton]

I would expect GTAmericaExpBold for bold.

[Santhosh-Sellavel]

GTAmericaExp-Bold does not work well for web/desktop!

[shawnborton]

I'm not sure what to tell you then - perhaps @roryabraham or @marcaaron might have an idea as I think one of them might have worked on this?

[Santhosh-Sellavel]

Okay, @shawnborton it does not look like it is completely messed up, I will investigate further for other pages!

[Santhosh-Sellavel]

It's not working on login pages alone as expected!

[Santhosh-Sellavel]

After further investigation, I found the reasons.

For all other styles which use fontFamily.GTA_BOLD as fontFamily in styles.js pass along fontWeight: fontWeightBold so the text looks bold in all other pages as expected.
In below lines h1 style has property fontWeight: fontWeightBold, but for h3 and h4 we missed it out.

App/src/styles/styles.js

Lines 53 to 68 in bdcafa3

	h1: {
	color: themeColors.heading,
	fontFamily: fontFamily.GTA_BOLD,
	fontSize: variables.fontSizeh1,
	fontWeight: fontWeightBold,
	},
	h3: {
	fontFamily: fontFamily.GTA_BOLD,
	fontSize: variables.fontSizeNormal,
	},
	h4: {
	fontFamily: fontFamily.GTA_BOLD,
	fontSize: variables.fontSizeLabel,
	},

So It's not bold in login form pages alone. In the below screens, h3 style is used for the Welcome back to the New Expensify! Please enter your password. & h4 style is used for Forget? Look at the differences. It's all bolded in android and missed on the web.

Web

Android

cc: @shawnborton @roryabraham

De we need the messages bolded here or not?
If so we need to add fontWeight: fontWeightBold to h3 & h4 styles
if not, then we need update fontFamily: fontFamily.GTA in h3 & h4 styles

Post your thoughts on this thanks!

[shawnborton]

Okay so sounds like we just need to add fontWeightBold to the h3/h4 styles then, as we do want those headings to appear bold. Thanks for investigating!

[roryabraham]

This looks good and a cursory search revealed that it doesn't appear to be a duplicate. Going to tag this as external so that we can get @Santhosh-Sellavel hired to make this change.

[MelvinBot]

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

[roryabraham]

@marklouisdeshaun Let's get an Upwork job created for this, then hire @Santhosh-Sellavel.

@Santhosh-Sellavel Feel free to submit a PR once you've been hired on Upwork.

[Santhosh-Sellavel]

Sure @roryabraham, thanks!

[marklouisdeshaun]

Job created in Upwork!

Internal post: https://www.upwork.com/ab/applicants/1430289271743135744/job-details
External post: https://www.upwork.com/jobs/~019e6eda1b98605ada

[muhammadtaha1998]

I think its just simple style issue. Need to change it from GTAmericaExp-Regular to GTAmericaExp-Bold

[Santhosh-Sellavel]

@roryabraham @marklouisdeshaun I applied for the job! Shall I wait for PR until hired, can I start my PR work?

[roryabraham]

@Santhosh-Sellavel Up to you! Feel free to start the PR work if you want to get a head-start.

[roryabraham]

@Santhosh-Sellavel I went ahead and hired you on Upwork

[Santhosh-Sellavel]

@shawnborton @roryabraham

1. The highlighted area is not aligned with other views above in mobile iOS.
2. Go back is not bolded what can we do here? We need to unify

[shawnborton]

"Go back" and "forgot" should not be bolded.

The highlighted area is not aligned with other views above in mobile iOS.

What do you mean by that?

[Santhosh-Sellavel]

This from web,

this is iOS

By logging in, you agree
that area is not aligned with input/buttons
@shawnborton

[shawnborton]

Got it, I agree with that and it actually looks like that's even more broken - the small print stuff should be at the bottom:

[Santhosh-Sellavel]

Even for mWeb & mobile? it should be on the bottom? @shawnborton

[Santhosh-Sellavel]

There is a different layout style intentionally for mobile/smallscreen width kindy confirm me in thanks!

cc: @shawnborton @roryabraham

[Santhosh-Sellavel]

@roryabraham Changes discussed earlier, Forget? style is updated in PR & ready for review!

[shawnborton]

There is a different layout style intentionally for mobile/smallscreen width kindy confirm me in thanks!

The sign in screen on wider devices has the blue area on the right, otherwise the gray area that has the logo + form + footer should look identical on all platforms.

[Santhosh-Sellavel]

Got it, I agree with that and it actually looks like that's even more broken - the small print stuff should be at the bottom:

cc: @roryabraham @shawnborton I'll take this as a separate issue, do you feel otherwise let me know!

[MelvinBot]

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

[marklouisdeshaun]

I've re-assigned as I'll be OOO so that a member of the team can stay on top of this. Thanks!

[roryabraham]

Looks like the PR was merged, making this a weekly while we wait for it to be deployed to prod.

[mallenexpensify]

Apologies for the delay in payment @Santhosh-Sellavel , I just paid in Upwork now and added the bonus for reporting the issue. In the very near future, if not now, there will be an updated comment about when to pay issues and the title will be updated, so this shouldn't continue to happen