diff --git a/package-lock.json b/package-lock.json index 5ecac47..0e114e6 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 07a9728..63d3a97 100644 --- a/package.json +++ b/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" diff --git a/src/components/Header.module.scss b/src/components/Header.module.scss index d77aaf4..1a88648 100644 --- a/src/components/Header.module.scss +++ b/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; } diff --git a/src/components/molecules/AccountStatus/Indicator.module.scss b/src/components/molecules/AccountStatus/Indicator.module.scss index c7a3c60..e1e9ef9 100644 --- a/src/components/molecules/AccountStatus/Indicator.module.scss +++ b/src/components/molecules/AccountStatus/Indicator.module.scss @@ -12,7 +12,6 @@ height: $font-size-small; display: block; background: $red; - margin-bottom: -.1rem; } // yellow triangle diff --git a/src/components/molecules/AccountStatus/Indicator.tsx b/src/components/molecules/AccountStatus/Indicator.tsx index 66d014f..aa3c6e0 100644 --- a/src/components/molecules/AccountStatus/Indicator.tsx +++ b/src/components/molecules/AccountStatus/Indicator.tsx @@ -5,17 +5,15 @@ import styles from './Indicator.module.scss' const Indicator = ({ className, - showPopover, - hidePopover + togglePopover }: { className?: string - showPopover: any - hidePopover: any + togglePopover: any }) => (
{states => diff --git a/src/components/molecules/AccountStatus/Popover.module.scss b/src/components/molecules/AccountStatus/Popover.module.scss index a7794cf..2818c7b 100644 --- a/src/components/molecules/AccountStatus/Popover.module.scss +++ b/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; diff --git a/src/components/molecules/AccountStatus/Popover.tsx b/src/components/molecules/AccountStatus/Popover.tsx index 16fb41b..51918b5 100644 --- a/src/components/molecules/AccountStatus/Popover.tsx +++ b/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 = ({ - showPopover, - hidePopover -}: { - showPopover: any - hidePopover: any -}) => ( +const Popover = ({ togglePopover }: { togglePopover: any }) => (
diff --git a/src/components/molecules/AccountStatus/index.tsx b/src/components/molecules/AccountStatus/index.tsx index 245b611..e166018 100644 --- a/src/components/molecules/AccountStatus/index.tsx +++ b/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) { - const popoverIsOpen = - typeof toState === 'boolean' ? toState : !this.state.popoverIsOpen - this.setState({ popoverIsOpen }) + public togglePopover() { + this.setState(prevState => ({ + isPopoverOpen: !prevState.isPopoverOpen + })) } public render() { - const popoverProps = { - isOpen: this.state.popoverIsOpen, - enterExitTransitionDurationMs: 300, - tipSize: 0.01, - onOuterAction: () => this.togglePopover(false), - body: ( - this.togglePopover(true)} - hidePopover={() => this.togglePopover(false)} - /> - ) - } - return ( - + ( + + this.togglePopover()} + /> + + )} + > this.togglePopover(true)} - hidePopover={() => this.togglePopover(false)} + togglePopover={() => this.togglePopover()} className={this.props.className} />