[dependency] Upgrade Material UI to v.7

[veronikaslc]

Updated dependencies:
@mui/x-date-pickers
@mui/lab
@mui/icons-material
@mui/material
jss -> tss-react

Removed deprecated dependency:
@mui/styles

Manuals used:
https://mui.com/material-ui/migration/upgrade-to-v6/
https://mui.com/material-ui/migration/migrating-from-deprecated-apis
https://mui.com/material-ui/migration/upgrade-to-v7/
https://mui.com/material-ui/migration/migrating-from-jss/
https://mui.com/x/migration/migration-data-grid-v6/

[sdumitriu]

In a future PR, since MUI is moving from individual somethingProps to slotProps, we should also change the way we pass component props between our component to something similar, for example here we have textFieldProps, and in AdminResourceListing we have buttonProps.

[veronikaslc]

In general as we are developing the app for the users we should prioritise the usability over our personal preferences of any points. As far as I understand the goal, it is not what we personally like or aesthetically prefer is important but what is comfortable for the end user group and brings an effective and productive clear user experience in a first place. If we focus on the most effective workflow of filling the questionnaires, the text presentation is playing the center role here. The spacing, the alignment and decorations all are the equally influetial on user-computer interaction effectiveness.

There was a research conducted to stydy how text alignment is affecting the content disgesting and impacts how the brain processes information visually and cognitively for the production of web pages. This study highlights the importance of prioritizing readability over pure aesthetics in text alignment. The spoiler is that left-aligned body text led to better performance, although participants preferred justified text. Anything text-centered which is more than 3 lines will create additional load of eye movement, brain processing and extra hardness to follow.
That expecially holds for those with reading difficulties or who may use screen readers. Centering can be a barrier for users with disabilities, as it can make it harder for them to scan and read the text.

When centering could be an excellent tool for placing short call-for-attension elements to emphacize, like a link/action button, shourt quote, or navigate, like topic headings, it is not favourable to use centering for listing numerous user instructions or presenting introduction texts. Those are usual common design priciples of web presentations as I see them in current.

[marta-]

In general as we are developing the app for the users we should prioritise the usability over our personal preferences of any points

And that is why I suggested to create a separate task to improve the layout. This is about upgrading a dependency and should remain focused on its purpose.

[veronikaslc]

This is about upgrading a dependency and should remain focused on its purpose.

Total support :)

[sdumitriu]

I get this error when first displaying some of the tables:

There was a problem inserting the following rule: ".tss-gur5lp-MuiTablePagination-root . MuiTablePagination-select{margin:0 1px;}" DOMException: An invalid or illegal string was specified

I think it's not from our code, but a bug in MuiTable? To trigger it, start adding a new Questionnaire from the dashboard, it shows as soon as the list of questionnaires is loaded, or go to Administration -> Questionnaires, Users, Clinics or other pages with a table.

[sdumitriu]

These 2 aren't even used, they should be removed in a separate PR.

[marta-]