Set up Material UI Theme in accordance with the Style Guide

[entrotech]

Overview

The UX/UI team has almost finalized a Style Guide here https://www.figma.com/file/D3oq9QOXl0rFkwrEUJbABs/Fola-Design-System?node-id=174%3A0
(Replace the above link with a link to the finalized style guide when available). The code in the application uses the Material-UI library, which can support themes to ensure consistency of some aspects of the component styling. It has been suggested that much of the application styling can be accomplished through customizing a Material UI theme to be consistent with the style guide.

Other aspects of the styling (maybe page layout, margins,etc.) probably need additional styling with styled components or JSS or something, but we probably need to decide on the preferred approach and use it consistently across the application. This issue is "leading the way" in standardizing on a styling approach for the whole project.

Action Items

• Review any existing Material UI theming and compare to the colors, fonts, etc. in the style guide.
• Decide what aspects of the style guide can be implemented via the Material UI theme, and implement them.
• Determine what other aspects of styling and layout cannot be accomplished via the theme, and determine the preferred approach (styled components, JSS, etc.). It needs to support media queries, pseudo classes, etc..
• Use the Verification Admin dashboard as a first component to try all this out on (Also created as a separate issue (Improve Styling of VerificationAdmin component #518 )

Resources/Instructions

https://www.figma.com/file/D3oq9QOXl0rFkwrEUJbABs/Fola-Design-System?node-id=174%3A0

[motorcykey]

Based on how Material UI maps out their "variants" and styles their button components, here's how I best found to map the typography styles to the Material UI variants which I can re-style:

• h1 = Heading 1
• h2 = Heading 2
• h3 = Heading 3
• h4 = Body Big 1
• h5 = Body Big 2
• h6 = Body Small 1
• body1 = Body Small 2
• body2 = Body Small Italic
• BUTTON = BUTTON SMALL
• OVERLINE = BUTTON BIG
• Caption = Small Text
• Default Typography (no variant) = Body Small 2

I've created a JS file which will hold all of the colors so we can easily look up & edit our hex codes which will be used through the theme and any custom components.

When I say "custom components" I'm referring to anything more complex than what Material UI offers out-of-the-box. What we're able to do is create re-usable custom versions of Material UI's components that extend their out-of-box features. As an example, I started work on a CustomButton which covers a lot of the cases shown for the non-toggle states in the style guide (Primary, Secondary, Button, Big/Small, etc) - all within a singular component.

Since I don't want to update the existing app's theme before MVP, I'll work on committing this code change in the next day or two as a new/separate theme file & component library from what's already in there.