[next] Item 2 and 4 related to /styles/global.css of Issue #1548

[PedroFonsecaDEV]

Issue This PR Addresses

This PR solves item 2 and 4 of the issue: #1548

Type of Change

• Bugfix: Change which fixes an issue
• New Feature: Change which adds functionality
• Documentation Update: Change which improves documentation
• UI: Change which improves UI

Description

This PR solves item 2 and 4 of the issue: #1548

Regards item 2:
This CSS is coming from PageBase
Not sure if it needed to set

padding: none;
margin: none;

I think it's a good idea.
@tonyvugithub Do you know if MUI has something related to resetting padding or margin?

Regards item 4:
#1504 (comment)

Checklist

• Quality: This PR builds and passes our npm test and works locally
• Tests: This PR includes thorough tests or an explanation of why it does not
• Screenshots: This PR includes screenshots or GIFs of the changes made or an explanation of why it does not (if applicable)
• Documentation: This PR includes updated/added documentation to user exposed functionality or configuration variables are added/changed or an explanation of why it does not(if applicable)

[tonyvugithub]

You can set global style in MUI too. We can either do Next global styling or put everything in MUi

[tonyvugithub]

@PedroFonsecaDEV : Here. https://material-ui.com/customization/globals/. But putting all of global.css content to MUI will make the theming too big. Maybe just some of the properties.

[humphd]

Instead of doing this inside global.css, can you move this to its own file: src/frontend/next/src/styles/telescope-post-content.css and do an @import here to include it.

We need to do the same with the highlight-js CSS stylesheet for our code formatting.

[PedroFonsecaDEV]

Sure.

[PedroFonsecaDEV]

@humphd I could not find the file highlight-js. Could you please provide the path to me?

[humphd]

We need to install the highlightjs package to next/, then pull the CSS file from node_modules:

    "highlight.js": "10.4.1",

Then we can use node_modules/highlight.js/styles/github.css

[PedroFonsecaDEV]

Okay. Let's do it in a follow-up.

[humphd]

This is ready to go, @PedroFonsecaDEV, land when ready.