[docs][joy-ui] Refine the Profile Dashboard template

[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.

Part of #38582

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

[mui-bot]

Netlify deploy preview

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

Bundle size report

No bundle size changes (Toolpad)
No bundle size changes

Generated by 🚫 dangerJS against 5f45279

[zanivan]

@siriwatknp this was an old template inspired by an asset from Untitled UI kit, but I don't know if this still makes sense. Should we remove the reference now that's revamped and looks way different from before?

[Studio384]

The top and bottom spacing for the CardActions are different, and since they have a colored background, they appear to be misaligned.

[zanivan]

@siriwatknp are there any specific reason to replace the Accordion on the 32a9687?

[siriwatknp]

@siriwatknp are there any specific reason to replace the Accordion on the 32a9687?

Mainly, accessibility. The navigation should be nav > ul > li > a, not accordion. The user with a screen reader will be misled if the accordion is used.

[siriwatknp]

@zanivan I think this change should be reverted.

[siriwatknp]

@zanivan Great job! I really like the new look of the template, especially the shadow of the form controls.

[danilo-leal]

This is looking great, yet another sweet improvement to the existing templates! Many of the things I had noticed the last time I saw it a few days ago were fixed already, so I'm left with just a couple of tiny stuff, none of which are blockers for moving forward, I think:

1. The profile tabs (e.g., "Settings", etc.) seem to be missing the hover state. We could also round the top corners a bit.
2. This might be on the component level (and not on the template), but inputs also seem to be missing hover styles. Like, I find it a bit weird that the Timezone select has and everything else doesn't. To verify if that's already correct and just not working here for some reason (similarly above).
3. I think we could add a top divider on the gray container holding the "Cancel" and "Save" buttons! Just a bit of polish.

[zanivan]

The profile tabs (e.g., "Settings", etc.) seem to be missing the hover state. We could also round the top corners a bit.

I don't know if it's a bug, but the only tab without a hover state is the selected one

This might be on the component level (and not on the template), but inputs also seem to be missing hover styles [...]

This seems to be an issue on the component level. The select has a hover state, but the input, autocomplete, and the other doesn't. IMO, this should be tackled in a different PR if so.