diff --git a/CHANGELOG.md b/CHANGELOG.md index 03f988d57..0f4377e14 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,10 +1,12 @@ # Changelog ## Current Develop Branch +- [#6700](https://github.com/MetaMask/metamask-extension/pull/6700): Fix styles on 'import account' page, update help link ## 6.6.2 Fri Jun 07 2019 - [#6690](https://github.com/MetaMask/metamask-extension/pull/6690): Update dependencies, re-enable npm audit CI job +- [#6700](https://github.com/MetaMask/metamask-extension/pull/6700): Fix styles on 'import account' page, update help link ## 6.6.1 Thu Jun 06 2019 diff --git a/README.md b/README.md index 15c4c48a2..b742e1868 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,5 @@ # MetaMask Browser Extension -[![Build Status](https://circleci.com/gh/MetaMask/metamask-extension.svg?style=shield&circle-token=a1ddcf3cd38e29267f254c9c59d556d513e3a1fd)](https://circleci.com/gh/MetaMask/metamask-extension) [![Coverage Status](https://coveralls.io/repos/github/MetaMask/metamask-extension/badge.svg?branch=master)](https://coveralls.io/github/MetaMask/metamask-extension?branch=master) [![Stories in Ready](https://badge.waffle.io/MetaMask/metamask-extension.png?label=in%20progress&title=waffle.io)](https://waffle.io/MetaMask/metamask-extension) +[![Build Status](https://circleci.com/gh/MetaMask/metamask-extension.svg?style=shield&circle-token=a1ddcf3cd38e29267f254c9c59d556d513e3a1fd)](https://circleci.com/gh/MetaMask/metamask-extension) [![Coverage Status](https://coveralls.io/repos/github/MetaMask/metamask-extension/badge.svg?branch=master)](https://coveralls.io/github/MetaMask/metamask-extension?branch=master) You can find the latest version of MetaMask on [our official website](https://metamask.io/). For help using MetaMask, visit our [User Support Site](https://metamask.zendesk.com/hc/en-us). diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json index 41ba7ef7a..774ae4c85 100644 --- a/app/_locales/en/messages.json +++ b/app/_locales/en/messages.json @@ -454,6 +454,9 @@ "defaultNetwork": { "message": "The default network for Ether transactions is Main Net." }, + "delete": { + "message": "Delete" + }, "denExplainer": { "message": "Your DEN is your password-encrypted storage within MetaMask." }, @@ -1742,6 +1745,9 @@ "viewAccount": { "message": "View Account" }, + "viewinExplorer": { + "message": "View in Explorer" + }, "viewOnCustomBlockExplorer": { "message": "View at $1" }, diff --git a/app/_locales/zh_TW/messages.json b/app/_locales/zh_TW/messages.json index c645f2af1..4df95f72f 100644 --- a/app/_locales/zh_TW/messages.json +++ b/app/_locales/zh_TW/messages.json @@ -366,6 +366,9 @@ "defaultNetwork": { "message": "預設乙太幣交易網路為主網路" }, + "delete": { + "message": "刪除" + }, "denExplainer": { "message": "您的 DEN 是 MetaMask 中您的的密碼加密儲存庫。" }, diff --git a/app/images/icons/3dots.svg b/app/images/icons/3dots.svg new file mode 100644 index 000000000..07bbad137 --- /dev/null +++ b/app/images/icons/3dots.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/app/images/icons/caret-down.svg b/app/images/icons/caret-down.svg new file mode 100644 index 000000000..06790bf92 --- /dev/null +++ b/app/images/icons/caret-down.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/images/icons/hamburger.svg b/app/images/icons/hamburger.svg new file mode 100644 index 000000000..7a6da3089 --- /dev/null +++ b/app/images/icons/hamburger.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/app/images/logo/metamask-fox.svg b/app/images/logo/metamask-fox.svg index f3c24f79e..60a827b02 100644 --- a/app/images/logo/metamask-fox.svg +++ b/app/images/logo/metamask-fox.svg @@ -1,128 +1,31 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/package.json b/package.json index bccc23ef9..8d700c897 100644 --- a/package.json +++ b/package.json @@ -101,7 +101,7 @@ "eth-token-tracker": "^1.1.5", "eth-trezor-keyring": "^0.4.0", "ethereumjs-abi": "^0.6.4", - "ethereumjs-tx": "^1.3.7", + "ethereumjs-tx": "1.3.7", "ethereumjs-util": "github:ethereumjs/ethereumjs-util#ac5d0908536b447083ea422b435da27f26615de9", "ethereumjs-wallet": "^0.6.0", "etherscan-link": "^1.0.2", diff --git a/test/e2e/beta/metamask-beta-ui.spec.js b/test/e2e/beta/metamask-beta-ui.spec.js index 06778ab99..15087c57f 100644 --- a/test/e2e/beta/metamask-beta-ui.spec.js +++ b/test/e2e/beta/metamask-beta-ui.spec.js @@ -1478,7 +1478,7 @@ describe('MetaMask', function () { await customRpcInput.clear() await customRpcInput.sendKeys(customRpcUrl) - const customRpcSave = await findElement(driver, By.css('.page-container__footer-button')) + const customRpcSave = await findElement(driver, By.css('.network-form__footer .btn-secondary')) await customRpcSave.click() await delay(largeDelayMs * 2) }) @@ -1504,5 +1504,19 @@ describe('MetaMask', function () { assert.equal(customRpcs.length, customRpcUrls.length) }) + + it('deletes a custom RPC', async () => { + const networkListItems = await findElements(driver, By.css('.networks-tab__networks-list-name')) + const lastNetworkListItem = networkListItems[networkListItems.length - 1] + await lastNetworkListItem.click() + await delay(100) + + const deleteButton = await findElement(driver, By.css('.btn-danger')) + await deleteButton.click() + await delay(regularDelayMs) + const newNetworkListItems = await findElements(driver, By.css('.networks-tab__networks-list-name')) + + assert.equal(networkListItems.length - 1, newNetworkListItems.length) + }) }) }) diff --git a/ui/app/components/app/account-menu/index.scss b/ui/app/components/app/account-menu/index.scss index 9a61bf887..435dd6b2a 100644 --- a/ui/app/components/app/account-menu/index.scss +++ b/ui/app/components/app/account-menu/index.scss @@ -21,7 +21,7 @@ } &__icon { - margin-left: 20px; + margin-left: 1rem; cursor: pointer; &--disabled { diff --git a/ui/app/components/app/app-header/app-header.component.js b/ui/app/components/app/app-header/app-header.component.js index 343e0daab..171a3499f 100644 --- a/ui/app/components/app/app-header/app-header.component.js +++ b/ui/app/components/app/app-header/app-header.component.js @@ -101,8 +101,6 @@ export default class AppHeader extends PureComponent {
diff --git a/ui/app/components/app/app-header/index.scss b/ui/app/components/app/app-header/index.scss index d46b16f25..d3f37b7a2 100644 --- a/ui/app/components/app/app-header/index.scss +++ b/ui/app/components/app/app-header/index.scss @@ -1,6 +1,6 @@ .app-header { align-items: center; - background: $gallery; + background: $Grey-000; position: relative; z-index: $header-z-index; display: flex; @@ -9,7 +9,7 @@ flex: 0 0 auto; @media screen and (max-width: 575px) { - padding: 12px; + padding: 1rem; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); z-index: $mobile-header-z-index; } @@ -34,6 +34,7 @@ cursor: pointer; &--icon { + height: 32px; @media screen and (min-width: $break-large) { display: none; } diff --git a/ui/app/components/app/dropdowns/account-details-dropdown.js b/ui/app/components/app/dropdowns/account-details-dropdown.js index cbeccdd81..a4c33620a 100644 --- a/ui/app/components/app/dropdowns/account-details-dropdown.js +++ b/ui/app/components/app/dropdowns/account-details-dropdown.js @@ -119,8 +119,11 @@ AccountDetailsDropdown.prototype.render = function () { this.props.onClose() }, text: (rpcPrefs.blockExplorerUrl - ? this.context.t('blockExplorerView', [rpcPrefs.blockExplorerUrl.match(/^https?:\/\/(.+)/)[1]]) + ? this.context.t('viewinExplorer') : this.context.t('viewOnEtherscan')), + subText: (rpcPrefs.blockExplorerUrl + ? rpcPrefs.blockExplorerUrl.match(/^https?:\/\/(.+)/)[1] + : null), icon: h(`img`, { src: 'images/open-etherscan.svg', style: { height: '15px' } }), }), isRemovable ? h(Item, { diff --git a/ui/app/components/app/dropdowns/components/menu.js b/ui/app/components/app/dropdowns/components/menu.js index f6d8a139e..63501eaa9 100644 --- a/ui/app/components/app/dropdowns/components/menu.js +++ b/ui/app/components/app/dropdowns/components/menu.js @@ -20,16 +20,18 @@ Item.prototype.render = function () { icon, children, text, + subText, className = '', onClick, } = this.props const itemClassName = `menu__item ${className} ${onClick ? 'menu__item--clickable' : ''}` const iconComponent = icon ? h('div.menu__item__icon', [icon]) : null const textComponent = text ? h('div.menu__item__text', text) : null + const subTextComponent = subText ? h('div.menu__item__subtext', subText) : null return children ? h('div', { className: itemClassName, onClick }, children) - : h('div.menu__item', { className: itemClassName, onClick }, [ iconComponent, textComponent ] + : h('div.menu__item', { className: itemClassName, onClick }, [ iconComponent, textComponent, subTextComponent ] .filter(d => Boolean(d)) ) } diff --git a/ui/app/components/app/menu-bar/index.scss b/ui/app/components/app/menu-bar/index.scss index f699f4090..eaa50619c 100644 --- a/ui/app/components/app/menu-bar/index.scss +++ b/ui/app/components/app/menu-bar/index.scss @@ -5,19 +5,28 @@ align-items: center; flex: 0 0 auto; margin-bottom: 16px; - padding: 5px; - border-bottom: 1px solid #e5e5e5; + padding: 0 22px; + border-bottom: 1px solid $Grey-100; &__sidebar-button { - font-size: 1.25rem; + width: 20px; + height: 20px; + background-image: url(/images/icons/hamburger.svg); + background-repeat: no-repeat; + background-size: contain; + background-position: center; cursor: pointer; - padding: 10px; } &__open-in-browser { + width: 20px; + height: 20px; + background-image: url(/images/icons/3dots.svg); + background-repeat: no-repeat; + background-size: contain; + background-position: center; cursor: pointer; display: flex; justify-content: center; - padding: 10px; } } diff --git a/ui/app/components/app/menu-bar/menu-bar.component.js b/ui/app/components/app/menu-bar/menu-bar.component.js index e37fddda4..c830d8a19 100644 --- a/ui/app/components/app/menu-bar/menu-bar.component.js +++ b/ui/app/components/app/menu-bar/menu-bar.component.js @@ -30,7 +30,7 @@ export default class MenuBar extends PureComponent { position="bottom" >
{ this.context.metricsEvent({ eventOpts: { @@ -50,7 +50,7 @@ export default class MenuBar extends PureComponent { position="bottom" >
{ this.context.metricsEvent({ eventOpts: { diff --git a/ui/app/components/app/network.js b/ui/app/components/app/network.js index 9ee0a1e17..e778700cd 100644 --- a/ui/app/components/app/network.js +++ b/ui/app/components/app/network.js @@ -82,7 +82,7 @@ Network.prototype.render = function () { loading: networkNumber === 'loading', }), h('.network-name', context.t('mainnet')), - h('i.fa.fa-chevron-down.fa-lg.network-caret'), + h('.network-indicator__down-arrow'), ]) case 'ropsten-test-network': return h('.network-indicator', [ @@ -92,7 +92,7 @@ Network.prototype.render = function () { loading: networkNumber === 'loading', }), h('.network-name', context.t('ropsten')), - h('i.fa.fa-chevron-down.fa-lg.network-caret'), + h('.network-indicator__down-arrow'), ]) case 'kovan-test-network': return h('.network-indicator', [ @@ -102,7 +102,7 @@ Network.prototype.render = function () { loading: networkNumber === 'loading', }), h('.network-name', context.t('kovan')), - h('i.fa.fa-chevron-down.fa-lg.network-caret'), + h('.network-indicator__down-arrow'), ]) case 'rinkeby-test-network': return h('.network-indicator', [ @@ -112,7 +112,7 @@ Network.prototype.render = function () { loading: networkNumber === 'loading', }), h('.network-name', context.t('rinkeby')), - h('i.fa.fa-chevron-down.fa-lg.network-caret'), + h('.network-indicator__down-arrow'), ]) case 'goerli-test-network': return h('.network-indicator', [ @@ -122,7 +122,7 @@ Network.prototype.render = function () { loading: networkNumber === 'loading', }), h('.network-name', context.t('goerli')), - h('i.fa.fa-chevron-down.fa-lg.network-caret'), + h('.network-indicator__down-arrow'), ]) default: return h('.network-indicator', [ @@ -142,7 +142,7 @@ Network.prototype.render = function () { }), h('.network-name', providerName === 'localhost' ? context.t('localhost') : providerNick || context.t('privateNetwork')), - h('i.fa.fa-chevron-down.fa-lg.network-caret'), + h('.network-indicator__down-arrow'), ]) } })(), diff --git a/ui/app/components/app/selected-account/index.scss b/ui/app/components/app/selected-account/index.scss index 5339a228b..fa3079d77 100644 --- a/ui/app/components/app/selected-account/index.scss +++ b/ui/app/components/app/selected-account/index.scss @@ -7,15 +7,21 @@ &__name { max-width: 200px; + font-size: 1rem; + font-weight: 500; + line-height: 19px; + color: $black; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; text-align: center; + margin-bottom: 4px; } &__address { font-size: .75rem; - color: $silver-chalice; + line-height: .75rem; + color: #989a9b; } &__clickable { @@ -23,7 +29,8 @@ flex-direction: column; align-items: center; justify-content: center; - padding: 5px 15px; + margin: 4px 0; + padding: 6px 15px; border-radius: 10px; cursor: pointer; diff --git a/ui/app/components/app/transaction-list-item/index.scss b/ui/app/components/app/transaction-list-item/index.scss index 9e73a546c..4dba4b2c3 100644 --- a/ui/app/components/app/transaction-list-item/index.scss +++ b/ui/app/components/app/transaction-list-item/index.scss @@ -1,7 +1,7 @@ .transaction-list-item { box-sizing: border-box; min-height: 74px; - border-bottom: 1px solid $geyser; + border-bottom: 1px solid $Grey-100; display: flex; justify-content: center; align-items: center; @@ -19,7 +19,7 @@ "identicon nonce status secondary-amount"; @media screen and (max-width: $break-small) { - padding: 8px 20px 12px; + padding: .5rem 1rem; grid-template-columns: 45px 5fr 3fr; grid-template-areas: "nonce nonce nonce" @@ -44,12 +44,13 @@ &__action { text-transform: capitalize; - padding: 0 8px 2px 0; + padding: 0 0 4px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; grid-area: action; - align-self: end; + color: $Grey-800; + line-height: 20px; } &__status { @@ -72,7 +73,8 @@ align-self: start; @media screen and (max-width: $break-small) { - padding-bottom: 4px; + padding-bottom: 8px; + line-height: 12px; } } @@ -88,19 +90,22 @@ grid-area: primary-amount; align-self: end; justify-self: end; + line-height: 20px; @media screen and (max-width: $break-small) { - padding-bottom: 2px; + padding-bottom: 4px; + height: 100%; + color: $Grey-800; } } &--secondary { text-align: end; font-size: .75rem; - color: #5e6064; grid-area: secondary-amount; align-self: start; justify-self: end; + color: $Grey-500; } } diff --git a/ui/app/components/app/transaction-list-item/transaction-list-item.component.js b/ui/app/components/app/transaction-list-item/transaction-list-item.component.js index 0d4127b4f..80b26469b 100644 --- a/ui/app/components/app/transaction-list-item/transaction-list-item.component.js +++ b/ui/app/components/app/transaction-list-item/transaction-list-item.component.js @@ -179,7 +179,7 @@ export default class TransactionListItem extends PureComponent { {!hideCancel && + ) + } + + +
) } diff --git a/ui/app/pages/settings/networks-tab/networks-tab.component.js b/ui/app/pages/settings/networks-tab/networks-tab.component.js index 2f921a892..f6c8443cf 100644 --- a/ui/app/pages/settings/networks-tab/networks-tab.component.js +++ b/ui/app/pages/settings/networks-tab/networks-tab.component.js @@ -25,6 +25,7 @@ export default class NetworksTab extends PureComponent { setNetworksTabAddMode: PropTypes.func.isRequired, setRpcTarget: PropTypes.func.isRequired, setSelectedSettingsRpcUrl: PropTypes.func.isRequired, + delRpcTarget: PropTypes.func.isRequired, providerUrl: PropTypes.string, providerType: PropTypes.string, networkDefaultedToProvider: PropTypes.bool, @@ -62,7 +63,7 @@ export default class NetworksTab extends PureComponent { { this.context.t('networks') }