[DDW-291] syncing/connecting tooltip with popover

input-output-hk · Oct 21, 2020 · 532e661 · 532e661
1 parent 0f3b80a
commit 532e661
Show file tree

Hide file tree

Showing 7 changed files with 121 additions and 334 deletions.
diff --git a/package.json b/package.json
@@ -217,7 +217,7 @@
     "react-intl": "2.7.2",
     "react-lottie": "1.2.3",
     "react-markdown": "4.3.1",
-    "react-polymorph": "0.9.4",
+    "react-polymorph": "0.9.6-rc.1",
     "react-router": "5.2.0",
     "react-router-dom": "5.2.0",
     "react-svg-inline": "2.1.1",

diff --git a/source/renderer/app/components/loading/syncing-connecting/StatusIcons.js b/source/renderer/app/components/loading/syncing-connecting/StatusIcons.js
@@ -3,7 +3,7 @@ import React, { Component } from 'react';
 import { defineMessages, intlShape, FormattedHTMLMessage } from 'react-intl';
 import SVGInline from 'react-svg-inline';
 import { Tooltip } from 'react-polymorph/lib/components/Tooltip';
-import { TooltipSkin } from 'react-polymorph/lib/skins/simple/TooltipSkin';
+import { PopOver } from 'react-polymorph/lib/components/PopOver';
 import classNames from 'classnames';
 import styles from './StatusIcons.scss';
 import tooltipStyles from './StatusIcons-tooltip.scss';
@@ -244,29 +244,34 @@ export default class StatusIcons extends Component<Props> {
     paramName !== 'nodeState' &&
     this.props.nodeState !== CardanoNodeStates.RUNNING;
 
-  getIconWithToolTip = (icon: string, paramName: string) => (
-    <Tooltip
-      className={this.getTooltipClassname(paramName)}
+  getIconWithPopover = (icon: string, paramName: string) => (
+    <PopOver
+      offset={[0, 14]}
+      themeVariables={{
+        '--rp-pop-over-bg-color':
+          'var(--theme-loading-status-icons-tooltip-color)',
+        '--rp-pop-over-border-radius': '5px',
+        '--rp-bubble-padding': '6px 12px 7px',
+      }}
+      contentClassName={this.getTooltipClassname(paramName)}
       key={paramName}
-      themeOverrides={tooltipStyles}
-      skin={TooltipSkin}
-      tip={this.getTip(paramName, this.props[paramName])}
+      content={this.getTip(paramName, this.props[paramName])}
     >
       <button className={styles.iconButton} onClick={this.props.onIconClick}>
         <SVGInline svg={icon} className={this.getClassName(paramName)} />
       </button>
-    </Tooltip>
+    </PopOver>
   );
 
   render() {
     return (
       <div className={styles.component}>
         {[
-          this.getIconWithToolTip(nodeStateIcon, 'nodeState'),
-          this.getIconWithToolTip(isNodeRespondingIcon, 'isNodeResponding'),
-          // this.getIconWithToolTip(isNodeSubscribedIcon, 'isNodeSubscribed'),
-          this.getIconWithToolTip(isNodeTimeCorrectIcon, 'isNodeTimeCorrect'),
-          this.getIconWithToolTip(isNodeSyncingIcon, 'isNodeSyncing'),
+          this.getIconWithPopover(nodeStateIcon, 'nodeState'),
+          this.getIconWithPopover(isNodeRespondingIcon, 'isNodeResponding'),
+          // this.getIconWithPopover(isNodeSubscribedIcon, 'isNodeSubscribed'),
+          this.getIconWithPopover(isNodeTimeCorrectIcon, 'isNodeTimeCorrect'),
+          this.getIconWithPopover(isNodeSyncingIcon, 'isNodeSyncing'),
         ]}
       </div>
     );

diff --git a/source/renderer/app/components/loading/syncing-connecting/StatusIcons.scss b/source/renderer/app/components/loading/syncing-connecting/StatusIcons.scss
@@ -3,10 +3,8 @@
 .component {
   bottom: 20px;
   display: flex;
-  flex-flow: row;
   justify-content: center;
   position: absolute;
-  text-align: center;
   width: 100%;
   z-index: 2500;
 
@@ -19,9 +17,11 @@
       width: 20px;
     }
     &.icon-nodeState {
+      padding-right: 4px;
       padding-top: 0;
       svg {
         height: 22px;
+        width: 22px;
       }
     }
     &.icon-isNodeResponding {
@@ -79,13 +79,4 @@
   &:last-child {
     margin-right: 0;
   }
-  :global .SimpleBubble_root {
-    font-size: 14px;
-    > div {
-      border-radius: 5px;
-      margin-left: 10px;
-      padding-bottom: 7px;
-      transform: translateX(-45%);
-    }
-  }
 }
diff --git a/source/renderer/app/themes/daedalus.js b/source/renderer/app/themes/daedalus.js
@@ -10,6 +10,7 @@ import SimpleLoadingSpinner from 'react-polymorph/lib/themes/simple/SimpleLoadin
 import SimpleModal from 'react-polymorph/lib/themes/simple/SimpleModal.scss';
 import SimpleOptions from 'react-polymorph/lib/themes/simple/SimpleOptions.scss';
 import SimplePasswordInput from 'react-polymorph/lib/themes/simple/SimplePasswordInput.scss';
+import SimplePopOver from 'react-polymorph/lib/themes/simple/SimplePopOver.scss';
 import SimpleRadio from 'react-polymorph/lib/themes/simple/SimpleRadio.scss';
 import SimpleScrollBar from 'react-polymorph/lib/themes/simple/SimpleScrollBar.scss';
 import SimpleSelect from 'react-polymorph/lib/themes/simple/SimpleSelect.scss';
@@ -33,6 +34,7 @@ const {
   MODAL,
   OPTIONS,
   PASSWORD_INPUT,
+  POP_OVER,
   RADIO,
   SCROLLBAR,
   SELECT,
@@ -55,6 +57,7 @@ export const daedalusTheme = {
   [MODAL]: SimpleModal,
   [OPTIONS]: SimpleOptions,
   [PASSWORD_INPUT]: SimplePasswordInput,
+  [POP_OVER]: SimplePopOver,
   [RADIO]: SimpleRadio,
   [SCROLLBAR]: SimpleScrollBar,
   [SELECT]: SimpleSelect,

diff --git a/source/renderer/app/themes/overrides/PopOverOverrides.scss b/source/renderer/app/themes/overrides/PopOverOverrides.scss
@@ -0,0 +1 @@
+.root {}
diff --git a/source/renderer/app/themes/overrides/index.js b/source/renderer/app/themes/overrides/index.js
@@ -12,6 +12,7 @@ import SwitchOverrides from './SwitchOverrides.scss';
 import SelectOverrides from './SelectOverrides.scss';
 import OptionsOverrides from './OptionsOverrides.scss';
 import TooltipOverrides from './TooltipOverrides.scss';
+import PopOverOverrides from './PopOverOverrides.scss';
 
 const {
   AUTOCOMPLETE,
@@ -23,6 +24,7 @@ const {
   SWITCH,
   SELECT,
   OPTIONS,
+  POP_OVER,
   RADIO,
   SCROLLBAR,
   STEPPER,
@@ -42,5 +44,6 @@ export const themeOverrides = {
   [SWITCH]: SwitchOverrides,
   [SELECT]: SelectOverrides,
   [OPTIONS]: OptionsOverrides,
+  [POP_OVER]: PopOverOverrides,
   [TOOLTIP]: TooltipOverrides,
 };