diff --git a/ui/app/components/app/account-menu/account-menu.component.js b/ui/app/components/app/account-menu/account-menu.component.js index 6409a9cd6..ec3f3f7a9 100644 --- a/ui/app/components/app/account-menu/account-menu.component.js +++ b/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 { Menu, Item, Divider, CloseArea } from '../dropdowns/components/menu' +import classnames from 'classnames' 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 + ?
{children}
+ : ( +
+ {icon ?
{icon}
: null} + {text ?
{text}
: null} + {subText ?
{subText}
: null} +
+ ) +} + +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" />, - , +
, ] } @@ -277,13 +312,16 @@ export default class AccountMenu extends Component { history, } = this.props + if (!isAccountMenuOpen) { + return null + } + return ( - - - +
+ { t('myAccounts') } - - + +
{shouldShowAccountsSearch ? this.renderAccountsSearch() : null}
{ this.renderScrollButton() }
- - + { toggleAccountMenu() metricsEvent({ @@ -330,7 +368,7 @@ export default class AccountMenu extends Component { )} text={t('createAccount')} /> - { toggleAccountMenu() metricsEvent({ @@ -350,7 +388,7 @@ export default class AccountMenu extends Component { )} text={t('importAccount')} /> - { toggleAccountMenu() metricsEvent({ @@ -374,8 +412,8 @@ export default class AccountMenu extends Component { )} text={t('connectHardwareWallet')} /> - - + { toggleAccountMenu() history.push(ABOUT_US_ROUTE) @@ -385,7 +423,7 @@ export default class AccountMenu extends Component { } text={t('infoHelp')} /> - { toggleAccountMenu() history.push(SETTINGS_ROUTE) @@ -405,7 +443,7 @@ export default class AccountMenu extends Component { )} text={t('settings')} /> -
+
) } } diff --git a/ui/app/components/app/account-menu/index.scss b/ui/app/components/app/account-menu/index.scss index 8a2a34bc3..94fb24abe 100644 --- a/ui/app/components/app/account-menu/index.scss +++ b/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; diff --git a/ui/app/components/app/dropdowns/components/menu.js b/ui/app/components/app/dropdowns/components/menu.js deleted file mode 100644 index 7861ba534..000000000 --- a/ui/app/components/app/dropdowns/components/menu.js +++ /dev/null @@ -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 - ?
{children}
- : 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 - ?
{children}
- : ( -
- {icon ?
{icon}
: null} - {text ?
{text}
: null} - {subText ?
{subText}
: null} -
- ) -} - -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
-} - -export function CloseArea ({ onClick }) { - return
-} - -CloseArea.propTypes = { - onClick: PropTypes.func.isRequired, -} diff --git a/ui/app/components/app/dropdowns/tests/menu.test.js b/ui/app/components/app/dropdowns/tests/menu.test.js deleted file mode 100644 index 2291be41d..000000000 --- a/ui/app/components/app/dropdowns/tests/menu.test.js +++ /dev/null @@ -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( - , - ) - assert.equal(wrapper.find('.menu').prop('className'), 'menu Test Class') - }) - }) - - describe('Item', function () { - let wrapper - const onClickSpy = sinon.spy() - - beforeEach(function () { - wrapper = shallow( - , - ) - }) - - 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() - assert.equal(wrapper.find('.menu__divider').length, 1) - }) - }) - - describe('CloseArea', function () { - it('simulates click', function () { - const onClickSpy = sinon.spy() - const wrapper = shallow(( - - )) - wrapper.prop('onClick')() - assert.ok(onClickSpy.calledOnce) - }) - }) -}) diff --git a/ui/app/css/itcss/components/index.scss b/ui/app/css/itcss/components/index.scss index 5faf5b6df..0d1b928d9 100644 --- a/ui/app/css/itcss/components/index.scss +++ b/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'; diff --git a/ui/app/css/itcss/components/menu.scss b/ui/app/css/itcss/components/menu.scss deleted file mode 100644 index f2dfd8ca3..000000000 --- a/ui/app/css/itcss/components/menu.scss +++ /dev/null @@ -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; - } -}