ThemeProvider (#677)

closes #655

app/components/Toasts/Toasts.js

@@ -2,7 +2,6 @@
 import * as React from 'react';
 import { observer } from 'mobx-react';
 import styled from 'styled-components';
-import { layout } from 'shared/styles/constants';
 import Toast from './components/Toast';
 import UiStore from '../../stores/UiStore';
 
@@ -34,8 +33,8 @@ class Toasts extends React.Component<Props> {
 
 const List = styled.ol`
   position: fixed;
-  left: ${layout.hpadding};
-  bottom: ${layout.vpadding};
+  left: ${props => props.theme.hpadding};
+  bottom: ${props => props.theme.vpadding};
   list-style: none;
   margin: 0;
   padding: 0;

app/components/Toasts/components/Toast.js

@@ -2,7 +2,6 @@
 import * as React from 'react';
 import styled from 'styled-components';
 import { darken } from 'polished';
-import { color } from 'shared/styles/constants';
 import { fadeAndScaleIn } from 'shared/styles/animations';
 import type { Toast as TToast } from '../../../types';
 
@@ -51,14 +50,14 @@ const Container = styled.li`
   animation: ${fadeAndScaleIn} 100ms ease;
   margin: 8px 0;
   padding: 8px;
-  color: ${color.white};
-  background: ${props => color[props.type]};
+  color: ${props => props.theme.white};
+  background: ${props => props.theme[props.type]};
   font-size: 15px;
   border-radius: 5px;
   cursor: default;
 
   &:hover {
-    background: ${props => darken(0.05, color[props.type])};
+    background: ${props => darken(0.05, props.theme[props.type])};
   }
 `;