Merge pull request #271 from trezor/modal-fade

Modal fade animation

src/components/modals/index.js

@@ -1,10 +1,10 @@
 /* @flow */
 
 import * as React from 'react';
-import { CSSTransition } from 'react-transition-group';
 
 import styled from 'styled-components';
 import colors from 'config/colors';
+import { FADE_IN } from 'config/animations';
 
 import { UI } from 'trezor-connect';
 import * as MODAL from 'actions/constants/modal';
@@ -31,15 +31,6 @@ import Stellar from 'components/modals/external/Stellar';
 
 import type { Props } from './Container';
 
-const Fade = (props: { children: React.Node}) => (
-    <CSSTransition
-        {...props}
-        timeout={1000}
-        classNames="fade"
-    >{ props.children }
-    </CSSTransition>
-);
-
 const ModalContainer = styled.div`
     position: fixed;
     z-index: 10000;
@@ -53,6 +44,7 @@ const ModalContainer = styled.div`
     align-items: center;
     overflow: auto;
     padding: 20px;
+    animation: ${FADE_IN} 0.3s;
 `;
 
 const ModalWindow = styled.div`
@@ -192,13 +184,11 @@ const Modal = (props: Props) => {
     }
 
     return (
-        <Fade key="modal-fade">
-            <ModalContainer>
-                <ModalWindow>
-                    { component }
-                </ModalWindow>
-            </ModalContainer>
-        </Fade>
+        <ModalContainer>
+            <ModalWindow>
+                { component }
+            </ModalWindow>
+        </ModalContainer>
     );
 };
 

src/config/animations.js

@@ -56,4 +56,13 @@ export const PULSATE = keyframes`
     50% {
         opacity: 1.0;
     }
+`;
+
+export const FADE_IN = keyframes`
+    0% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
 `;