Integrate System Design to Theme JSON + UI components

[shanesween]

Dependency

• [ ] #1340

Overview

This ticket will track the integration of the new system design as well as the use of the theme across multiple instances of inconsistencies in the UI components.

Action Items

• Add new design systems to theme.js
• Add new theme properties to the JSS objects in each components.
  • Typography
  • Color Palette
    • Convert all Negative Icons ('#E46247') to Error/Warning ('#B64E38')
• Below are all of the inconsistencies in the Figma file that need to be addressed: To be added.
  • Login
    • Error
  • Create Project:
    • Page 1
    • Page 3
    • Page 3 Error
    • Page 2 & 4 TBD

Resources/Instructions

[shanesween]

• This issue is related to #1340. Please review issue for more information on the System Design. Figma notes can be found here

[Noushie]

Hey @shanesween, so sorry to bother you!

I just noticed while on the dev version of the site, I'm concerned the disablement of buttons weren't super clear. I was wondering if the entire button could also be lowered in opacity, not merely the icons/text - that way there's more of a distinctive difference between the disabled and enabled states.

I can definitely add a lighter shade of green for the disabled state into the design system, if that is easier.

Thanks again

[Biuwa]

• Add to #1311

[fnaneberhane]

Dev team will add more action items to this issue.