[docs] Redesign on markdown page

[mnajdova]

Preview: https://deploy-preview-27860--material-ui.netlify.app/components/alert/

Changes done:

Table content:

Prev:

Now:

Demo toolbar

Prev:

Now:

Page heading

Prev:

Now:

TODO:

API link

Prev:

Now:

Updated the colors on the content of the docs pages

Next iteration:

• Sidebar

---

Scrollbar dark mode - will be handled after #25016 is fixed

[mui-pr-bot]

No bundle size changes (experimental)

Generated by 🚫 dangerJS against 5f3a240

[mnajdova]

I noticed one problem when I played with the scrollbar, namely the global styles ar propagated to the demos too (see the scrollbar on the demo) Not sure what we should do with this one. cc @siriwatknp @oliviertassinari

I feel like in the end we may need to isolate all examples in iframes :\

[danilo-leal]

Nice work! I've pushed some small changes here and there. Listing some other ones I couldn't do:

1. The texts and the demo/code containers are slightly misaligned horizontally. Couldn't find where to play with this...

2. There are some cases where the demo and code container don't have border-radius applied. No idea why...

3. Couldn't find where to modify the colors of the filled and outlined demo container on dark mode.

4. Couldn't find where to modify the max-width of the container that holds all the content but I played with some values directly on the inspector. This is something I personally think it makes for a much better reading experience (less horizontal movement of the eye) and also for a more overall balanced look since we gain negative space between the sidebar and the table of contents.

These values are just me playing, not necessarily the correct ones. Probably somewhere around 700px - 800px lies a good max-width. For reference, most of our users check the website in a 1920x1080 screen res which renders the div with 1152 width, which is too much 😅 But we can iterate on it on another PR!

[oliviertassinari]

see the scrollbar on the demo

@mnajdova There is an open GitHub issue that describes the next step for the scrollbar on dark mode. The plan is to remove the global overrides because it comes with too many downsides vs. the alternative.

[mnajdova]

@mnajdova There is an open GitHub issue that describes the next step for the scrollbar on dark mode. The plan is to remove the global overrides because it comes with too many downsides vs. the alternative.

I've found it, linking it here for future reference #25016 I will revert for the now the changes for the scrollbar, we can come back to this after the v5 stable release.

[mnajdova]

These values are just me playing, not necessarily the correct ones. Probably somewhere around 700px - 800px lies a good max-width. For reference, most of our users check the website in a 1920x1080 screen res which renders the div with 1152 width, which is too much 😅 But we can iterate on it on another PR!

Agree, let's keep the scope smaller, so that we can iterate faster :)

[mnajdova]

1. The texts and the demo/code containers are slightly misaligned horizontally. Couldn't find where to play with this...

Fixed with b2dcfa0

2. There are some cases where the demo and code container don't have border-radius applied. No idea why...

Fixed with 367273c

3. Couldn't find where to modify the colors of the filled and outlined demo container on dark mode.

We talked offline, we need to find better color over here - https://github.com/mui-org/material-ui/blob/next/docs/src/modules/components/Demo.js#L110

4. Couldn't find where to modify the max-width of the container that holds all the content but I played with some values directly on the inspector. This is something I personally think it makes for a much better reading experience (less horizontal movement of the eye) and also for a more overall balanced look since we gain negative space between the sidebar and the table of contents.

You should be able to change it over here - https://github.com/mui-org/material-ui/blob/next/docs/src/modules/components/AppLayoutDocs.js#L36 Not sure what is the best value to be honest.

[mnajdova]

@danilo-leal leaving a note that we need to find better color for this use-case as well:

[siriwatknp]

Suggested change

	divider: mode === 'dark' ? blueDark[700] : grey[200],
	divider: mode === 'dark' ? blueDark[500] : grey[200],

I think it should be lighter than 700. So far, 700, 800, 900 are background.

[siriwatknp]

Are you sure about this? that will reduce the space of text.

[siriwatknp]

Left a couple of comments, the rest looks good.

[mnajdova]

Left a couple of comments, the rest looks good.

I will let @danilo-leal respond. The changes are mostly his :)

[mnajdova]

I am going to merge this one to leverage some fixes we already have as part of the PR. Will leave the unaddressed comments by @siriwatknp open, so that we can decide and address them in the next PR.

[mbrookes]

Hmm... the font for <code> doesn't align with the body text. It's quite noticeable. We can pick it up in the next iteration.

Also not convinced about the <h1> color - but that can be fixed at any point.