feat(pubsweet-client): upgrade styled-components

BREAKING CHANGE: Replace styled-components injectGlobal with new createGlobalStyle

packages/client/package.json

@@ -42,7 +42,7 @@
     "redux-logger": "^3.0.1",
     "redux-thunk": "^2.2.0",
     "reselect": "^3.0.1",
-    "styled-components": "^3.2.5",
+    "styled-components": "^4.1.1",
     "styled-normalize": "^3.0.1",
     "subscriptions-transport-ws": "^0.9.12"
   },

packages/client/src/components/Root.js

@@ -12,9 +12,8 @@ import { getMainDefinition } from 'apollo-utilities'
 import { setContext } from 'apollo-link-context'
 import { InMemoryCache } from 'apollo-cache-inmemory'
 import { createUploadLink } from 'apollo-upload-client'
-import StyleRoot, { injectGlobalStyles } from '../helpers/StyleRoot'
-
-injectGlobalStyles()
+import { Normalize } from 'styled-normalize'
+import StyleRoot from '../helpers/StyleRoot'
 
 // Construct an ApolloClient. If a function is passed as the first argument,
 // it will be called with the default client config as an argument, and should
@@ -71,6 +70,7 @@ const Root = ({
     <Provider store={store}>
       <ConnectedRouter history={history}>
         <ThemeProvider theme={theme}>
+          <Normalize />
           <StyleRoot>{routes}</StyleRoot>
         </ThemeProvider>
       </ConnectedRouter>

packages/client/src/helpers/StyleRoot.js

-import styled, { injectGlobal } from 'styled-components'
-import styledNormalize from 'styled-normalize'
+import styled from 'styled-components'
 import { th } from '@pubsweet/ui-toolkit'
 
-const injectGlobalStyles = () => injectGlobal`
-  ${styledNormalize}
-`
-
 const StyleRoot = styled.div`
   background-color: ${th('colorBackground')};
   font-family: ${th('fontInterface')}, sans-serif;
@@ -19,4 +14,3 @@ const StyleRoot = styled.div`
 `
 
 export default StyleRoot
-export { injectGlobalStyles }