feat(ui): upgrade styled-components

Upgrade to styled components and create new GlobalStyle component in @pubsweet/ui

BREAKING CHANGE: Replace styled-components injectGlobal with new createGlobalStyle

packages/ui/package.json

@@ -33,7 +33,7 @@
     "recompose": "^0.26.0",
     "redux": "^3.6.0",
     "redux-form": "^7.0.3",
-    "styled-components": "^3.2.5"
+    "styled-components": "^4.1.1"
   },
   "devDependencies": {
     "@pubsweet/styleguide": "^3.2.0",

packages/ui/src/atoms/GlobalStyle.js

+import { createGlobalStyle } from 'styled-components'
+import { th } from '@pubsweet/ui-toolkit'
+
+const GlobalStyle = createGlobalStyle`
+  body {
+    color: ${th('colorText')};
+  }
+`
+
+export default GlobalStyle

packages/ui/src/atoms/GlobalStyle.md

+A placeholder for global styles to be imported into the project.

packages/ui/src/atoms/index.js

@@ -7,6 +7,7 @@ export { default as Badge } from './Badge'
 export { default as Button } from './Button'
 export { default as Checkbox } from './Checkbox'
 export { default as File } from './File'
+export { default as GlobalStyle } from './GlobalStyle'
 export { default as Radio } from './Radio'
 export { default as Tags } from './Tags'
 export { default as Tab } from './Tab'