🦋 Apply PF4 style to page titles

[josemigallas]

THREESCALE-9647: Move page headers into a PageSection component

Apply Patternfly 4 style to page titles according to Page and Text components. Highlights:

• Pages already implemented with Patternfly React now also render their own page titles. This allow the upper PageSection to get PF styles by default. This caused a difference in background-color which has been also fixed.
• Legacy headers are inconsistent: some are h1 and others h2 and there are also weird hybrids. The

  below some are also problematic since they inherit from the common.scss. By creating a super specific rule we can override the legacy styles and use values copied from PF variables.

• The default font sizes main-title-font-size and secondary-title-font-size have been updated with PF4 values. This affect all titles in the app, which is very convenient to maintain proportion between page header titles and body subtitles (our size for subtitles coincides with PF4 main title so they would look the same).

Before (custom h1):

After (PF4 h1):

[mayorova]

What is the purpose of this?
I mean, it's nice, but the drawback is that now React and non-React pages have different headers styles... which doesn't look good, IMO.

Maybe then we need to change the style of the non-React pages as well, so it looks consistent?

[mayorova]

The Active Docs one doesn't look great, see:

There is some weird margin around the whole page, which is also of a slightly different gray color

Compared to the current:

[josemigallas]

What is the purpose of this? I mean, it's nice, but the drawback is that now React and non-React pages have different headers styles... which doesn't look good, IMO.

Maybe then we need to change the style of the non-React pages as well, so it looks consistent?

@mayorova After some consideration and experimentation it's just not possible to do this in a clean way, that is without opening a huge PR that will take a long time to finish.

The fact is that our UI is already inconsistent, it's been for a while. And the only sane way to update it is little by little. This PR should not introduce any new bugs (I fixed those that you pointed out in your screenshots) but take those pages that are in "no man's land" and transition them to 100% Patternfly.

I've tried to change all headings but it's not easy since Patternfly also relies on a certain HTML structure and I don't think it's a good idea to keep introducing intrusive and hardcoded css. It's already in a very bad shape.

[mayorova]

Just a small suggestion to make the different titles look almost the same: https://github.com/3scale/porta/pull/3378/files

I agree that we need to align everything and ideally get rid of most customizations.
But I think this is not a huge change, we can apply it in the meanwhile.

[lvillen]

Nice! 💯

[mayorova]

Would rem always be 16px?... I'm just wondering - I have no idea.

[josemigallas]

rem is a relative to the root's element font-size. It's basically what was being achieved by using n * $fontSize... So as long as the initial font-size does not change, 1rem will be worth 8px.
NOTE: I haven't found where this 8px are defined, I know PF supports defining a custom --pf-global--root--FontSize that will apply to all rems.. but we don't use that.

[mayorova]

Hm... Last time I checked, rem is actually 16px, and it was the browser default (at least in Chrome)
So, main title would be 24px, which is what PF4 uses for h1 (so, it's OK).

Just wondering whether it makes sense using rem instead of px. But I guess it's fine.

[josemigallas]

Yes, it's 16, sorry. I think we should use whatever PF uses.

[mayorova]

Yes, it's 16, sorry. I think we should use whatever PF uses.

Yeah, that was my point. Why use 1.5rem instead of 24px (as PF4 defines it as 24px) ?

[mayorova]

Looks good now 👍