optimezed smooth animation

config/webpackDevServer.config.js

@@ -1,6 +1,6 @@
 'use strict';
 
-const errorOverlayMiddleware = require('react-error-overlay/middleware');
+const errorOverlayMiddleware = require('react-dev-utils/errorOverlayMiddleware');
 const noopServiceWorkerMiddleware = require('react-dev-utils/noopServiceWorkerMiddleware');
 const config = require('./webpack.config.dev');
 const paths = require('./paths');

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-redux-modal-flex",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description":
     "Accessible modal dialog component for React Redux, Easy to install and use with Redux",
   "keywords": [
@@ -19,7 +19,7 @@
   "dependencies": {
     "classnames": "^2.2.5",
     "prop-types": "^15.5.10",
-    "ramda": "^0.24.1",
+    "ramda": "^0.25.0",
     "react": "^16.0.0",
     "react-dom": "^16.0.0",
     "react-redux": "^5.0.5",
@@ -29,18 +29,18 @@
     "styled-components": "^2.1.1"
   },
   "devDependencies": {
-    "autoprefixer": "7.1.1",
+    "autoprefixer": "7.1.6",
     "babel-core": "6.25.0",
     "babel-eslint": "7.2.3",
     "babel-jest": "20.0.3",
-    "babel-loader": "7.0.0",
+    "babel-loader": "7.1.2",
     "babel-plugin-ramda": "^1.3.0",
     "babel-preset-react-app": "^3.0.1",
     "babel-runtime": "6.23.0",
     "case-sensitive-paths-webpack-plugin": "2.1.1",
     "chalk": "1.1.3",
     "cross-env": "^5.0.3",
-    "css-loader": "0.28.4",
+    "css-loader": "0.28.7",
     "dotenv": "4.0.0",
     "eslint": "3.19.0",
     "eslint-config-react-app": "^1.0.5",
@@ -52,20 +52,20 @@
     "extract-text-webpack-plugin": "2.1.2",
     "file-loader": "0.11.2",
     "fs-extra": "3.0.1",
-    "html-webpack-plugin": "2.29.0",
+    "html-webpack-plugin": "2.30.1",
     "jest": "20.0.4",
     "object-assign": "4.1.1",
-    "postcss-flexbugs-fixes": "3.0.0",
-    "postcss-loader": "2.0.6",
+    "postcss-flexbugs-fixes": "3.2.0",
+    "postcss-loader": "2.0.8",
     "promise": "7.1.1",
-    "react-dev-utils": "^3.0.2",
-    "react-error-overlay": "^1.0.9",
-    "style-loader": "0.18.2",
-    "sw-precache-webpack-plugin": "0.11.3",
-    "url-loader": "0.5.9",
+    "react-dev-utils": "^4.2.1",
+    "react-error-overlay": "^3.0.0",
+    "style-loader": "0.19.0",
+    "sw-precache-webpack-plugin": "0.11.4",
+    "url-loader": "0.6.2",
     "webpack": "2.6.1",
-    "webpack-dev-server": "2.5.0",
-    "webpack-manifest-plugin": "1.1.0",
+    "webpack-dev-server": "2.9.4",
+    "webpack-manifest-plugin": "1.3.2",
     "whatwg-fetch": "2.0.3"
   },
   "peerDependencies": {

src/package/styled.js

@@ -3,8 +3,10 @@ import { injectGlobal } from 'styled-components';
 // eslint-disable-next-line
 injectGlobal`
   .animated {
-  animation-fill-mode: both;
-}
+    animation-duration: 1s;
+    animation-fill-mode: both;
+    will-change: transform, opacity;
+  }
 
 .animated.infinite {
   animation-iteration-count: infinite;

src/scenes/Auth/components/LoginModal/index.jsx

@@ -54,7 +54,7 @@ class LoginModal extends React.Component {
   render() {
     return (
       <Form action="">
-        <h3>Validation form before enable Login button</h3>
+        <h3>Validation form</h3>
         <div>
           <label htmlFor="username">Username: </label>
           <input