Removes the dropdown menu and colocates old styles with account-menu (#9185)

The only place that these .menu styles were being used was the account-menu by way of components/app/dropdowns/menu. Because account-menu is the only place that used these styles I moved them to exist with the account-menu

ui/app/components/app/account-menu/account-menu.component.js

@@ -3,8 +3,7 @@ import PropTypes from 'prop-types'
 import { debounce } from 'lodash'
 import Fuse from 'fuse.js'
 import InputAdornment from '@material-ui/core/InputAdornment'
-
+import classnames from 'classnames'
-import { Menu, Item, Divider, CloseArea } from '../dropdowns/components/menu'
 import { ENVIRONMENT_TYPE_POPUP } from '../../../../../app/scripts/lib/enums'
 import { getEnvironmentType } from '../../../../../app/scripts/lib/util'
 import Identicon from '../../ui/identicon'
@@ -22,6 +21,42 @@ import {
 import TextField from '../../ui/text-field'
 import SearchIcon from '../../ui/search-icon'
 
+export function AccountMenuItem (props) {
+  const {
+    icon,
+    children,
+    text,
+    subText,
+    className,
+    onClick,
+  } = props
+
+  const itemClassName = classnames('account-menu__item', className, {
+    'account-menu__item--clickable': Boolean(onClick),
+  })
+  return children
+    ? <div className={itemClassName} onClick={onClick}>{children}</div>
+    : (
+      <div
+        className={itemClassName}
+        onClick={onClick}
+      >
+        {icon ? <div className="account-menu__item__icon">{icon}</div> : null}
+        {text ? <div className="account-menu__item__text">{text}</div> : null}
+        {subText ? <div className="account-menu__item__subtext">{subText}</div> : null}
+      </div>
+    )
+}
+
+AccountMenuItem.propTypes = {
+  icon: PropTypes.node,
+  children: PropTypes.node,
+  text: PropTypes.node,
+  subText: PropTypes.node,
+  onClick: PropTypes.func,
+  className: PropTypes.string,
+}
+
 export default class AccountMenu extends Component {
   static contextTypes = {
     t: PropTypes.func,
@@ -106,7 +141,7 @@ export default class AccountMenu extends Component {
         fullWidth
         theme="material-white-padded"
       />,
-      <Divider key="search-divider" />,
+      <div className="account-menu__divider" key="search-divider" />,
     ]
   }
 
@@ -277,13 +312,16 @@ export default class AccountMenu extends Component {
       history,
     } = this.props
 
+    if (!isAccountMenuOpen) {
+      return null
+    }
+
     return (
-      <Menu
+      <div
         className="account-menu"
-        isShowing={isAccountMenuOpen}
       >
-        <CloseArea onClick={toggleAccountMenu} />
+        <div className="account-menu__close-area" onClick={toggleAccountMenu} />
-        <Item className="account-menu__header">
+        <AccountMenuItem className="account-menu__header">
           { t('myAccounts') }
           <button
             className="account-menu__lock-button"
@@ -294,8 +332,8 @@ export default class AccountMenu extends Component {
           >
             { t('lock') }
           </button>
-        </Item>
+        </AccountMenuItem>
-        <Divider />
+        <div className="account-menu__divider" />
         <div className="account-menu__accounts-container">
           {shouldShowAccountsSearch ? this.renderAccountsSearch() : null}
           <div
@@ -309,8 +347,8 @@ export default class AccountMenu extends Component {
           </div>
           { this.renderScrollButton() }
         </div>
-        <Divider />
+        <div className="account-menu__divider" />
-        <Item
+        <AccountMenuItem
           onClick={() => {
             toggleAccountMenu()
             metricsEvent({
@@ -330,7 +368,7 @@ export default class AccountMenu extends Component {
           )}
           text={t('createAccount')}
         />
-        <Item
+        <AccountMenuItem
           onClick={() => {
             toggleAccountMenu()
             metricsEvent({
@@ -350,7 +388,7 @@ export default class AccountMenu extends Component {
           )}
           text={t('importAccount')}
         />
-        <Item
+        <AccountMenuItem
           onClick={() => {
             toggleAccountMenu()
             metricsEvent({
@@ -374,8 +412,8 @@ export default class AccountMenu extends Component {
           )}
           text={t('connectHardwareWallet')}
         />
-        <Divider />
+        <div className="account-menu__divider" />
-        <Item
+        <AccountMenuItem
           onClick={() => {
             toggleAccountMenu()
             history.push(ABOUT_US_ROUTE)
@@ -385,7 +423,7 @@ export default class AccountMenu extends Component {
           }
           text={t('infoHelp')}
         />
-        <Item
+        <AccountMenuItem
           onClick={() => {
             toggleAccountMenu()
             history.push(SETTINGS_ROUTE)
@@ -405,7 +443,7 @@ export default class AccountMenu extends Component {
           )}
           text={t('settings')}
         />
-      </Menu>
+      </div>
     )
   }
 }

ui/app/components/app/account-menu/index.scss

@@ -3,6 +3,11 @@
   z-index: 100;
   top: 58px;
   width: 320px;
+  border-radius: 4px;
+  background: rgba($black, 0.8);
+  box-shadow: rgba($black, 0.15) 0 2px 2px 2px;
+  min-width: 150px;
+  color: $white;
 
   @media screen and (max-width: 575px) {
     right: calc(((100vw - 100%) / 2) + 8px);
@@ -20,6 +25,62 @@
     right: calc((100vw - 65vw) / 2);
   }
 
+  &__item {
+    padding: 18px;
+    display: flex;
+    flex-flow: row wrap;
+    align-items: center;
+    position: relative;
+    z-index: 201;
+
+    @media screen and (max-width: 575px) {
+      padding: 14px;
+    }
+
+    &--clickable {
+      cursor: pointer;
+
+      &:hover {
+        background-color: rgba($white, 0.05);
+      }
+
+      &:active {
+        background-color: rgba($white, 0.1);
+      }
+    }
+
+    &__icon {
+      height: 16px;
+      width: 16px;
+      margin-right: 14px;
+    }
+
+    &__text {
+      font-size: 16px;
+      line-height: 21px;
+    }
+
+    &__subtext {
+      font-size: 12px;
+      padding: 5px 0 0 30px;
+    }
+  }
+
+  &__divider {
+    background-color: $scorpion;
+    width: 100%;
+    height: 1px;
+  }
+
+  &__close-area {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    z-index: 100;
+  }
+
   &__icon {
     margin-left: 1rem;
     cursor: pointer;

ui/app/components/app/dropdowns/components/menu.js

@@ -1,83 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-import classnames from 'classnames'
-
-/**
- * Menu component
- * @returns {Component|null}
- */
-export function Menu (props) {
-  const { className, children, isShowing } = props
-  return isShowing
-    ? <div className={classnames('menu', className)}>{children}</div>
-    : null
-}
-
-Menu.defaultProps = {
-  className: '',
-  isShowing: false,
-  children: null,
-}
-
-Menu.propTypes = {
-  className: PropTypes.string,
-  children: PropTypes.node,
-  isShowing: PropTypes.bool,
-}
-
-export function Item (props) {
-  const {
-    icon,
-    children,
-    text,
-    subText,
-    className,
-    onClick,
-  } = props
-
-  const itemClassName = classnames('menu__item', className, {
-    'menu__item--clickable': Boolean(onClick),
-  })
-  return children
-    ? <div className={itemClassName} onClick={onClick}>{children}</div>
-    : (
-      <div
-        className={itemClassName}
-        onClick={onClick}
-      >
-        {icon ? <div className="menu__item__icon">{icon}</div> : null}
-        {text ? <div className="menu__item__text">{text}</div> : null}
-        {subText ? <div className="menu__item__subtext">{subText}</div> : null}
-      </div>
-    )
-}
-
-Item.defaultProps = {
-  children: null,
-  icon: null,
-  text: null,
-  subText: null,
-  className: '',
-  onClick: null,
-}
-
-Item.propTypes = {
-  icon: PropTypes.node,
-  children: PropTypes.node,
-  text: PropTypes.node,
-  subText: PropTypes.node,
-  className: PropTypes.string,
-  onClick: PropTypes.func,
-}
-
-export function Divider () {
-  return <div className="menu__divider" />
-}
-
-export function CloseArea ({ onClick }) {
-  return <div className="menu__close-area" onClick={onClick} />
-}
-
-CloseArea.propTypes = {
-  onClick: PropTypes.func.isRequired,
-}

ui/app/components/app/dropdowns/tests/menu.test.js

@@ -1,69 +0,0 @@
-import React from 'react'
-import assert from 'assert'
-import sinon from 'sinon'
-import { shallow } from 'enzyme'
-import { Menu, Item, Divider, CloseArea } from '../components/menu'
-
-describe('Dropdown Menu Components', function () {
-  describe('Menu', function () {
-    it('adds prop className to menu', function () {
-      const wrapper = shallow(
-        <Menu className="Test Class" isShowing />,
-      )
-      assert.equal(wrapper.find('.menu').prop('className'), 'menu Test Class')
-    })
-  })
-
-  describe('Item', function () {
-    let wrapper
-    const onClickSpy = sinon.spy()
-
-    beforeEach(function () {
-      wrapper = shallow(
-        <Item
-          icon="test icon"
-          text="test text"
-          className="test foo1"
-          onClick={onClickSpy}
-        />,
-      )
-    })
-
-    it('add className based on props', function () {
-      assert.equal(wrapper.find('.menu__item').prop('className'), 'menu__item test foo1 menu__item--clickable')
-    })
-
-    it('simulates onClick called', function () {
-      wrapper.find('.menu__item').prop('onClick')()
-      assert.equal(onClickSpy.callCount, 1)
-    })
-
-    it('adds icon based on icon props', function () {
-      assert.equal(wrapper.find('.menu__item__icon').text(), 'test icon')
-    })
-
-    it('adds html text based on text props', function () {
-      assert.equal(wrapper.find('.menu__item__text').text(), 'test text')
-    })
-  })
-
-  describe('Divider', function () {
-    it('renders menu divider', function () {
-      const wrapper = shallow(<Divider />)
-      assert.equal(wrapper.find('.menu__divider').length, 1)
-    })
-  })
-
-  describe('CloseArea', function () {
-    it('simulates click', function () {
-      const onClickSpy = sinon.spy()
-      const wrapper = shallow((
-        <CloseArea
-          onClick={onClickSpy}
-        />
-      ))
-      wrapper.prop('onClick')()
-      assert.ok(onClickSpy.calledOnce)
-    })
-  })
-})

ui/app/css/itcss/components/index.scss

@@ -11,7 +11,6 @@
 @import './loading-overlay';
 
 // Tx List and Sections
-@import './menu';
 @import './gas-slider';
 @import './simple-dropdown';
 @import './request-encryption-public-key';

ui/app/css/itcss/components/menu.scss

@@ -1,63 +0,0 @@
-.menu {
-  border-radius: 4px;
-  background: rgba($black, 0.8);
-  box-shadow: rgba($black, 0.15) 0 2px 2px 2px;
-  min-width: 150px;
-  color: $white;
-
-  &__item {
-    padding: 18px;
-    display: flex;
-    flex-flow: row wrap;
-    align-items: center;
-    position: relative;
-    z-index: 201;
-
-    @media screen and (max-width: 575px) {
-      padding: 14px;
-    }
-
-    &--clickable {
-      cursor: pointer;
-
-      &:hover {
-        background-color: rgba($white, 0.05);
-      }
-
-      &:active {
-        background-color: rgba($white, 0.1);
-      }
-    }
-
-    &__icon {
-      height: 16px;
-      width: 16px;
-      margin-right: 14px;
-    }
-
-    &__text {
-      font-size: 16px;
-      line-height: 21px;
-    }
-
-    &__subtext {
-      font-size: 12px;
-      padding: 5px 0 0 30px;
-    }
-  }
-
-  &__divider {
-    background-color: $scorpion;
-    width: 100%;
-    height: 1px;
-  }
-
-  &__close-area {
-    position: fixed;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
-    z-index: 100;
-  }
-}