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
MyCryptoHQ · Nov 7, 2017 · 2075a41 · 2075a41
1 parent 4ee38ec
commit 2075a41
Show file tree

Hide file tree

Showing 8 changed files with 2,313 additions and 979 deletions.
diff --git a/common/actions/notifications/actionCreators.ts b/common/actions/notifications/actionCreators.ts
@@ -13,7 +13,8 @@ export function showNotification(
     payload: {
       level,
       msg,
-      duration
+      duration,
+      id: Math.random()
     }
   };
 }

diff --git a/common/actions/notifications/actionTypes.ts b/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;
 }
 

diff --git a/common/containers/TabSection/Notifications.scss b/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;
+    }
+  }
+}
diff --git a/common/containers/TabSection/Notifications.tsx b/common/containers/TabSection/Notifications.tsx
@@ -5,28 +5,38 @@ 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';
 
 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">
-        {this.props.notifications.map((n, i) => (
-          <NotificationRow
-            key={`${n.level}-${i}`}
-            notification={n}
-            onClose={this.props.closeNotification}
-          />
-        ))}
-      </div>
+      <TransitionGroup className="Notifications">
+        {this.props.notifications.map(n => {
+          return (
+            <Transition key={n.id}>
+              <NotificationRow
+                notification={n}
+                onClose={this.props.closeNotification}
+              />
+            </Transition>
+          );
+        })}
+      </TransitionGroup>
     );
   }
 }

diff --git a/common/containers/Tabs/SendTransaction/index.tsx b/common/containers/Tabs/SendTransaction/index.tsx
@@ -307,14 +307,14 @@ export class SendTransaction extends React.Component<Props, State> {
                     onChange={readOnly ? void 0 : this.onGasChange}
                   />
                   {(offline || forceOffline) && (
-                    <div>
-                      <NonceField
-                        value={nonce}
-                        onChange={this.onNonceChange}
-                        placeholder={'0'}
-                      />
-                    </div>
-                  )}
+                      <div>
+                        <NonceField
+                          value={nonce}
+                          onChange={this.onNonceChange}
+                          placeholder={'0'}
+                        />
+                      </div>
+                    )}
                   {unit === 'ether' && (
                     <DataField
                       value={data}

diff --git a/common/sass/styles/overrides/buttons.scss b/common/sass/styles/overrides/buttons.scss
@@ -88,7 +88,6 @@
   &:hover,
   &:focus,
   &.focus {
-    color: white;
     text-decoration: none;
     opacity: 1;
   }