From a0d64c79325400dd02f9f04dabd8de00b070c046 Mon Sep 17 00:00:00 2001 From: Mark Stacey Date: Wed, 27 May 2020 17:28:33 -0300 Subject: [PATCH] Implement new fullscreen design (#8657) The fullscreen UI now shows roughly the same design as the popup UI. A few additional changes depicted in the new fullscreen designs will be implemented in subsequent PRs (e.g. the inline buttons on assets) This was done now to make asset pages easier to implement. Implementing asset pages solely for the popup UI would have been complicated by the fact that we use viewport size to switch between the two layouts, so we would have had to re-route upon resizing the window. --- package.json | 1 - test/e2e/address-book.spec.js | 1 + test/e2e/benchmark.js | 2 +- test/e2e/ethereum-on.spec.js | 4 +- test/e2e/from-import-ui.spec.js | 28 +++-- test/e2e/incremental-security.spec.js | 4 +- test/e2e/metamask-ui.spec.js | 14 ++- test/e2e/permissions.spec.js | 7 +- test/e2e/send-edit.spec.js | 1 + test/e2e/signature-request.spec.js | 3 +- test/e2e/tests/simple-send.spec.js | 1 + test/integration/lib/tx-list-items.js | 67 ----------- .../account-details.component.js | 106 ------------------ .../account-details.container.js | 24 ---- .../components/app/account-details/index.js | 1 - .../components/app/account-details/index.scss | 85 -------------- ui/app/components/app/index.scss | 2 - .../app/menu-bar/account-options-menu.js | 2 + .../components/app/wallet-overview/index.scss | 70 ++++-------- ui/app/components/app/wallet-view/index.js | 1 - .../app/wallet-view/wallet-view.component.js | 72 ------------ .../app/wallet-view/wallet-view.container.js | 18 --- ui/app/components/ui/menu/menu-item.js | 6 +- .../css/itcss/components/newui-sections.scss | 74 ------------ ui/app/pages/home/home.component.js | 72 ++++-------- ui/app/pages/home/index.scss | 23 +--- yarn.lock | 21 ---- 27 files changed, 101 insertions(+), 609 deletions(-) delete mode 100644 test/integration/lib/tx-list-items.js delete mode 100644 ui/app/components/app/account-details/account-details.component.js delete mode 100644 ui/app/components/app/account-details/account-details.container.js delete mode 100644 ui/app/components/app/account-details/index.js delete mode 100644 ui/app/components/app/account-details/index.scss delete mode 100644 ui/app/components/app/wallet-view/index.js delete mode 100644 ui/app/components/app/wallet-view/wallet-view.component.js delete mode 100644 ui/app/components/app/wallet-view/wallet-view.container.js diff --git a/package.json b/package.json index 0d51caef9..b735bb90f 100644 --- a/package.json +++ b/package.json @@ -154,7 +154,6 @@ "react-dom": "^16.12.0", "react-idle-timer": "^4.2.5", "react-inspector": "^2.3.0", - "react-media": "^1.8.0", "react-popper": "^2.2.3", "react-redux": "^7.2.0", "react-router-dom": "^5.1.2", diff --git a/test/e2e/address-book.spec.js b/test/e2e/address-book.spec.js index 35a86a58d..72f194fa2 100644 --- a/test/e2e/address-book.spec.js +++ b/test/e2e/address-book.spec.js @@ -195,6 +195,7 @@ describe('MetaMask', function () { }) it('finds the transaction in the transactions list', async function () { + await driver.clickElement(By.css('[data-testid="home__history-tab"]')) await driver.wait(async () => { const confirmedTxes = await driver.findElements(By.css('.transaction-list__completed-transactions .transaction-list-item')) return confirmedTxes.length === 1 diff --git a/test/e2e/benchmark.js b/test/e2e/benchmark.js index 86f8c9f9d..e8612065b 100644 --- a/test/e2e/benchmark.js +++ b/test/e2e/benchmark.js @@ -16,7 +16,7 @@ async function measurePage (pageName) { const passwordField = await driver.findElement(By.css('#password')) await passwordField.sendKeys('correct horse battery staple') await passwordField.sendKeys(Key.ENTER) - await driver.findElement(By.css('.account-details__account-name')) + await driver.findElement(By.css('.selected-account__name')) await driver.navigate(pageName) await driver.delay(1000) metrics = await driver.collectMetrics() diff --git a/test/e2e/ethereum-on.spec.js b/test/e2e/ethereum-on.spec.js index 9ec96c0e2..19bcb9e5d 100644 --- a/test/e2e/ethereum-on.spec.js +++ b/test/e2e/ethereum-on.spec.js @@ -84,8 +84,8 @@ describe('MetaMask', function () { await driver.clickElement(By.xpath(`//button[contains(text(), '${enLocaleMessages.remindMeLater.message}')]`)) await driver.delay(regularDelayMs) - await driver.clickElement(By.css('.account-details__details-button')) - await driver.delay(regularDelayMs) + await driver.clickElement(By.css('[data-testid="account-options-menu-button"]')) + await driver.clickElement(By.css('[data-testid="account-options-menu__account-details"]')) }) it('gets the current accounts address', async function () { diff --git a/test/e2e/from-import-ui.spec.js b/test/e2e/from-import-ui.spec.js index f187cdf04..6771dfd6b 100644 --- a/test/e2e/from-import-ui.spec.js +++ b/test/e2e/from-import-ui.spec.js @@ -98,7 +98,8 @@ describe('Using MetaMask with an existing account', function () { describe('Show account information', function () { it('shows the correct account address', async function () { - await driver.clickElement(By.css('.account-details__details-button')) + await driver.clickElement(By.css('[data-testid="account-options-menu-button"]')) + await driver.clickElement(By.css('[data-testid="account-options-menu__account-details"]')) await driver.findVisibleElement(By.css('.qr-wrapper')) await driver.delay(regularDelayMs) @@ -110,7 +111,8 @@ describe('Using MetaMask with an existing account', function () { }) it('shows a QR code for the account', async function () { - await driver.clickElement(By.css('.account-details__details-button')) + await driver.clickElement(By.css('[data-testid="account-options-menu-button"]')) + await driver.clickElement(By.css('[data-testid="account-options-menu__account-details"]')) await driver.findVisibleElement(By.css('.qr-wrapper')) const detailModal = await driver.findElement(By.css('span .modal')) await driver.delay(regularDelayMs) @@ -167,7 +169,7 @@ describe('Using MetaMask with an existing account', function () { }) it('should show the correct account name', async function () { - const [accountName] = await driver.findElements(By.css('.account-details__account-name')) + const accountName = await driver.findElement(By.css('.selected-account__name')) assert.equal(await accountName.getText(), '2nd account') await driver.delay(regularDelayMs) }) @@ -214,6 +216,7 @@ describe('Using MetaMask with an existing account', function () { }) it('finds the transaction in the transactions list', async function () { + await driver.clickElement(By.css('[data-testid="home__history-tab"]')) await driver.wait(async () => { const confirmedTxes = await driver.findElements(By.css('.transaction-list__completed-transactions .transaction-list-item')) return confirmedTxes.length === 1 @@ -243,23 +246,26 @@ describe('Using MetaMask with an existing account', function () { }) it('should show the correct account name', async function () { - const [accountName] = await driver.findElements(By.css('.account-details__account-name')) + const accountName = await driver.findElement(By.css('.selected-account__name')) assert.equal(await accountName.getText(), 'Account 4') await driver.delay(regularDelayMs) }) it('should show the imported label', async function () { - const [importedLabel] = await driver.findElements(By.css('.account-details__keyring-label')) + await driver.clickElement(By.css('.account-menu__icon')) + + // confirm 4th account is account 4, as expected + const accountMenuItemSelector = '.account-menu__account:nth-child(4)' + const accountName = await driver.findElement(By.css(`${accountMenuItemSelector} .account-menu__name`)) + assert.equal(await accountName.getText(), 'Account 4') + // confirm label is present on the same menu item + const importedLabel = await driver.findElement(By.css(`${accountMenuItemSelector} .keyring-label`)) assert.equal(await importedLabel.getText(), 'IMPORTED') - await driver.delay(regularDelayMs) }) }) describe('Imports and removes an account', function () { it('choose Create Account from the account menu', async function () { - await driver.clickElement(By.css('.account-menu__icon')) - await driver.delay(regularDelayMs) - await driver.clickElement(By.xpath(`//div[contains(text(), 'Import Account')]`)) await driver.delay(regularDelayMs) }) @@ -273,7 +279,7 @@ describe('Using MetaMask with an existing account', function () { }) it('should open the remove account modal', async function () { - const [accountName] = await driver.findElements(By.css('.account-details__account-name')) + const accountName = await driver.findElement(By.css('.selected-account__name')) assert.equal(await accountName.getText(), 'Account 5') await driver.delay(regularDelayMs) @@ -294,7 +300,7 @@ describe('Using MetaMask with an existing account', function () { await driver.delay(regularDelayMs) - const [accountName] = await driver.findElements(By.css('.account-details__account-name')) + const accountName = await driver.findElement(By.css('.selected-account__name')) assert.equal(await accountName.getText(), 'Account 1') await driver.delay(regularDelayMs) diff --git a/test/e2e/incremental-security.spec.js b/test/e2e/incremental-security.spec.js index 8def26110..7a3848925 100644 --- a/test/e2e/incremental-security.spec.js +++ b/test/e2e/incremental-security.spec.js @@ -90,8 +90,8 @@ describe('MetaMask', function () { await driver.clickElement(By.xpath(`//button[contains(text(), '${enLocaleMessages.remindMeLater.message}')]`)) await driver.delay(regularDelayMs) - await driver.clickElement(By.css('.account-details__details-button')) - await driver.delay(regularDelayMs) + await driver.clickElement(By.css('[data-testid="account-options-menu-button"]')) + await driver.clickElement(By.css('[data-testid="account-options-menu__account-details"]')) }) it('gets the current accounts address', async function () { diff --git a/test/e2e/metamask-ui.spec.js b/test/e2e/metamask-ui.spec.js index bf1e9c6c2..871290156 100644 --- a/test/e2e/metamask-ui.spec.js +++ b/test/e2e/metamask-ui.spec.js @@ -119,7 +119,8 @@ describe('MetaMask', function () { describe('Show account information', function () { it('shows the QR code for the account', async function () { - await driver.clickElement(By.css('.account-details__details-button')) + await driver.clickElement(By.css('[data-testid="account-options-menu-button"]')) + await driver.clickElement(By.css('[data-testid="account-options-menu__account-details"]')) await driver.findVisibleElement(By.css('.qr-wrapper')) await driver.delay(regularDelayMs) @@ -169,7 +170,7 @@ describe('MetaMask', function () { }) it('should display correct account name', async function () { - const accountName = await driver.findElement(By.css('.account-details__account-name')) + const accountName = await driver.findElement(By.css('.selected-account__name')) assert.equal(await accountName.getText(), '2nd account') await driver.delay(regularDelayMs) }) @@ -265,6 +266,7 @@ describe('MetaMask', function () { }) it('finds the transaction in the transactions list', async function () { + await driver.clickElement(By.css('[data-testid="home__history-tab"]')) await driver.wait(async () => { const confirmedTxes = await driver.findElements(By.css('.transaction-list__completed-transactions .transaction-list-item')) return confirmedTxes.length === 1 @@ -810,6 +812,7 @@ describe('MetaMask', function () { }) it('clicks on the Add Token button', async function () { + await driver.clickElement(By.css(`[data-testid="home__asset-tab"]`)) await driver.clickElement(By.xpath(`//button[contains(text(), 'Add Token')]`)) await driver.delay(regularDelayMs) }) @@ -900,6 +903,7 @@ describe('MetaMask', function () { }) it('finds the transaction in the transactions list', async function () { + await driver.clickElement(By.css(`[data-testid="home__history-tab"]`)) await driver.wait(async () => { const confirmedTxes = await driver.findElements(By.css('.transaction-list__completed-transactions .transaction-list-item')) return confirmedTxes.length === 1 @@ -992,6 +996,8 @@ describe('MetaMask', function () { const txStatuses = await driver.findElements(By.css('.list-item__heading')) await driver.wait(until.elementTextMatches(txStatuses[0], /Send\sTST/), 10000) + await driver.clickElement(By.css('[data-testid="home__asset-tab"]')) + await driver.clickElement(By.css('[data-testid="wallet-balance"]')) await driver.clickElement(By.css('.token-cell')) @@ -1019,6 +1025,8 @@ describe('MetaMask', function () { await driver.switchToWindow(extension) await driver.delay(regularDelayMs) + await driver.clickElement(By.css('[data-testid="home__history-tab"]')) + await driver.wait(async () => { const pendingTxes = await driver.findElements(By.css('.transaction-list__pending-transactions .transaction-list-item')) return pendingTxes.length === 1 @@ -1219,6 +1227,8 @@ describe('MetaMask', function () { describe('Hide token', function () { it('hides the token when clicked', async function () { + await driver.clickElement(By.css('[data-testid="home__asset-tab"]')) + await driver.clickElement(By.css('.token-cell__ellipsis')) const byTokenMenuDropdownOption = By.css('.menu__item--clickable') diff --git a/test/e2e/permissions.spec.js b/test/e2e/permissions.spec.js index cfdcd22ee..4785b4fe8 100644 --- a/test/e2e/permissions.spec.js +++ b/test/e2e/permissions.spec.js @@ -85,8 +85,8 @@ describe('MetaMask', function () { await driver.clickElement(By.xpath(`//button[contains(text(), '${enLocaleMessages.remindMeLater.message}')]`)) await driver.delay(regularDelayMs) - await driver.clickElement(By.css('.account-details__details-button')) - await driver.delay(regularDelayMs) + await driver.clickElement(By.css('[data-testid="account-options-menu-button"]')) + await driver.clickElement(By.css('[data-testid="account-options-menu__account-details"]')) }) it('gets the current accounts address', async function () { @@ -132,7 +132,8 @@ describe('MetaMask', function () { }) it('shows connected sites', async function () { - await driver.clickElement(By.xpath(`//button[contains(text(), 'Connected sites')]`)) + await driver.clickElement(By.css('[data-testid="account-options-menu-button"]')) + await driver.clickElement(By.css('[data-testid="account-options-menu__connected-sites"]')) await driver.findElement(By.xpath(`//h2[contains(text(), 'Connected sites')]`)) diff --git a/test/e2e/send-edit.spec.js b/test/e2e/send-edit.spec.js index d335d3a9a..d5b9f8e55 100644 --- a/test/e2e/send-edit.spec.js +++ b/test/e2e/send-edit.spec.js @@ -197,6 +197,7 @@ describe('Using MetaMask with an existing account', function () { }) it('finds the transaction in the transactions list', async function () { + await driver.clickElement(By.css('[data-testid="home__history-tab"]')) await driver.wait(async () => { const confirmedTxes = await driver.findElements(By.css('.transaction-list__completed-transactions .transaction-list-item')) return confirmedTxes.length === 1 diff --git a/test/e2e/signature-request.spec.js b/test/e2e/signature-request.spec.js index de61d75f7..d76dbdfc9 100644 --- a/test/e2e/signature-request.spec.js +++ b/test/e2e/signature-request.spec.js @@ -120,7 +120,8 @@ describe('MetaMask', function () { }) it('gets the current accounts address', async function () { - await driver.clickElement(By.css('.account-details__details-button')) + await driver.clickElement(By.css('[data-testid="account-options-menu-button"]')) + await driver.clickElement(By.css('[data-testid="account-options-menu__account-details"]')) await driver.delay(regularDelayMs) const addressInput = await driver.findElement(By.css('.qr-ellip-address')) diff --git a/test/e2e/tests/simple-send.spec.js b/test/e2e/tests/simple-send.spec.js index 88f45b25b..d40ee8e8d 100644 --- a/test/e2e/tests/simple-send.spec.js +++ b/test/e2e/tests/simple-send.spec.js @@ -22,6 +22,7 @@ describe('MetaMask Browser Extension', function () { await amountField.sendKeys('1') await driver.clickElement(By.css('[data-testid="page-container-footer-next"]')) await driver.clickElement(By.css('[data-testid="page-container-footer-next"]')) + await driver.clickElement(By.css('[data-testid="home__history-tab"]')) await driver.findElement(By.css('.transaction-list-item')) }) }) diff --git a/test/integration/lib/tx-list-items.js b/test/integration/lib/tx-list-items.js deleted file mode 100644 index 0319276b9..000000000 --- a/test/integration/lib/tx-list-items.js +++ /dev/null @@ -1,67 +0,0 @@ -const reactTriggerChange = require('../../lib/react-trigger-change') -const { - queryAsync, - findAsync, -} = require('../../lib/util') -const fetchMockResponses = require('../../data/fetch-mocks.json') - -QUnit.module('tx list items') - -QUnit.test('renders list items successfully', (assert) => { - const done = assert.async() - runTxListItemsTest(assert).then(done).catch((err) => { - assert.notOk(err, `Error was thrown: ${err.stack}`) - done() - }) -}) - -global.ethQuery = global.ethQuery || {} -global.ethQuery.getTransactionCount = (_, cb) => { - cb(null, '0x4') -} - -async function runTxListItemsTest (assert) { - console.log('*** start runTxListItemsTest') - const selectState = await queryAsync($, 'select') - selectState.val('tx list items') - reactTriggerChange(selectState[0]) - - const realFetch = window.fetch.bind(window) - window.fetch = (...args) => { - if (args[0] === 'https://ethgasstation.info/json/ethgasAPI.json') { - return Promise.resolve({ json: () => Promise.resolve(JSON.parse(fetchMockResponses.ethGasBasic)) }) - } else if (args[0] === 'https://ethgasstation.info/json/predictTable.json') { - return Promise.resolve({ json: () => Promise.resolve(JSON.parse(fetchMockResponses.ethGasPredictTable)) }) - } else if (args[0].match(/chromeextensionmm/)) { - return Promise.resolve({ json: () => Promise.resolve(JSON.parse(fetchMockResponses.metametrics)) }) - } - return realFetch.fetch(...args) - } - - const metamaskLogo = await queryAsync($, '.app-header__logo-container') - assert.ok(metamaskLogo[0], 'metamask logo present') - metamaskLogo[0].click() - - const txListItems = await queryAsync($, '.transaction-list-item') - assert.equal(txListItems.length, 6, 'all tx list items are rendered') - - const unapprovedMsg = txListItems[0] - const unapprovedMsgDescription = await findAsync($(unapprovedMsg), '.transaction-list-item__status--unapproved') - assert.equal(unapprovedMsgDescription[0].textContent, 'Unapproved', 'unapprovedMsg has correct description') - - const approvedTx = txListItems[2] - const approvedTxRenderedStatus = await findAsync($(approvedTx), '.transaction-list-item__status--queued') - assert.equal(approvedTxRenderedStatus[0].textContent, 'Queued', 'approvedTx has correct label') - - const confirmedTokenTx1 = txListItems[4] - const confirmedTokenTx1Token = await findAsync($(confirmedTokenTx1), '.list-item__heading') - const confirmedTokenTx1Address = await findAsync($(confirmedTokenTx1), '.list-item__subheading') - assert.equal(confirmedTokenTx1Token[0].textContent, 'Send FTO ', 'Confirm token symbol is correct') - assert.equal(confirmedTokenTx1Address[0].textContent, 'Mar 29, 2018 · To: 0xe788...81a9', 'confirmedTokenTx has correct status') - - const confirmedTokenTx2 = txListItems[5] - const confirmedTokenTx2Address = await findAsync($(confirmedTokenTx2), '.list-item__subheading') - const confirmedTokenTx2Token = await findAsync($(confirmedTokenTx2), '.list-item__heading') - assert.equal(confirmedTokenTx2Token[0].textContent, 'Send FTT ', 'Confirm token symbol is correct') - assert.equal(confirmedTokenTx2Address[0].textContent, 'Mar 29, 2018 · To: 0xe788...81a9', 'confirmedTokenTx has correct status') -} diff --git a/ui/app/components/app/account-details/account-details.component.js b/ui/app/components/app/account-details/account-details.component.js deleted file mode 100644 index 172ea1868..000000000 --- a/ui/app/components/app/account-details/account-details.component.js +++ /dev/null @@ -1,106 +0,0 @@ -import React, { Component } from 'react' -import PropTypes from 'prop-types' -import classnames from 'classnames' -import Identicon from '../../ui/identicon' -import Tooltip from '../../ui/tooltip-v2' -import copyToClipboard from 'copy-to-clipboard' - -export default class AccountDetails extends Component { - static contextTypes = { - t: PropTypes.func.isRequired, - metricsEvent: PropTypes.func, - } - - static defaultProps = { - hideSidebar: () => {}, - showAccountDetailModal: () => {}, - } - - static propTypes = { - hideSidebar: PropTypes.func, - showAccountDetailModal: PropTypes.func, - showConnectedSites: PropTypes.func.isRequired, - label: PropTypes.string.isRequired, - checksummedAddress: PropTypes.string.isRequired, - name: PropTypes.string.isRequired, - } - - state = { - hasCopied: false, - copyToClipboardPressed: false, - } - - copyAddress () { - copyToClipboard(this.props.checksummedAddress) - this.context.metricsEvent({ - eventOpts: { - category: 'Navigation', - action: 'Home', - name: 'Copied Address', - }, - }) - this.setState({ hasCopied: true }) - setTimeout(() => this.setState({ hasCopied: false }), 3000) - } - - render () { - const { t } = this.context - - const { - hideSidebar, - showAccountDetailModal, - showConnectedSites, - label, - checksummedAddress, - name, - } = this.props - - const { - hasCopied, - copyToClipboardPressed, - } = this.state - - return ( -
-
-
-
- {label} -
-
- - - {name} - -
- - -
-
-
- - - -
- ) - } -} diff --git a/ui/app/components/app/account-details/account-details.container.js b/ui/app/components/app/account-details/account-details.container.js deleted file mode 100644 index eb1a1a1e1..000000000 --- a/ui/app/components/app/account-details/account-details.container.js +++ /dev/null @@ -1,24 +0,0 @@ -import { connect } from 'react-redux' -import PropTypes from 'prop-types' -import { hideSidebar, showModal } from '../../../store/actions' -import AccountDetails from './account-details.component' - -function mapDispatchToProps (dispatch) { - return { - hideSidebar: () => dispatch(hideSidebar()), - showAccountDetailModal: () => { - dispatch(showModal({ name: 'ACCOUNT_DETAILS' })) - }, - } -} - -const AccountDetailsContainer = connect(null, mapDispatchToProps)(AccountDetails) - -AccountDetailsContainer.propTypes = { - label: PropTypes.string.isRequired, - checksummedAddress: PropTypes.string.isRequired, - name: PropTypes.string.isRequired, - showConnectedSites: PropTypes.func.isRequired, -} - -export default AccountDetailsContainer diff --git a/ui/app/components/app/account-details/index.js b/ui/app/components/app/account-details/index.js deleted file mode 100644 index dca244fee..000000000 --- a/ui/app/components/app/account-details/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from './account-details.container' diff --git a/ui/app/components/app/account-details/index.scss b/ui/app/components/app/account-details/index.scss deleted file mode 100644 index d50fff331..000000000 --- a/ui/app/components/app/account-details/index.scss +++ /dev/null @@ -1,85 +0,0 @@ -.account-details { - flex: 0 0 auto; - - &__keyring-label { - height: 50px; - color: $dusty-gray; - font-family: Roboto; - font-size: 10px; - text-align: right; - padding: 17px 20px 0; - box-sizing: border-box; - } - - &__name-container { - flex: 0 0 auto; - cursor: pointer; - width: 100%; - margin: 0 auto; - } - - &__account-name { - font-size: 24px; - color: $black; - margin-top: 8px; - margin-bottom: .9rem; - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - width: 100%; - padding: 0 8px; - text-align: center; - } - - &__details-buttons { - display: flex; - justify-content: space-between; - width: 175px; - } - - &__details-button { - font-size: 10px; - border-radius: 17px; - background-color: transparent; - margin: 0 auto; - padding: 4px 12px; - flex: 0 0 auto; - } - - &__tooltip { - display: flex; - justify-content: center; - align-items: center; - padding: 24px; - } - - &__address { - border-radius: 3px; - background-color: $alto; - color: $scorpion; - font-size: 14px; - line-height: 12px; - padding: 4px 12px; - cursor: pointer; - flex: 0 0 auto; - - &__pressed { - background-color: $manatee, - } - } - - &__sidebar-close { - - @media screen and (max-width: 575px) { - &::after { - content: '\00D7'; - font-size: 40px; - color: $tundora; - position: absolute; - top: 12px; - left: 12px; - cursor: pointer; - } - } - } -} diff --git a/ui/app/components/app/index.scss b/ui/app/components/app/index.scss index aa2d9bc96..2f2aa89a9 100644 --- a/ui/app/components/app/index.scss +++ b/ui/app/components/app/index.scss @@ -1,5 +1,3 @@ -@import 'account-details/index'; - @import 'account-menu/index'; @import 'add-token-button/index'; diff --git a/ui/app/components/app/menu-bar/account-options-menu.js b/ui/app/components/app/menu-bar/account-options-menu.js index 860204be5..9c7162cda 100644 --- a/ui/app/components/app/menu-bar/account-options-menu.js +++ b/ui/app/components/app/menu-bar/account-options-menu.js @@ -69,6 +69,7 @@ export default function AccountOptionsMenu ({ anchorElement, onClose }) { { t('expandView') } { dispatch(showModal({ name: 'ACCOUNT_DETAILS' })) viewAccountDetailsEvent() @@ -102,6 +103,7 @@ export default function AccountOptionsMenu ({ anchorElement, onClose }) { } { openConnectedSitesEvent() history.push(CONNECTED_ROUTE) diff --git a/ui/app/components/app/wallet-overview/index.scss b/ui/app/components/app/wallet-overview/index.scss index f177544c0..1772ce135 100644 --- a/ui/app/components/app/wallet-overview/index.scss +++ b/ui/app/components/app/wallet-overview/index.scss @@ -6,49 +6,35 @@ height: 54px; min-width: 0; - @media screen and (max-width: $break-small) { - flex-direction: column; - height: initial; - width: 100%; - } + flex-direction: column; + height: initial; + width: 100%; &__balance { flex: 1; display: flex; - flex-direction: row; + flex-direction: column; align-items: center; - min-width: 0; - - @media screen and (max-width: $break-small) { - flex-direction: column; - width: 100%; - } + width: 100%; } &__buttons { display: flex; flex-direction: row; - - @media screen and (max-width: $break-small) { - margin-bottom: 16px; - } + margin-bottom: 16px; } } .eth-overview { &__balance { - margin: 0 12px; display: flex; flex-direction: column; min-width: 0; position: relative; - - @media screen and (max-width: $break-small) { - align-items: center; - margin: 16px 0; - padding: 0 16px; - max-width: 100%; - } + align-items: center; + margin: 16px 0; + padding: 0 16px; + max-width: 100%; } &__primary-container { @@ -56,15 +42,11 @@ } &__primary-balance { - font-size: 1.5rem; color: $black; - - @media screen and (max-width: $break-small) { - font-size: 32px; - line-height: 45px; - width: 100%; - justify-content: center; - } + font-size: 32px; + line-height: 45px; + width: 100%; + justify-content: center; } &__cached-star { @@ -100,30 +82,22 @@ .token-overview { &__balance { - margin: 0 12px; display: flex; flex-direction: column; min-width: 0; position: relative; - - @media screen and (max-width: $break-small) { - align-items: center; - margin: 16px 0; - padding: 0 16px; - max-width: 100%; - } + align-items: center; + margin: 16px 0; + padding: 0 16px; + max-width: 100%; } &__primary-balance { - font-size: 1.5rem; color: $black; - - @media screen and (max-width: $break-small) { - font-size: 32px; - line-height: 45px; - width: 100%; - justify-content: center; - } + font-size: 32px; + line-height: 45px; + width: 100%; + justify-content: center; } &__button { diff --git a/ui/app/components/app/wallet-view/index.js b/ui/app/components/app/wallet-view/index.js deleted file mode 100644 index bc8fd26ab..000000000 --- a/ui/app/components/app/wallet-view/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from './wallet-view.container' diff --git a/ui/app/components/app/wallet-view/wallet-view.component.js b/ui/app/components/app/wallet-view/wallet-view.component.js deleted file mode 100644 index 5bd1c140c..000000000 --- a/ui/app/components/app/wallet-view/wallet-view.component.js +++ /dev/null @@ -1,72 +0,0 @@ -import classnames from 'classnames' -import PropTypes from 'prop-types' -import React, { Component } from 'react' -import AccountDetails from '../account-details' - -import { checksumAddress } from '../../../helpers/utils/util' -import AssetList from '../asset-list' -import { CONNECTED_ROUTE } from '../../../helpers/constants/routes' - -export default class WalletView extends Component { - static contextTypes = { - t: PropTypes.func, - metricsEvent: PropTypes.func, - } - - static defaultProps = { - responsiveDisplayClassname: '', - } - - static propTypes = { - history: PropTypes.object.isRequired, - identities: PropTypes.object.isRequired, - keyrings: PropTypes.array.isRequired, - responsiveDisplayClassname: PropTypes.string, - selectedAddress: PropTypes.string.isRequired, - } - - showConnectedSites = () => { - const { history } = this.props - history.push(CONNECTED_ROUTE) - } - - render () { - const { - identities, - keyrings, - responsiveDisplayClassname, - selectedAddress, - } = this.props - - const checksummedAddress = checksumAddress(selectedAddress) - - const keyring = keyrings.find((kr) => { - return kr.accounts.includes(selectedAddress) - }) - - let label = '' - let type - if (keyring) { - type = keyring.type - if (type !== 'HD Key Tree') { - if (type.toLowerCase().search('hardware') !== -1) { - label = this.context.t('hardware') - } else { - label = this.context.t('imported') - } - } - } - - return ( -
- - -
- ) - } -} diff --git a/ui/app/components/app/wallet-view/wallet-view.container.js b/ui/app/components/app/wallet-view/wallet-view.container.js deleted file mode 100644 index 1f2566057..000000000 --- a/ui/app/components/app/wallet-view/wallet-view.container.js +++ /dev/null @@ -1,18 +0,0 @@ -import { connect } from 'react-redux' -import { withRouter } from 'react-router-dom' -import { compose } from 'redux' -import WalletView from './wallet-view.component' -import { getSelectedAddress } from '../../../selectors' - -function mapStateToProps (state) { - return { - identities: state.metamask.identities, - keyrings: state.metamask.keyrings, - selectedAddress: getSelectedAddress(state), - } -} - -export default compose( - withRouter, - connect(mapStateToProps) -)(WalletView) diff --git a/ui/app/components/ui/menu/menu-item.js b/ui/app/components/ui/menu/menu-item.js index 95584ca77..c2893b444 100644 --- a/ui/app/components/ui/menu/menu-item.js +++ b/ui/app/components/ui/menu/menu-item.js @@ -2,8 +2,8 @@ import React from 'react' import PropTypes from 'prop-types' import classnames from 'classnames' -const MenuItem = ({ children, className, iconClassName, onClick, subtitle }) => ( -
diff --git a/ui/app/pages/home/index.scss b/ui/app/pages/home/index.scss index b00a0b3aa..bd4f85775 100644 --- a/ui/app/pages/home/index.scss +++ b/ui/app/pages/home/index.scss @@ -13,23 +13,12 @@ } &__balance-wrapper { - @media screen and (max-width: $break-small) { - display: flex; - flex-direction: column; - justify-content: flex-start; - align-items: center; - flex: 0 0 auto; - padding-top: 16px; - } - - @media screen and (min-width: $break-large) { - display: flex; - flex-direction: row; - justify-content: flex-start; - align-items: center; - margin: 2.3em 2.37em .8em; - flex: 0 0 auto; - } + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: center; + flex: 0 0 auto; + padding-top: 16px; } // TODO: fix style import order so this isn't required to override specificity of `tab` class diff --git a/yarn.lock b/yarn.lock index 5fd4520ed..a78eee92c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -16059,13 +16059,6 @@ json-text-sequence@~0.1.0: dependencies: delimit-stream "0.1.0" -json2mq@^0.2.0: - version "0.2.0" - resolved "https://registry.yarnpkg.com/json2mq/-/json2mq-0.2.0.tgz#b637bd3ba9eabe122c83e9720483aeb10d2c904a" - integrity sha1-tje9O6nqvhIsg+lyBIOusQ0skEo= - dependencies: - string-convert "^0.2.0" - json3@^3.3.2: version "3.3.3" resolved "https://registry.yarnpkg.com/json3/-/json3-3.3.3.tgz#7fc10e375fc5ae42c4705a5cc0aa6f62be305b81" @@ -22560,15 +22553,6 @@ react-lifecycles-compat@^3.0.2, react-lifecycles-compat@^3.0.4: resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362" integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA== -react-media@^1.8.0: - version "1.8.0" - resolved "https://registry.yarnpkg.com/react-media/-/react-media-1.8.0.tgz#b86d6d62313f95d53af7d06e23d4f49adfb131d3" - integrity sha512-XcfqkDQj5/hmJod/kXUAZljJyMVkWrBWOkzwynAR8BXOGlbFLGBwezM0jQHtp2BrSymhf14/XrQrb3gGBnGK4g== - dependencies: - invariant "^2.2.2" - json2mq "^0.2.0" - prop-types "^15.5.10" - react-motion@^0.5.2: version "0.5.2" resolved "https://registry.yarnpkg.com/react-motion/-/react-motion-0.5.2.tgz#0dd3a69e411316567927917c6626551ba0607316" @@ -25470,11 +25454,6 @@ strict-uri-encode@^1.0.0: resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz#279b225df1d582b1f54e65addd4352e18faa0713" integrity sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM= -string-convert@^0.2.0: - version "0.2.1" - resolved "https://registry.yarnpkg.com/string-convert/-/string-convert-0.2.1.tgz#6982cc3049fbb4cd85f8b24568b9d9bf39eeff97" - integrity sha1-aYLMMEn7tM2F+LJFaLnZvznu/5c= - string-template@~0.2.1: version "0.2.1" resolved "https://registry.yarnpkg.com/string-template/-/string-template-0.2.1.tgz#42932e598a352d01fc22ec3367d9d84eec6c9add"