Consolidate styling

[Harjot1Singh]

Is your feature request related to a problem? Please describe.
Common Material UI components are being styled at the local component level. This means that for every dialog we make, we have to restyle it with the same properties. It also means that we make more mistakes when it comes to regression and ensuring our theme has full coverage in our app.

Describe the solution you'd like
Global application of Material UI styles, using the themes.

Describe alternatives you've considered

• Continuing the same way: yuck
• CSS-in-JS: too big a migration effort and would require us to change our theme format yet again. But it does allow us to parse themes properly etc.

Additional context
We have a lot of these component styles defined in SettingsComponent.css.

[saihaj]

Please also see https://cssinjs.org/?v=v10.1.1, which i've used succesfully in other projects btw, this is lit. Think it's the way forward, but not a priority rn. It'd help us from having to style each thing individually
View in Slack

[saihaj]

I think in the future, we should start thinking about bundling up our own component library/UI presets etc.
shabados/theme-tool#47 (review)

We can get rid of MaterialUI all together and just use CSS-in-JS with ShabadOS-styles lib since it will be helpful for website redesign and other projects (DB viewer, theme tool, connect and future projects)