Refactor base styles

app/components/DropToImport/DropToImport.js

@@ -1,6 +1,8 @@
 // @flow
 import React, { Component } from 'react';
 import { inject } from 'mobx-react';
+import { injectGlobal } from 'styled-components';
+import { color } from 'shared/styles/constants';
 import invariant from 'invariant';
 import _ from 'lodash';
 import Dropzone from 'react-dropzone';
@@ -20,6 +22,17 @@ type Props = {
   history: Object,
 };
 
+injectGlobal`
+  .activeDropZone {
+    background: ${color.slateDark};
+    svg { fill: ${color.white}; }
+  }
+
+  .activeDropZone a {
+    color: ${color.white} !important;
+  }
+`;
+
 class DropToImport extends Component {
   state: {
     isImporting: boolean,

app/components/Modal/Modal.js

@@ -1,7 +1,7 @@
 // @flow
 import React from 'react';
 import { observer } from 'mobx-react';
-import styled from 'styled-components';
+import styled, { injectGlobal } from 'styled-components';
 import ReactModal from 'react-modal';
 import { color } from 'shared/styles/constants';
 import { fadeAndScaleIn } from 'shared/styles/animations';
@@ -15,6 +15,12 @@ type Props = {
   onRequestClose: () => void,
 };
 
+injectGlobal`
+  .ReactModal__Body--open {
+    overflow: hidden;
+  }
+`;
+
 const Modal = ({
   children,
   isOpen,

shared/styles/base.js

@@ -68,16 +68,4 @@ export default `
     margin-top: 1em;
     margin-bottom: 1em;
   }
-
-  .activeDropZone {
-    background: #4E5C6E;
-  }
-
-  .activeDropZone a {
-    color: #FFF !important;
-  }
-
-  .ReactModal__Body--open {
-    overflow: hidden;
-  }
 `;