[Masonry] Improve the styling on the demos

[hbjORbj]

• I have followed (at least) the PR section of the contributing guide.

The style of the div items used for demo of Masonry can be improved to be consistent with those used for demo of Grid, which can be found here: https://next.material-ui.com/components/grid/#main-content

Before:
https://deploy-preview-27439--material-ui.netlify.app/components/masonry/

After:
https://deploy-preview-27957--material-ui.netlify.app/components/masonry/

[mui-pr-bot]

No bundle size changes (experimental)

Generated by 🚫 dangerJS against a5bc49c

[mnajdova]

I would propose maybe using bigger font for the numbers and putting it in the center of the box, but I would leave it to @danilo-leal :)

[eps1lon]

I would personally not apply the new styles. The old ones were crystal clear. In the end, you likely don't need the styles in the final product anyway (considering the very next example).

[mnajdova]

@eps1lon the idea was that it would look like the examples on https://next.material-ui.com/components/grid/#main-content

[eps1lon]

@eps1lon the idea was that it would look like the examples on next.material-ui.com/components/grid/#main-content

Ok, that's what the PR description already said. But why?

[mnajdova]

Ok. But why?

To look better :)

[eps1lon]

Ok. But why?

To looks better :)

The question is what makes these new styles better. You can't just claim that something "looks better".

[mnajdova]

The question is what makes these new styles better. You can't just claim that something "looks better".

This is why I mention @danilo-leal to give an opinion on the matter. The idea for updating the styles was mine, but I will leave the last decision to @danilo-leal

Also, the code in the examples is much more readable now.

[eps1lon]

Could you share what the purpose of the new styles? Seems like you already told this Danilo (otherwise there's not really an oppinion to be had). But we need this info in the PR for future reference.

[mnajdova]

Could you share what the purpose of the new styles?

My only thought was that we can make the demos look a bit better. We have done this in the past on the other examples where we use boxes for showing the component's usage:

• Stack - https://deploy-preview-27439--material-ui.netlify.app/components/stack/
• Grid - https://deploy-preview-27439--material-ui.netlify.app/components/grid/

If you strongly thing we should not do this, we can drop the effort, but I like these new styles better (it's my personal opinion)

[danilo-leal]

I'm in for this restyling :) It looks much better indeed and it is consistent with other components.

I would propose maybe using bigger font for the numbers and putting it in the center of the box

Regarding this @mnajdova's suggestion, I feel like the numbers font-size is alright but putting them in the center would probably be better indeed!

[hbjORbj]

I'm in for this restyling :) It looks much better indeed and it is consistent with other components.

I would propose maybe using bigger font for the numbers and putting it in the center of the box

Regarding this @mnajdova's suggestion, I feel like the numbers font-size is alright but putting them in the center would probably be better indeed!

Thanks, I addressed your comment!

[oliviertassinari]

• The isolation of the style of the items to a Item component seems to be a clear win. It makes the code preview simpler to follow 💯
• The older style made me think about https://strml.github.io/react-grid-layout/examples/0-showcase.html
• +1 for consistency between the different demos.
• The dark theme on https://next.material-ui.com/components/grid/ doesn't look awesome in my opinion. I struggle with the color contrast.

• Regarding the new look and feel. I'm personally not a fan of the elevation, Google seems to be moving increasingly toward border outlined (on its new product). But the elevation looks great in this context, and it's sill heavily used by Google on its dashboards (e.g. firebase, google cloud console, google search console, google ads) so 👍

[danilo-leal]

I believe that for now, we're good to go! About one of @oliviertassinari comments, this one:

The dark theme on https://next.material-ui.com/components/grid/ doesn't look awesome in my opinion. I struggle with the color contrast.

Although it's technically in the scope of "improving Masonry styling" he brings up the Grid as another example of a color contrast issue. Since there are these two and probably other components with this problem, I think we could probably tackle them all in a separate PR?! We could then close this one for now, not enlarging its scope (by fixing the Grid and other components here). And then open a new one for addressing the issue, as it is very worth to do so.

@mnajdova @hbjORbj what do you think?!

[hbjORbj]

@danilo-leal I agree. I am merging it now!