chore(styled-components): remove warnings and fix dependencies

packages/component-faraday-ui/src/FileSection.js

@@ -50,13 +50,13 @@ const FileSection = ({
   onDelete,
 }) => (
   <Root
-    innerRef={instance => {
-      connectFileDrop(instance)
-      connectDropTarget(instance)
-    }}
     isFileItemOver={isFileItemOver && canDropFileItem}
     isFirst={isFirst}
     isLast={isLast}
+    ref={instance => {
+      connectFileDrop(instance)
+      connectDropTarget(instance)
+    }}
   >
     <Row alignItems="center">
       <Item>

packages/component-faraday-ui/src/pending/Accordion.js

@@ -51,7 +51,7 @@ class Accordion extends React.Component {
     } = this.props
     const { expanded } = this.state
     return (
-      <Root expanded={expanded} innerRef={r => (this._accordion = r)} {...rest}>
+      <Root expanded={expanded} ref={r => (this._accordion = r)} {...rest}>
         <Header
           expanded={expanded}
           icon={icon}

packages/component-faraday-ui/src/pending/ControlledAccordion.js

@@ -42,7 +42,7 @@ class ControlledAccordion extends React.Component {
       ...rest
     } = this.props
     return (
-      <Root expanded={expanded} innerRef={r => (this._accordion = r)} {...rest}>
+      <Root expanded={expanded} ref={r => (this._accordion = r)} {...rest}>
         <Header expanded={expanded} icon={icon} {...rest} />
         {expanded && children}
       </Root>

packages/styleguide/src/Wrapper.js

@@ -4,8 +4,9 @@ import { reducer } from 'redux-form'
 import { Provider } from 'react-redux'
 import hindawiTheme from 'hindawi-theme'
 import { createLogger } from 'redux-logger'
-import { ThemeProvider } from 'styled-components'
+import { th } from '@pubsweet/ui-toolkit'
 import { client } from 'pubsweet-component-modal'
+import styled, { ThemeProvider } from 'styled-components'
 import { BrowserRouter as Router } from 'react-router-dom'
 import { createStore, combineReducers, applyMiddleware } from 'redux'
 
@@ -20,13 +21,25 @@ const store = createStore(
   applyMiddleware(logger),
 )
 
+const StyleRoot = styled.div`
+  background-color: ${th('colorBackground')};
+  font-family: ${th('fontInterface')}, sans-serif;
+  font-size: ${th('fontSizeBase')};
+  color: ${th('colorText')};
+  line-height: ${th('lineHeightBase')};
+
+  * {
+    box-sizing: border-box;
+  }
+`
+
 class Wrapper extends Component {
   render() {
     return (
       <Provider store={store}>
         <Router>
           <ThemeProvider theme={hindawiTheme}>
-            {this.props.children}
+            <StyleRoot>{this.props.children}</StyleRoot>
           </ThemeProvider>
         </Router>
       </Provider>