Theme Provider - Material UI

[arshiamasih]

Overview

We need be able to change the look and feel for the stakeholder partner, to match their website or other branding easily. Ultimately we will need an admin screen for changing the theme of a stakeholder subdomain.

Action Items

• Requirements
  • logo
  • color palettes
  • images (possibly)
• Review Material UI to Create a theme provider

Resources

https://material-ui.com/customization/default-theme/
https://material-ui.com/
https://material.io/

How it might work

spy.homeunite.us
X.homeunite.us
takes them to a version of the application where its presorted by area and has their look and feel (theme).

[arshiamasih]

Update:
A Material UI theme provider was created and is currently scoped to the Registration flow in line with the Registration component library that was built with MUI components. The provider adapts the theming/styles per the style guide.

The provider needs to be scoped to the entire Application, however in its current version, the theme will not apply to Styled Components - though there are ways to adapt the provider across MUI/SC (or we could even consider building our own Theme Provider). This should be addressed in a separate PR.

A clarification:
The capability for a user to select a theme, or for admin to apply a theme is not the same as the development of the theme provider mechanism. The theme provider merely injects css styles to all child components as determined by theme. Therefore, these should be viewed as two separate functions and issues: 1. building a global theme provider and 2. a feature that allows users or developers to select a theme.

Consider this parallel:
Building the registration question components is not the same as an admin having capability to add/edit/delete questions. We would address these as separate issues and even separate features altogether.

Next Steps:

• This has been de-prioritized and will be revisited post MVP.
• As there has been some lack of clarity on the theme provider (both technical and non technical fronts), @arshiamasih will write documentation around our application implementation of it once it is actively back on the board.

[rpbracker]

@kpoints / @JRHutson -- should I keep this in mind as I build out the color palette to be more functional?

1. Other than logos and colors, are there any other things that should be able to be changed (like type)?
2. Should I add documentation re: color contrast and accessibility guidelines as I'm going along?