[DateTimePicker] Fix not visible selected tab icon

[nikitabobers]

Closes #26283

Preview: https://deploy-preview-26624--material-ui.netlify.app/components/date-time-picker/#basic-usage

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

My suggestion:

• Replace blue background and red indicator, because it is not readble in my opinion. For example unselected black icon on dark blue backround is hard to read.

• In clock view time format buttons (PM/AM) are with the same backround colour as tabs:

• Use white background and blue indicator instead.

Let me know what dou you think about it 😉

[mui-pr-bot]

Details of bundle changes (experimental)

Generated by 🚫 dangerJS against 1cb3a2d

[oliviertassinari]

@nikitabobers It looks already much better. I have tried something else

• remove paper box-shadow elevation
• move indicator to the top
• add border-top: box-shadow: 0px 1px 0px 0px inset rgb(0 0 0 / 12%)
• fix sizes

What do you think?

the am/pm toggle so far away from one another seems plain wrong, but that's a different topic.

[nikitabobers]

@oliviertassinari I agree. Now it's even better and easy for user to see which Tab are selected.

I'll to commit that changes.

For AM/PM buttons should we open another issue ?

[oliviertassinari]

For AM/PM buttons should we open another issue?

@nikitabobers Yes, it's off-topic to these changes. As for opening another issue, since the time picker is 1/5 of the use case for the date picker, I would say no real need, we might want to focus more on the date picker.

[oliviertassinari]

I have pushed the solution the extra mile. You can see one commit per improvement.

[mnajdova]

@nikitabobers it's a great first pull request on Material-ui 👌 Thank you for working on it!

[nikitabobers]

Thank you!