fix: Use Menupopup with trigger and without underlay CSS

packages/fether-react/src/Tokens/Tokens.js

@@ -14,18 +14,6 @@ import withAccount from '../utils/withAccount';
 @withRouter
 @withAccount
 class Tokens extends PureComponent {
-  state = {
-    isMenuOpen: false
-  };
-
-  handleToggleMenu = () => {
-    const { isMenuOpen } = this.state;
-
-    this.setState({ isMenuOpen: !isMenuOpen });
-  };
-
-  handleMenuRef = menuNode => this.setState({ menuNode });
-
   handleGoToLink = url => {
     this.props.history.push(url);
   };
@@ -66,21 +54,9 @@ class Tokens extends PureComponent {
     const {
       account: { address, name, type }
     } = this.props;
-    const { isMenuOpen, menuNode } = this.state;
 
     return (
       <div className='tokens'>
-        <div className={isMenuOpen ? 'popup-underlay' : ''} />
-        <MenuPopup
-          className='popup-menu-account'
-          context={menuNode}
-          horizontalOffset={1}
-          menuItems={this.menuItems()}
-          onClose={this.handleToggleMenu}
-          onItemClick={this.handleGoToLink}
-          open={isMenuOpen}
-          size='small'
-        />
         <AccountHeader
           address={address}
           copyAddress
@@ -92,13 +68,14 @@ class Tokens extends PureComponent {
             </Link>
           }
           right={
-            <a
-              className='icon -menu'
-              ref={this.handleMenuRef}
-              onClick={this.handleToggleMenu}
-            >
-              Menu
-            </a>
+            <MenuPopup
+              className='popup-menu-account'
+              horizontalOffset={1}
+              menuItems={this.menuItems()}
+              onItemClick={this.handleGoToLink}
+              size='small'
+              trigger={<a className='icon -menu'>Menu</a>}
+            />
           }
         />
 

packages/fether-react/src/assets/sass/components/_popup.scss

-.popup-underlay {
-  background: transparent;
-  bottom: 0;
-  height: 100%;
-  left: 0;
-  position: fixed;
-  right: 0;
-  top: 0;
-  width: 100%;
-  z-index: 1899; /* Under the menu popup */
-}
-
 .popup-menu-account {
   /* Override SUI popup styles so popup does not appear above menu icon */
   background: $white !important;

packages/fether-ui/src/MenuPopup/MenuPopup.js

@@ -7,14 +7,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Popup as SUIPopup } from 'semantic-ui-react';
 
-export const MenuPopup = ({
-  menuItems,
-  onClose,
-  onItemClick,
-  open,
-  ...otherProps
-}) => (
-  <SUIPopup onClose={(event, data) => onClose()} open={open} {...otherProps}>
+export const MenuPopup = ({ menuItems, onItemClick, ...otherProps }) => (
+  <SUIPopup {...otherProps}>
     <div className='popup-screen'>
       <SUIPopup.Content>
         {menuItems &&
@@ -36,23 +30,16 @@ MenuPopup.defaultProps = {
   basic: true,
   horizontalOffset: 0,
   on: 'click',
-  position: 'top right',
-  size: 'large',
-  verticalOffset: 0
+  size: 'large'
 };
 
 MenuPopup.propTypes = {
   basic: PropTypes.bool, // toggles popup arrow
   className: PropTypes.string,
-  context: PropTypes.any, // element to bind the popup to or use position
   horizontalOffset: PropTypes.number,
-  hoverable: PropTypes.bool, // toggle autoclose
   menuItems: PropTypes.array.isRequired,
   on: PropTypes.string,
-  onClose: PropTypes.func.isRequired,
   onItemClick: PropTypes.func,
-  open: PropTypes.bool.isRequired,
-  position: PropTypes.string,
   size: PropTypes.string,
-  verticalOffset: PropTypes.number
+  trigger: PropTypes.node
 };