switch popover library

package-lock.json

@@ -4912,14 +4912,6 @@
       "integrity": "sha1-g4NCMMyfdMRX3lnuvRVD/uuDt+w=",
       "dev": true
     },
-    "css-vendor": {
-      "version": "0.3.8",
-      "resolved": "https://registry.npmjs.org/css-vendor/-/css-vendor-0.3.8.tgz",
-      "integrity": "sha1-ZCHP0wNM5mT+dnOXL9ARn8KJQfo=",
-      "requires": {
-        "is-in-browser": "^1.0.2"
-      }
-    },
     "css-what": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/css-what/-/css-what-2.1.2.tgz",
@@ -9727,11 +9719,6 @@
       "integrity": "sha512-but/G3sapV3MNyqiDBLrOi4x8uCIw0RY3o/Vb5GT0sMFHrVV7731wFSVy41T5FO1og7G0gXLJh0MkgPRouko/A==",
       "dev": true
     },
-    "is-in-browser": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/is-in-browser/-/is-in-browser-1.1.3.tgz",
-      "integrity": "sha1-Vv9NtoOgeMYILrldrX3GLh0E+DU="
-    },
     "is-installed-globally": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/is-installed-globally/-/is-installed-globally-0.1.0.tgz",
@@ -11232,11 +11219,6 @@
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.11.tgz",
       "integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg=="
     },
-    "lodash._getnative": {
-      "version": "3.9.1",
-      "resolved": "https://registry.npmjs.org/lodash._getnative/-/lodash._getnative-3.9.1.tgz",
-      "integrity": "sha1-VwvH3t5G1hzc3mh9ZdPuy6o6r/U="
-    },
     "lodash._reinterpolate": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz",
@@ -11261,14 +11243,6 @@
       "integrity": "sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8=",
       "dev": true
     },
-    "lodash.debounce": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-3.1.1.tgz",
-      "integrity": "sha1-gSIRw3ipTMKdWqTjNGzwv846ffU=",
-      "requires": {
-        "lodash._getnative": "^3.0.0"
-      }
-    },
     "lodash.memoize": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
@@ -11311,14 +11285,6 @@
         "lodash._reinterpolate": "~3.0.0"
       }
     },
-    "lodash.throttle": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-3.0.4.tgz",
-      "integrity": "sha1-vE9HH7Mo5Nb9xt8rPTyvET8Pick=",
-      "requires": {
-        "lodash.debounce": "^3.0.0"
-      }
-    },
     "lodash.unescape": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/lodash.unescape/-/lodash.unescape-4.0.1.tgz",
@@ -16654,17 +16620,6 @@
       "resolved": "https://registry.npmjs.org/react-moment/-/react-moment-0.8.4.tgz",
       "integrity": "sha512-QhI19OcfhiAn60/O6bMR0w8ApXrPFCjv6+eV0I/P9/AswzjgEAx4L7VxMBCpS/jrythLa12Q9v88req+ys4YpA=="
     },
-    "react-popover": {
-      "version": "0.5.10",
-      "resolved": "https://registry.npmjs.org/react-popover/-/react-popover-0.5.10.tgz",
-      "integrity": "sha512-5SYDTfncywSH00I70oHd4gFRUR8V0rJ4sRADSI/P6G0RVXp9jUgaWloJ0Bk+SFnjpLPuipTKuzQNNd2CTs5Hrw==",
-      "requires": {
-        "css-vendor": "^0.3.1",
-        "debug": "^2.6.8",
-        "lodash.throttle": "^3.0.3",
-        "prop-types": "^15.5.10"
-      }
-    },
     "react-router": {
       "version": "4.3.1",
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-4.3.1.tgz",
@@ -17032,6 +16987,11 @@
         "shallowequal": "^1.0.1"
       }
     },
+    "react-tiny-popover": {
+      "version": "3.4.2",
+      "resolved": "https://registry.npmjs.org/react-tiny-popover/-/react-tiny-popover-3.4.2.tgz",
+      "integrity": "sha512-3lH+GHvyJbjHNg14B7Md8bpUapQ5W3s8IdBFguODjrgEV1+LWrKOmVrpe8xhIQDOkgkiDfLwMVgsI7BQM9Udpg=="
+    },
     "react-transition-group": {
       "version": "2.5.3",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.5.3.tgz",

package.json

@@ -30,8 +30,8 @@
     "react-dom": "^16.8.1",
     "react-helmet": "^5.2.0",
     "react-moment": "^0.8.4",
-    "react-popover": "^0.5.10",
     "react-router-dom": "^4.3.1",
+    "react-tiny-popover": "^3.4.2",
     "react-transition-group": "^2.5.3",
     "slugify": "^1.3.4",
     "web3": "^1.0.0-beta.43"

src/components/Header.module.scss

@@ -1,9 +1,6 @@
 @import '../styles/variables';
 
 .header {
-    // background: $brand-black
-    //     url('@oceanprotocol/art/mantaray/mantaray-back.svg') no-repeat center -6rem;
-    // background-size: cover;
     width: 100%;
     padding: $spacer / 2 0;
 }
@@ -97,5 +94,5 @@
 
 .accountStatus {
     margin-left: $spacer;
-    margin-bottom: .3rem;
+    margin-bottom: .2rem;
 }

src/components/molecules/AccountStatus/Indicator.module.scss

@@ -12,7 +12,6 @@
     height: $font-size-small;
     display: block;
     background: $red;
-    margin-bottom: -.1rem;
 }
 
 // yellow triangle

