Upgrade to styled-components v4.2.0

.storybook/config.js

@@ -5,9 +5,14 @@ import { configure, addDecorator } from '@storybook/react';
 import { COLORS } from '../src/constants';
 import Wrapper from './components/Wrapper';
 
-import '../src/global-styles';
+import GlobalStyles from '../src/components/GlobalStyles';
 
-const WrapperDecorator = storyFn => <Wrapper>{storyFn()}</Wrapper>;
+const WrapperDecorator = storyFn => (
+  <Fragment>
+    <GlobalStyles />
+    <Wrapper>{storyFn()}</Wrapper>
+  </Fragment>
+);
 
 addDecorator(WrapperDecorator);
 

package.json

@@ -60,7 +60,7 @@
     "gatsby-cli": "1.1.58",
     "js-yaml": "3.12.0",
     "ps-tree": "1.2.0",
-    "react-beautiful-dnd": "10.1.1",
+    "react-beautiful-dnd": "11.0.1",
     "react-custom-scrollbars": "4.2.1",
     "rimraf": "2.6.2",
     "yarn": "1.12.3"
@@ -94,8 +94,8 @@
     "electron-builder": "20.31.3",
     "electron-ipc-mock": "0.0.3",
     "electron-log": "2.2.17",
-    "enzyme": "3.8.0",
-    "enzyme-adapter-react-16": "1.8.0",
+    "enzyme": "3.9.0",
+    "enzyme-adapter-react-16": "1.12.1",
     "enzyme-to-json": "3.3.4",
     "eslint": "5.7.0",
     "eslint-config-react-app": "3.0.4",
@@ -107,7 +107,7 @@
     "eslint-plugin-react": "7.11.1",
     "extract-text-webpack-plugin": "3.0.2",
     "file-loader": "1.1.6",
-    "flow-bin": "0.83.0",
+    "flow-bin": "0.95.1",
     "foreman": "2.0.0",
     "fs-extra": "5.0.0",
     "graphql": "0.12.3",
@@ -133,10 +133,10 @@
     "prettier": "1.13.7",
     "raf": "3.4.0",
     "random-seed": "0.3.0",
-    "react": "16.3.2",
+    "react": "16.8.6",
     "react-dev-utils": "6.0.0-next.66cc7a90",
     "react-docgen": "2.21.0",
-    "react-dom": "16.3.2",
+    "react-dom": "16.8.6",
     "react-icons-kit": "1.1.5",
     "react-instantsearch": "5.1.0",
     "react-motion": "0.5.2",
@@ -161,7 +161,7 @@
     "sass-loader": "7.0.0",
     "slug": "0.9.1",
     "style-loader": "0.19.1",
-    "styled-components": "3.2.6",
+    "styled-components": "4.2.0",
     "svgr": "1.8.1",
     "sw-precache-webpack-plugin": "0.11.4",
     "thread-loader": "1.1.2",

src/components/BigClickableButton/BigClickableButton.js

@@ -135,12 +135,15 @@ const OuterWrapper = styled.div`
   padding-bottom: ${props => props.thickness}px;
 `;
 
-export const Wrapper = animated(styled.div`
+export const Wrapper = styled(animated.div).attrs(({ offset }) => ({
+  style: {
+    transform: offset.interpolate(o => `translate(${o}px, ${o}px)`),
+  },
+}))`
   position: relative;
   width: ${props => props.width}px;
   height: ${props => props.height}px;
-  transform: ${props => `translate(${props.offset}px, ${props.offset}px)`};
-`);
+`;
 
 export const Button = styled.button`
   width: ${props => props.width}px;