NV-1142 feat(web): migrate to mantine v5

[LetItRock]

What kind of change does this PR introduce?

• [ ] Bug
• [x] Feature
• [ ] Docs
• [ ] Other(s)

Why was this change needed?

The changes:

• [x] Update the Mantine UI library to v5
• [x] Unify the usage of different CSS in JS libraries

Other information (Screenshots)

Because of the migration from the Mantine v4 to v5, there were a lot of breaking changes. No official guidelines just the changelog files that I've used to understand what changes were required.

I've removed the styled-components package from the web app, we will use the @emotion/styled package instead which plays really nice with the Mantine.

I've left a lot of comments across the code to make it easier for you to review. I did my best to check all the places in the app, but ideally, we should test it carefully before merging to the next release.

[gitpod-io[bot]]

[linear[bot]]

NV-1142 Unify usage of css libraries

We use several different libraries throughout web and notification-center. @emotion/react, styled-components, @emotion/styled.

First, need to figure out which one we want and take into consideration Mantine's recommendation in regards to v4 (that we use now) and our upgrade to v5.

[ainouzgali]

This is so amazing @LetItRock. It looks so great! Just some very small issues I found:

Disabled switch: original v5

hover on filled button is not gradient:

Dropdown colors:

[LetItRock]

Amazing work. 👏🏻

One thing we should discuss inside the team is if to move all the Mantine dependencies to have a single entry point from our design system folder and export it to the different UI components. Thus, in the case of a future replacement of the library we would only need to touch it in the design system folder and then do the modifications needed in the specific CSS of the components. That would make PRs like this smaller in size as you had to modify a lot of files just because of what was being imported. Thinking like an adapter for the design library.

@p-fernandez Yeah, this is kind of what we already partially have, the example is the Dropdown component. I agree it will be less work to do if something will be updated, but in the case when some props will be removed you will still need to change all the places that use that component. Maybe let's bring the discussion on this topic.

[LetItRock]

@BiswaViraj @p-fernandez @ainouzgali hey, I've added all the suggestions you've mentioned 😉 please take a look when you will have some spare time 🙌