src/components/molecules/AccountStatus/Indicator.tsx

@@ -5,17 +5,15 @@ import styles from './Indicator.module.scss'
 
 const Indicator = ({
     className,
-    showPopover,
+    togglePopover
-    hidePopover
 }: {
     className?: string
-    showPopover: any
+    togglePopover: any
-    hidePopover: any
 }) => (
     <div
         className={cx(styles.status, className)}
-        onMouseOver={showPopover}
+        onMouseOver={togglePopover}
-        onMouseOut={hidePopover}
+        onMouseOut={togglePopover}
     >
         <User.Consumer>
             {states =>

src/components/molecules/AccountStatus/Popover.module.scss

@@ -3,9 +3,6 @@
 $popoverWidth: 18rem;
 
 .popover {
-    // position: absolute;
-    // top: 1.5rem;
-    // right: -($spacer / 3);
     width: $popoverWidth;
     padding: $spacer / 2;
     background: $brand-black;
@@ -14,21 +11,6 @@ $popoverWidth: 18rem;
     box-shadow: 0 6px 16px 0 rgba($brand-black, .3);
     color: $brand-grey-light;
     font-size: $font-size-small;
-
-    // &:after {
-    //     bottom: 100%;
-    //     right: 2%;
-    //     border: solid transparent;
-    //     content: '';
-    //     height: 0;
-    //     width: 0;
-    //     position: absolute;
-    //     pointer-events: none;
-    //     border-color: transparent;
-    //     border-bottom-color: $brand-grey-light;
-    //     border-width: 10px;
-    //     margin-left: -10px;
-    // }
 }
 
 .popoverInfoline {
@@ -75,7 +57,6 @@ $popoverWidth: 18rem;
 
 .balance {
     font-size: $font-size-small;
-    color: $brand-grey-light;
     margin-left: $spacer / 2;
     white-space: nowrap;
 

src/components/molecules/AccountStatus/Popover.tsx

@@ -3,17 +3,11 @@ import { User } from '../../../context/User'
 import Faucet from './Faucet'
 import styles from './Popover.module.scss'
 
-const Popover = ({
+const Popover = ({ togglePopover }: { togglePopover: any }) => (
-    showPopover,
-    hidePopover
-}: {
-    showPopover: any
-    hidePopover: any
-}) => (
     <div
         className={styles.popover}
-        onMouseOver={showPopover}
+        onMouseOver={togglePopover}
-        onMouseOut={hidePopover}
+        onMouseOut={togglePopover}
     >
         <div className={styles.accountName}>
             <User.Consumer>

src/components/molecules/AccountStatus/index.tsx

@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react'
-import Popover from 'react-popover'
+import Popover, { ArrowContainer } from 'react-tiny-popover'
 import AccountPopover from './Popover'
 import AccountIndicator from './Indicator'
 
@@ -8,7 +8,7 @@ interface AccountStatusProps {
 }
 
 interface AccountStatusState {
-    popoverIsOpen: boolean
+    isPopoverOpen: boolean
 }
 
 export default class AccountStatus extends PureComponent<
@@ -16,34 +16,39 @@ export default class AccountStatus extends PureComponent<
     AccountStatusState
 > {
     public state = {
-        popoverIsOpen: false
+        isPopoverOpen: false
     }
 
-    public togglePopover(toState?: boolean) {
+    public togglePopover() {
-        const popoverIsOpen =
+        this.setState(prevState => ({
-            typeof toState === 'boolean' ? toState : !this.state.popoverIsOpen
+            isPopoverOpen: !prevState.isPopoverOpen
-        this.setState({ popoverIsOpen })
+        }))
     }
 
     public render() {
-        const popoverProps = {
-            isOpen: this.state.popoverIsOpen,
-            enterExitTransitionDurationMs: 300,
-            tipSize: 0.01,
-            onOuterAction: () => this.togglePopover(false),
-            body: (
-                <AccountPopover
-                    showPopover={() => this.togglePopover(true)}
-                    hidePopover={() => this.togglePopover(false)}
-                />
-            )
-        }
-
         return (
-            <Popover {...popoverProps}>
+            <Popover
+                isOpen={this.state.isPopoverOpen}
+                padding={10}
+                position={'bottom'}
+                transitionDuration={0.2}
+                windowBorderPadding={15}
+                content={({ position, targetRect, popoverRect }) => (
+                    <ArrowContainer
+                        position={position}
+                        targetRect={targetRect}
+                        popoverRect={popoverRect}
+                        arrowColor={'#8b98a9'}
+                        arrowSize={10}
+                    >
+                        <AccountPopover
+                            togglePopover={() => this.togglePopover()}
+                        />
+                    </ArrowContainer>
+                )}
+            >
                 <AccountIndicator
-                    showPopover={() => this.togglePopover(true)}
+                    togglePopover={() => this.togglePopover()}
-                    hidePopover={() => this.togglePopover(false)}
                     className={this.props.className}
                 />
             </Popover>