Visual refinements for native nextpage

[koke]

Implements the easy changes requested in wordpress-mobile/gutenberg-mobile#618

Having a dashed line is not currently supported by react-native-hr, so we'll keep investigation options as part of making this a component (#14175)

gutenberg-mobile PR: wordpress-mobile/gutenberg-mobile#819

[pinarol]

hey @koke this looks pretty good, I changed the font as System and it looked same as designs for iOS(since system font is actually San Francisco), maybe it is another quick win also.

.block-library-nextpage__text {
	color: $gray;
	text-decoration-style: solid;
	font-family: 'System'; <<<<<<<<
	text-transform: uppercase;
}

[pinarol]

LGTM! Added a comment about system font that's all(although not feeling very strong about that)

[koke]

Oh, I didn't know about System, it works great. However, the CSS linter is complaining about the syntax, and I'm not sure what to do about it. Do you know if we can disable it for .native.scss files or have a different set of rules? I feel like I've seen exceptions in the past, but I can't remember a specific one.

[pinarol]

Do you know if we can disable it for .native.scss files or have a different set of rules?

Unfortunately I don't know, but I am curious now, let me dig that a bit 🤔

[hypest]

If we need a special font family for the NextPage block, how about defining a variable for it in the _native.android.scss and _native.ios.scss files that live in the gutenberg-mobile repo? I think that way all linters are happy.

[koke]

In the end, I moved setting the font to JS. I'm turning this into a component soon, and having part of it outside the Gutenberg repo doesn't seem a good solution. We should explore what's the right approach for CSS font variables across platforms, but not on this PR.

[hypest]

I moved setting the font to JS

Can you open a ticket for this one @koke so we track it?

Having to set a font family via JS is counter-intuitive at the moment since it doesn't follow the rest of the code (setting styles via SCSS) so, it will be best if we track it.

[koke]

Logged wordpress-mobile/gutenberg-mobile#875