Animate transaction notifications & fix styles (#305)

* Add disclaimer modal to footer

* Remove duplicate code & unnecessary styles

* Fix formatting noise

* remove un-used css style

* Fix tslint error & add media query for modals

* Nest Media Query

* Add react-transition-group

* Animate notifications with react-transition-group

* Identify issue with notifications getting overridden

* Update RTG (react-transition-group) to v2 & identify keys as animation issue

* Add unique id on successful transactions for unique keys

* update classNames, remove unused import

* Revert removing lodash

* Remove unnecessary test util

* Remove formatting noise

* Remove all formatting noise

* Update CSS & Change notification unique id

* Add unique id for each notification

common/actions/notifications/actionCreators.ts

@@ -13,7 +13,8 @@ export function showNotification(
     payload: {
       level,
       msg,
-      duration
+      duration,
+      id: Math.random()
     }
   };
 }

common/actions/notifications/actionTypes.ts

@@ -7,6 +7,7 @@ export type INFINITY = 'infinity';
 export interface Notification {
   level: NOTIFICATION_LEVEL;
   msg: ReactElement<any> | string;
+  id: number;
   duration?: number | INFINITY;
 }
 

common/containers/TabSection/Notifications.scss

@@ -142,3 +142,25 @@
     }
   }
 }
+
+.NotificationAnimation{
+  &-enter {
+    opacity: 0.01;
+    &-active {
+      opacity: 1;
+      transition: opacity 500ms;
+    }
+  }
+}
+
+.NotificationAnimation{
+  &-exit {
+    opacity: 1;
+    transform: none;
+    &-active {
+      opacity: 0.01;
+      transform: translateY(100%);
+      transition: opacity 500ms, transform 500ms;
+    }
+  }
+}

common/containers/TabSection/Notifications.tsx

@@ -5,6 +5,7 @@ import {
 } from 'actions/notifications';
 import React from 'react';
 import { connect } from 'react-redux';
+import { TransitionGroup, CSSTransition } from 'react-transition-group';
 import NotificationRow from './NotificationRow';
 import './Notifications.scss';
 
@@ -12,21 +13,30 @@ interface Props {
   notifications: Notification[];
   closeNotification: TCloseNotification;
 }
+
+const Transition = props => (
+  <CSSTransition
+    {...props}
+    classNames="NotificationAnimation"
+    timeout={{ enter: 500, exit: 500 }}
+  />
+);
+
 export class Notifications extends React.Component<Props, {}> {
   public render() {
-    if (!this.props.notifications.length) {
-      return null;
-    }
     return (
-      <div className="Notifications">
+      <TransitionGroup className="Notifications">
-        {this.props.notifications.map((n, i) => (
+        {this.props.notifications.map(n => {
+          return (
+            <Transition key={n.id}>
               <NotificationRow
-            key={`${n.level}-${i}`}
                 notification={n}
                 onClose={this.props.closeNotification}
               />
-        ))}
+            </Transition>
-      </div>
+          );
+        })}
+      </TransitionGroup>
     );
   }
 }

common/sass/styles/overrides/buttons.scss

@@ -88,7 +88,6 @@
   &:hover,
   &:focus,
   &.focus {
-    color: white;
     text-decoration: none;
     opacity: 1;
   }

package.json

@@ -32,6 +32,7 @@
     "react-redux": "^5.0.6",
     "react-router-dom": "^4.2.2",
     "react-router-redux": "^4.0.8",
+    "react-transition-group": "^2.2.1",
     "redux": "^3.6.0",
     "redux-form": "^6.6.3",
     "redux-logger": "^3.0.1",