Add css for DatePicker component

[nadijagraca]

Description

Added css for DatePicker component.

To do:

• Add style for selected month and year

Screenshot

Notice

• I acknowledge and agree that, by checking this box and clicking "Submit Pull Request":

  • I submit this contribution under the Apache 2.0 license and represent that I am entitled to do so on behalf of myself, my employer, or relevant third parties, as applicable.
  • I certify that (a) this contribution is my original creation and / or (b) to the extent it is not my original creation, I am authorized to submit this contribution on behalf of the original creator(s) or their licensees.
  • I certify that the use of this contribution as authorized by the Apache 2.0 license does not violate the intellectual property rights of anyone else.
  • I have not referenced individuals, products or companies in any commits, directly or indirectly.
  • I have not added data or restricted code in any commits, directly or indirectly.

[huong-li-nguyen]

Hey @nadijagraca - great job getting this done! ✨

I've added a bit more CSS as the hover states were missing. The styling of actively selected month / date doesn't seem to be supported anymore, as the component are not marked as "active". Hence, we can also add no styling for that. I don't think it's that bad though. So for me it's ready to merge 👍

I've also added a global font family for all dmc components.

[AnnMarieW]

This looks nice!

It's not necessary to make updates to this unless other issues are addressed in the PR. But if this looks like it might get merged then I have just a couple comments:

1. Would it be possible to keep the default grey color?

theme = {"primaryColor": "gray"}

This would make is to that it's a better match to the Vizro theme if people add other custom Mantine components. Otherwise those components will have the default blue accent color.

2. Selectors that looks like this .m_396ce5cb should not be used because they are not static and can change in different versions. The static selectors are listed in the Styles API section: https://mantine.dev/dates/date-picker-input/?t=styles-api

[huong-li-nguyen]

2. Selectors that looks like this .m_396ce5cb should not be used because they are not static and can change in different versions. The static selectors are listed in the Styles API section: https://mantine.dev/dates/date-picker-input/?t=styles-api

Hey @AnnMarieW,

Thank you for your comments! We've now implemented all your suggestions 👍. Initially, we used selectors like .m_396ce5cb because certain media queries (used to calculate hover states) relied on these selectors and had higher specificity. As a result, the static selectors from the Styles API section weren't enough to override them.

I've now applied !important tags, which works well. It's also easier to read now 👍.

I think you would have to click on the merge button for us @AnnMarieW, as we don't have push/write access to your fork :)

[antonymilne]

This is superseded by mckinsey#959.