Header Font Updates

[hokienick]

For <h1> to <h5> Please review this doc and make sure that the css matches up even in specific components (I noticed that in some components such as the Accordion, the header tags do not match in other areas).

I think for the most part, the sizes and line-heights are correct, but the font-weight (the number in the parenthesis) is definitely off in some of these headers.

[kkartunov]

@hokienick we should be careful approaching this. In community app heading styles are defined here:
https://github.com/topcoder-platform/community-app/blob/develop/src/styles/_global/_typography.scss
they, in turn, are using/based predefined styles from our react-ui-kit repo: https://github.com/topcoder-platform/topcoder-react-ui-kit/blob/fd36c09f6e09282fe93089788a7bcd851eabe299/src/styles/_mixins/typography.scss#L126-L164 as those variables are defined there.

So if you check the values used by the lib are not matching those from the guide here.
If we update in the lib this will affect all TC pages using it. This almost everything with exception of some Contentful components that have own themes and overwrite the global styles. My question is do we want all this to happen?

[hokienick]

Yes. According to our UI Design Team, this is the official stance on our headers across our sites.

[kkartunov]

@hokienick how we gonna proceed with this?
I suggest we create a list of Contentful components and places where headings need to be updated and then solve one by one. Could you provide when there is some time for it, after TCO?

[hokienick]

Hello @kkartunov ok just starting to get settled in once again! Yes, so we need to continue this effort. I am confident that you understand what our goal is here.

So let's go over this together to realize what the true issue is and the best way to solve it, as I'd rather not have just a patch for this where it can just break later.

It sounds like we are unable to make the changes globally as it affects other core pages that are not built on Contentful (i.e. Challenge Listings and Dashboard).

Is the best solution to this to make changes to each component in Contentful? What will happen when a new component is created? Let's chat about the different options we have here, make a decision, and then get to fixing this issue :).

@kkartunov So what thoughts do you have on the options we have at this point?

[kkartunov]

Is the best solution to this to make changes to each component in Contentful?

Yes. Better said: to each default theme of component

What will happen when a new component is created?

It will need to implement a default theme

[hokienick]

@kkartunov I think for the default theme of all the components, we adhere exactly to that Typography Guide that I attached earlier. The only difference would be the banner in that it would be centered on the image.

[kkartunov]

https://docs.google.com/spreadsheets/d/1XKnNk58pD0kKTD3Zta0m2sVeGr4E5-soXbq1bZ_Q9sg/edit?usp=sharing