[docs][joy-ui] Refine the Order Dashboard template design

[zanivan]

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

Refining the Order Dashboard template aiming to remove most of the custom styles and overrides, making it closer as possible to the default theme.

Current	New

https://deploy-preview-38395--material-ui.netlify.app/joy-ui/getting-started/templates/order-dashboard/

[mui-bot]

Netlify deploy preview

https://deploy-preview-38395--material-ui.netlify.app/

Bundle size report

No bundle size changes (Toolpad)
No bundle size changes

Generated by 🚫 dangerJS against 8943ad2

[danilo-leal]

Happy with this now! 😊

[zanivan]

@siriwatknp I'm refining the old templates, can you review it from the development POV? Mostly, if what we're doing is the best way to do it.
And one more thing, is there an easy way to update the screenshots afterward? I remember you did it on the default theme, but I couldn't find it among those hundreds of commits 😅

[siriwatknp]

And one more thing, is there an easy way to update the screenshots afterward? I remember you did it on the default theme, but I couldn't find it among those hundreds of commits 😅

Run yarn template:screenshot while running the development server.

[siriwatknp]

@zanivan I notice that the sidebar in the mobile viewport does not have a border, is this expected?

[danilo-leal]

@siriwatknp it should have ⎯ at least between the first and second side nav! Tried adding it but didn't figure out why... mind pointing out the way? 😬

[siriwatknp]

@siriwatknp it should have ⎯ at least between the first and second side nav! Tried adding it but didn't figure out why... mind pointing out the way? 😬

Alright, fixed it. The previous version uses Dividers. I replaced them with border instead, so it both work on mobile and desktop.

[oliviertassinari]

The new IDs weren't unique, it created console error spam in the console, fixed in #40316.

Learning, please continuously check that new code is free of warnings from:

• Best practices: https://pagespeed.web.dev/
• Spec https://validator.w3.org/
• Accessibility tool https://chromewebstore.google.com/detail/wave-evaluation-tool/jbbplnpkjmmeebjpijfedlgcdilocofh
• console warnings

👌

[danilo-leal]

Thanks for these learning links; much appreciated! More than just pointing something as wrong, learning about how to prevent it in the future is crucial, particularly for us designers who sometimes miss these more "under the hood" dev things! 🤙 Thanks!