Refactor styles to follow MUI

[VakarisZ]

Refactor

something.module.scss don't follow the styling practices outlined in MUI documentation, usage of themes are a lot harder from there. Instead, we should refactor our styling approach as outlined in MUI customization guide

Tasks

• Replace something.module.scss files with style objects importable by MUI objects
• Extend/validate styling/UI guidelines to explain best approaches and provide links to useful documentation @VakarisZ

[cakekoa]

To clarify, you're suggesting we move from using CSS files to applying styles to components using the MUI styled() function? Thoughts, @ordabach?

On the plus side, this should sidestep our issue with component tests failing due to the incompatibility with cypress and nextjs 13+.

Note: Styles are provided via the styles parameter, and look like:

{
  width: 300,
  color: theme.palette.success.main,
  '& .MuiSlider-thumb': {
    '&:hover, &.Mui-focusVisible': {
      boxShadow: `0px 0px 0px 8px ${alpha(theme.palette.success.main, 0.16)}`,
    },
    '&.Mui-active': {
      boxShadow: `0px 0px 0px 14px ${alpha(theme.palette.success.main, 0.16)}`,
    },
  },
}