Upgrade Material UI to v5

[jescalada]

Is your feature request related to a problem? Please describe.
Since v4 is deprecated, it would be good to upgrade MUI to v5. As mentioned in the link, this would improve UI performance and provide the latest React support.

Describe the solution you'd like
Maybe an incremental update would be best? There are a quite a few breaking changes in the components, some of which are not handled in the automatic upgrade guide.

Describe alternatives you've considered
None

Additional context
This issue was originally brought up by @sam-holmes2 in #963:

I received the following deprecated version number warning from npm:

npm warn deprecated @material-ui/styles@4.11.5: Material UI v4 doesn't receive active development since September 2021. See the guide https://mui.com/material-ui/migration/migration-v4/ to upgrade to v5.
npm warn deprecated @material-ui/core@4.12.4: Material UI v4 doesn't receive active development since September 2021. See the guide https://mui.com/material-ui/migration/migration-v4/ to upgrade to v5.

[jescalada]

Update

I tried upgrading to MUI v5 and I started getting these frontend errors:

I think most of these can be fixed by refactoring the makeStyles calls and style files with the newer styled components. Unfortunately, there are 33 of those files in total, and the styled version is essentially the same thing, except that it clutters the component files (.tsx) instead. Perhaps the best solution here is a complete refactor of the UI styling, maybe through something cleaner and more scalable like Tailwind...