[No QA] Fix Style on FullPageOfflineBlockingView

[Luke9389]

Fixes

#9268

Hey Shawn, here are those style fixes.

Here's the current component (I'll update this as we do more fixes):

[Luke9389]

@shawnborton
One thing is that the comment you left says the heading should be font size 17 but I've used the fontSizeh1 style which is 19. I'm pretty sure our headings use that size, but I can bump it down to fontSizeLarge: 17 if you prefer. LMK how it looks to you.

[shawnborton]

Hmm, what size do page headers use? That's the size we're using in Figma, which is 17

[roryabraham]

Code LGTM

[johnmlee101]

Do you mind updating with some basic QA steps?

[johnmlee101]

Also what conversation/issue is this referring to? Does this affect multiple platforms?

[Luke9389]

@johnmlee101 I put the issue in the description. Here's the slack convo: https://expensify.slack.com/archives/C02HWMSMZEC/p1654010563728389

QA is a little tricky at the moment. I've been hardcoding the offline condition to true to test.

@shawnborton Here's the h1 style I used:

App/src/styles/styles.js

Line 181 in 0e3bbe7

h1: {

fontSize: variables.fontSizeh1, is defined here:

App/src/styles/variables.js

Line 24 in 0e3bbe7

fontSizeh1: 19,

Again, totally fine with bumping it down to 17 if it looks too large in the screenshot.

[shawnborton]

I'm not suggesting that we change the h1 style, but rather, just use the same style applied to the page header. Can you tell me more about that? Where do we store a font value as 17, and what do we call it?

[Luke9389]

Ahh, OK. We call font size 17 fontSizeLarge.

The titles we use for the pages (like "Connect Bank Account" in the screenshot) use the <Header> component, which does indeed use this. Confusingly, we rename it to textLarge from fontSizelarge here:

App/src/styles/styles.js

Line 256 in 0e3bbe7

fontSize: variables.fontSizeLarge,

OK, so I'll use that style so that they match. 👍
Nice catch!

[shawnborton]

Perfect, thanks!

[shawnborton]

Also, could you please replace offline-cloud.svg with this updated icon? We typically export our icons in all black and with the correct 20x20 bounding box, and I think the existing asset doesn't have either of those.

offline-cloud.svg.zip

[johnmlee101]

Will wait for your final design check @shawnborton before finalizing my review 😄

[shawnborton]

What does Mondo mean? I wonder if we should name this something more related to the usecase... like iconSizeFullPageOverlay or something?

[Luke9389]

How about iconSizeSuperDuperLarge?

I don't think we should tie it to the use case because it may be used in a different situation where we aren't doing a full page overlay.

[Luke9389]

Updated to iconSizeSuperLarge

[shawnborton]

Fair point. Another approach we can take is that if we assume a default icon is 20x20, this particular icon is 3x that size.

[Luke9389]

I think the current name (iconSizeSuperLarge) is fine.

[shawnborton]

Cool, I don't feel strongly but at some point it would be nice to clean up these variable names.

[shawnborton]

Looks good to me! Just left one comment about the icon size variable.

[Luke9389]

Anything else @johnmlee101?

[OSBotify]

🚀 Deployed to staging by @Luke9389 in version: 1.1.72-0 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

[OSBotify]

🚀 Deployed to production by @yuwenmemon in version: 1.1.73-2 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