apply fix

Author: shawnbusuttil

source/renderer/app/components/wallet/settings/ChangeSpendingPasswordDialog.tsx

@@ -4,7 +4,6 @@ import classnames from 'classnames';
 import { Input } from 'react-polymorph/lib/components/Input';
 import { defineMessages, FormattedHTMLMessage, intlShape } from 'react-intl';
 import vjf from 'mobx-react-form/lib/validators/VJF';
-import { PopOver } from 'react-polymorph/lib/components/PopOver';
 import SVGInline from 'react-svg-inline';
 import ReactToolboxMobxForm from '../../../utils/ReactToolboxMobxForm';
 import DialogCloseButton from '../../widgets/DialogCloseButton';
@@ -307,14 +306,14 @@ class ChangeSpendingPasswordDialog extends Component<Props> {
                 onKeyPress={this.handleSubmitOnEnter}
               />
               {!isSpendingPasswordSet && (
-                <PopOver
+                <TopLevelPopOver
                   content={
                     <FormattedHTMLMessage {...messages.passwordTooltip} />
                   }
                   key="tooltip"
                 >
                   <SVGInline svg={infoIconInline} className={styles.infoIcon} />
-                </PopOver>
+                </TopLevelPopOver>
               )}
             </div>
           </div>

source/renderer/app/components/wallet/settings/ICOPublicKeyQRCodeDialog.tsx

@@ -12,6 +12,7 @@ import iconCopy from '../../../assets/images/clipboard-ic.inline.svg';
 import styles from './PublicKeyQRCodeDialog.scss';
 import globalMessages from '../../../i18n/global-messages';
 import { messages } from './ICOPublicKeyQRCodeDialog.messages';
+import TopLevelPopOver from '../../widgets/TopLevelPopOver';
 
 type Props = {
   walletName: string;
@@ -66,9 +67,9 @@ const ICOPublicKeyQRCodeDialog = observer((props: Props) => {
         />
       </div>
       <div className={styles.addressPathsWrapper}>
-        <PopOver content={intl.formatMessage(messages.derivationPathTooltip)}>
+        <TopLevelPopOver content={intl.formatMessage(messages.derivationPathTooltip)}>
           <div className={styles.spendingPath}>{derivationPath}</div>
-        </PopOver>
+        </TopLevelPopOver>
       </div>
 
       <div className={styles.walletPublicKey}>{walletPublicKey}</div>

source/renderer/app/components/wallet/settings/WalletPublicKeyQRCodeDialog.tsx

@@ -4,14 +4,14 @@ import { injectIntl, intlShape } from 'react-intl';
 import CopyToClipboard from 'react-copy-to-clipboard';
 import SVGInline from 'react-svg-inline';
 import QRCode from 'qrcode.react';
-import { PopOver } from 'react-polymorph/lib/components/PopOver';
 import DialogCloseButton from '../../widgets/DialogCloseButton';
 import Dialog from '../../widgets/Dialog';
 // @ts-ignore ts-migrate(2307) FIXME: Cannot find module '../../../assets/images/clipboa... Remove this comment to see the full error message
 import iconCopy from '../../../assets/images/clipboard-ic.inline.svg';
 import styles from './PublicKeyQRCodeDialog.scss';
 import globalMessages from '../../../i18n/global-messages';
 import type { ReactIntlMessage } from '../../../types/i18nTypes';
+import TopLevelPopOver from '../../widgets/TopLevelPopOver';
 
 type Props = {
   walletName: string;
@@ -68,9 +68,9 @@ const WalletPublicKeyQRCodeDialog = observer((props: Props) => {
         />
       </div>
       <div className={styles.addressPathsWrapper}>
-        <PopOver content={intl.formatMessage(messages.derivationPathTooltip)}>
+        <TopLevelPopOver content={intl.formatMessage(messages.derivationPathTooltip)}>
           <div className={styles.spendingPath}>{derivationPath}</div>
-        </PopOver>
+        </TopLevelPopOver>
       </div>
 
       <div className={styles.walletPublicKey}>{walletPublicKey}</div>

source/renderer/app/components/wallet/wallet-restore/ConfigurationDialog.tsx

@@ -5,7 +5,6 @@ import { Input } from 'react-polymorph/lib/components/Input';
 import { defineMessages, intlShape, FormattedHTMLMessage } from 'react-intl';
 import vjf from 'mobx-react-form/lib/validators/VJF';
 import SVGInline from 'react-svg-inline';
-import { PopOver } from 'react-polymorph/lib/components/PopOver';
 import { PasswordInput } from '../../widgets/forms/PasswordInput';
 import WalletRestoreDialog from './widgets/WalletRestoreDialog';
 import styles from './ConfigurationDialog.scss';
@@ -24,6 +23,7 @@ import { FORM_VALIDATION_DEBOUNCE_WAIT } from '../../../config/timingConfig';
 // @ts-ignore ts-migrate(2307) FIXME: Cannot find module '../../../assets/images/info-ic... Remove this comment to see the full error message
 import infoIconInline from '../../../assets/images/info-icon.inline.svg';
 import LoadingSpinner from '../../widgets/LoadingSpinner';
+import TopLevelPopOver from '../../widgets/TopLevelPopOver';
 
 const messages = defineMessages({
   description1: {
@@ -276,14 +276,14 @@ class ConfigurationDialog extends Component<Props> {
                   onKeyPress={this.handleSubmitOnEnter}
                   {...spendingPasswordField.bind()}
                 />
-                <PopOver
+                <TopLevelPopOver
                   content={
                     <FormattedHTMLMessage {...messages.passwordTooltip} />
                   }
                   key="tooltip"
                 >
                   <SVGInline svg={infoIconInline} className={styles.infoIcon} />
-                </PopOver>
+                </TopLevelPopOver>
               </div>
               <div className={styles.spendingPasswordField}>
                 <PasswordInput

source/renderer/app/components/widgets/TopLevelPopOver.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { PopOver, PopOverProps } from 'react-polymorph/lib/components/PopOver';
 
-const topLevelZIndex = 10000;
+const topLevelZIndex = 9999;
 
 const TopLevelPopOver = ({ children, ...props }: PopOverProps) => (
     <PopOver

source/renderer/app/components/widgets/forms/FormFieldSkinTooltip.tsx

@@ -5,10 +5,11 @@ import type { Element } from 'react';
 import { omit } from 'lodash';
 import classnames from 'classnames';
 import SVGInline from 'react-svg-inline';
-import { PopOver } from 'react-polymorph/lib/components/PopOver';
 // @ts-ignore ts-migrate(2307) FIXME: Cannot find module '../../../assets/images/exclama... Remove this comment to see the full error message
 import exclamationPointIcon from '../../../assets/images/exclamation-point.inline.svg';
 import styles from './FormFieldSkinTooltip.scss';
+import TopLevelPopOver from '../TopLevelPopOver';
+
 type Props = {
   className: string;
   disabled: boolean;
@@ -40,12 +41,12 @@ export const FormFieldSkin = (props: Props) => (
       >
         {props.label}
         {props.error && (
-          <PopOver content={props.error} key="tooltip" placement="bottom">
+          <TopLevelPopOver content={props.error} key="tooltip" placement="bottom">
             <SVGInline
               svg={exclamationPointIcon}
               className={styles.exclamationPointIcon}
             />
-          </PopOver>
+          </TopLevelPopOver>
         )}
       </label>
     )}

source/renderer/app/themes/mixins/layers.scss

@@ -1,5 +1,5 @@
-$backdrop-z-index: 10000;
-$dialog-z-index: 10000;
+$backdrop-z-index: 9998;
+$dialog-z-index: 9998;
 $loader-backdrop-z-index: 5;
 $back-to-top-z-index: 5;
 $sticky-header-z-index: 1;