[DDW-1092] Make all notification UI/UX the same (#1748)

* [DDW-1092] INIT

* [DDW-1092] Progress

* [DDW-1092] Progress

* [DDW-1092] Move notification logic

* [DDW-1092] Register Copy Address notification

* [DDW-1092] CHANGELOG entry

* [DDW-1092] Progress

* [DDW-1092] Translation manager

* [DDW-1092] Download logs notifications

* [DDW-1092] Progress

* [DDW-1092] Remove unused package

* [DDW-1092] Simplify logic

* [DDW-1092] Handles multiple notifications

* [DDW-1092] Fixed ellipsis

* [DDW-1092] Fix disable button color

* [DDW-1092] Fix disable button color

CHANGELOG.md

@@ -5,6 +5,7 @@ Changelog
 
 ### Features
 
+- Implemented all notifications to be on the top of the app and in front of any other element ([PR 1748](https://github.com/input-output-hk/daedalus/pull/1748))
 - Added stake pool metadata registry for "SelfNode" network ([PR 1771](https://github.com/input-output-hk/daedalus/pull/1771/))
 - Added list stake pools API endpoint errors handlers ([PR 1765](https://github.com/input-output-hk/daedalus/pull/1765))
 - Added "Terms of use" for the Incentivized Testnet v1 - Rewards network ([PR 1741](https://github.com/input-output-hk/daedalus/pull/1741))

source/renderer/app/App.js

@@ -13,7 +13,7 @@ import translations from './i18n/translations';
 import ThemeManager from './ThemeManager';
 import AboutDialog from './containers/static/AboutDialog';
 import DaedalusDiagnosticsDialog from './containers/status/DaedalusDiagnosticsDialog';
-import GenericNotificationContainer from './containers/notifications/GenericNotificationContainer';
+import NotificationsContainer from './containers/notifications/NotificationsContainer';
 import AutomaticUpdateNotificationDialog from './containers/notifications/AutomaticUpdateNotificationDialog';
 import NewsOverlayContainer from './containers/news/NewsOverlayContainer';
 import { DIALOGS } from '../../common/ipc/constants';
@@ -73,7 +73,7 @@ export default class App extends Component<{
                     isActiveDialog(DAEDALUS_DIAGNOSTICS) && (
                       <DaedalusDiagnosticsDialog key="daedalusDiagnosticsDialog" />
                     ),
-                    <GenericNotificationContainer key="genericNotification" />,
+                    <NotificationsContainer key="notificationsContainer" />,
                   ]
                 )}
                 {canShowNews && [

source/renderer/app/actions/app-actions.js

@@ -7,7 +7,7 @@ export default class AppActions {
   downloadLogs: Action<any> = new Action();
   getGpuStatus: Action<any> = new Action();
   initAppEnvironment: Action<any> = new Action();
-  setNotificationVisibility: Action<boolean> = new Action();
+  setIsDownloadingLogs: Action<boolean> = new Action();
   toggleNewsFeed: Action<boolean> = new Action();
   closeNewsFeed: Action<any> = new Action();
 

source/renderer/app/actions/network-status-actions.js

@@ -9,4 +9,5 @@ export default class NetworkStatusActions {
   restartNode: Action<any> = new Action();
   nodeImplementationUpdate: Action<any> = new Action();
   toggleSplash: Action<any> = new Action();
+  copyStateDirectoryPath: Action<any> = new Action();
 }

source/renderer/app/actions/notifications-actions.js

@@ -1,11 +1,14 @@
 // @flow
 import Action from './lib/Action';
+import type {
+  NotificationConfig,
+  NotificationId,
+} from '../types/notificationTypes';
 
 // ======= NOTIFICATIONS ACTIONS =======
 
 export default class NotificationsActions {
-  open: Action<{ id: string, duration?: number }> = new Action();
-  updateDataForActiveNotification: Action<{ data: Object }> = new Action();
-  closeActiveNotification: Action<{ id: string }> = new Action();
-  resetActiveNotification: Action<any> = new Action();
+  registerNotification: Action<NotificationConfig> = new Action();
+  closeActiveNotification: Action<any> = new Action();
+  closeNotification: Action<{ id: NotificationId }> = new Action();
 }

source/renderer/app/actions/wallets-actions.js

@@ -56,6 +56,7 @@ export default class WalletsActions {
     note: string,
     filePath: string,
   }> = new Action();
+  copyAddress: Action<{ address: string }> = new Action();
   updateCertificateStep: Action<any> = new Action();
   closeCertificateGeneration: Action<any> = new Action();
   closeRewardsCsvGeneration: Action<any> = new Action();

source/renderer/app/components/notifications/Notification.js

@@ -0,0 +1,95 @@
+// @flow
+import React, { Component, Fragment } from 'react';
+import type { Node } from 'react';
+import SVGInline from 'react-svg-inline';
+import classNames from 'classnames';
+import styles from './Notification.scss';
+import closeCross from '../../assets/images/close-cross.inline.svg';
+
+export type NotificationMessageProps = {
+  icon?: string,
+  clickToClose?: boolean,
+  hasCloseButton?: boolean,
+  hasEllipsis?: boolean,
+  themeOverride?: 'grey', // if left empty, the noticiation will have its normal colors
+  labelValues?: Object,
+  hasSpinner?: boolean,
+};
+
+type Props = {
+  ...$Exact<NotificationMessageProps>,
+  children?: Node,
+  onClose?: Function,
+  isVisible: boolean,
+  index: number,
+};
+
+export default class Notification extends Component<Props> {
+  static defaultProps = {
+    clickToClose: true,
+    hasCloseButton: true,
+    hasEllipsis: false,
+    hasSpinner: false,
+  };
+
+  render() {
+    const {
+      icon,
+      children,
+      clickToClose,
+      hasCloseButton,
+      hasEllipsis,
+      onClose,
+      index,
+      themeOverride,
+      isVisible,
+      hasSpinner,
+    } = this.props;
+
+    const notificationMessageStyles = classNames([
+      styles.component,
+      isVisible ? styles.isVisible : null,
+      clickToClose ? styles.clickToClose : null,
+      themeOverride ? styles[`theme-override-${themeOverride}`] : null,
+    ]);
+
+    const messageStyles = classNames([
+      styles.message,
+      hasEllipsis ? styles.hasEllipsis : null,
+    ]);
+
+    const iconStyles = classNames([
+      styles.icon,
+      hasSpinner ? styles.spinnerIcon : null,
+    ]);
+
+    return (
+      <div
+        className={notificationMessageStyles}
+        onClick={() => clickToClose && onClose && onClose()}
+        role="link"
+        aria-hidden
+        style={{
+          zIndex: 9999999 + index,
+        }}
+      >
+        {isVisible && (
+          <Fragment>
+            {icon && <SVGInline svg={icon} className={iconStyles} />}
+
+            <div className={messageStyles}>{children}</div>
+
+            {hasCloseButton && (
+              <button
+                className={styles.closeButton}
+                onClick={() => onClose && onClose()}
+              >
+                <SVGInline svg={closeCross} />
+              </button>
+            )}
+          </Fragment>
+        )}
+      </div>
+    );
+  }
+}

source/renderer/app/components/widgets/NotificationMessage.scss → source/renderer/app/components/notifications/Notification.scss

@@ -1,3 +1,5 @@
+@import '../../themes/mixins/animations';
+
 .component {
   background-color: var(--theme-notification-message-background-color);
   box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.25);
@@ -11,6 +13,11 @@
   transition: all 200ms linear;
   width: 100%;
 
+  &.isVisible {
+    height: 62px;
+    padding: 9px 0;
+  }
+
   &.theme-override-grey {
     background-color: rgba(94, 96, 102, 0.95);
 
@@ -25,11 +32,6 @@
   }
 }
 
-.show {
-  height: 62px;
-  padding: 9px 0;
-}
-
 .clickToClose {
   cursor: pointer;
   &:hover {
@@ -82,3 +84,26 @@
     }
   }
 }
+
+.spinnerIcon {
+  flex-shrink: 0;
+  height: 22px;
+  margin-top: 10px;
+  width: 22px;
+  & > svg {
+    height: inherit;
+    width: inherit;
+    path {
+      fill: var(--theme-notification-message-text-color);
+    }
+  }
+}
+
+.spinnerIcon :global {
+  animation: loading-spin 1.5s linear;
+  animation-iteration-count: infinite;
+}
+
+.hasEllipsis {
+  @include animated-ellipsis($width: 16px);
+}

source/renderer/app/components/notifications/NotificationTransitions.scss

@@ -0,0 +1,14 @@
+.enter {
+  height: 0;
+}
+.enterActive {
+  height: 62px;
+  padding: 9px 0;
+}
+.exit {
+  height: 62px;
+  padding: 9px 0;
+}
+.exitActive {
+  height: 0;
+}

source/renderer/app/components/settings/categories/SupportSettings.scss

@@ -58,9 +58,8 @@
   button {
     cursor: pointer;
     &:disabled {
-      color: var(--rp-button-bg-color-disabled);
       cursor: default;
-      text-decoration: none;
+      opacity: 0.3;
     }
   }