restructure current theme.js to follow MUI theme structure.

[tonyvugithub]

What would you like to be added:
A matching theming attributes to MUI default theme structure
Change our current theming from ...

const theme = createMuiTheme({
  palette: {
    primary: {
      main: '#333E64',
    },
    secondary: {
      main: '#0589D6',
    },
    error: {
      main: red.A400,
    },
    background: {
      default: '#E5E5E5',
    },
    text: {
      primary: '#E5E5E5',
      secondary: '#8BC2EB',
      default: '#181818',
    },
  },
});

to Something similar to the following...

Luckily it seems that we only have a conflict in text attribute, there is no default key in text
Why would you like this to be added:
This will help with Typescript when we migrate to Nextjs and allow light/dark mode switching easily