From f7504d153e1826b7a78cdfa4deed9b067cd03e52 Mon Sep 17 00:00:00 2001 From: Mark Stacey Date: Mon, 30 Mar 2020 23:44:10 -0300 Subject: [PATCH] Move TokenCell styles alongside component (#8257) The styles for the TokenCell component have been moved to be alongside the component. They have also been renamed from `token-list-item` to match the component name. --- test/e2e/metamask-ui.spec.js | 4 ++-- ui/app/components/app/index.scss | 2 ++ ui/app/components/app/tests/token-cell.spec.js | 6 +++--- .../app/token-cell/token-cell.component.js | 18 +++++++++--------- .../app/token-cell/token-cell.scss} | 4 ++-- .../app/token-cell/token-cell.test.js | 6 +++--- ui/app/css/itcss/components/index.scss | 2 -- 7 files changed, 21 insertions(+), 21 deletions(-) rename ui/app/{css/itcss/components/token-list.scss => components/app/token-cell/token-cell.scss} (99%) diff --git a/test/e2e/metamask-ui.spec.js b/test/e2e/metamask-ui.spec.js index d2a1472da..43700a256 100644 --- a/test/e2e/metamask-ui.spec.js +++ b/test/e2e/metamask-ui.spec.js @@ -995,7 +995,7 @@ describe('MetaMask', function () { await driver.clickElement(By.css('.wallet-balance')) - await driver.clickElement(By.css('.token-list-item')) + await driver.clickElement(By.css('.token-cell')) await driver.delay(1000) const tokenBalanceAmount = await driver.findElements(By.css('.transaction-view-balance__primary-balance')) @@ -1223,7 +1223,7 @@ describe('MetaMask', function () { describe('Hide token', function () { it('hides the token when clicked', async function () { - await driver.clickElement(By.css('.token-list-item__ellipsis')) + await driver.clickElement(By.css('.token-cell__ellipsis')) const byTokenMenuDropdownOption = By.css('.menu__item--clickable') await driver.clickElement(byTokenMenuDropdownOption) diff --git a/ui/app/components/app/index.scss b/ui/app/components/app/index.scss index 82ed1314b..7e4713a32 100644 --- a/ui/app/components/app/index.scss +++ b/ui/app/components/app/index.scss @@ -48,6 +48,8 @@ @import '../ui/token-balance/index'; +@import 'token-cell/token-cell'; + @import 'transaction-activity-log/index'; @import 'transaction-breakdown/index'; diff --git a/ui/app/components/app/tests/token-cell.spec.js b/ui/app/components/app/tests/token-cell.spec.js index 73ac6bb29..858ae987a 100644 --- a/ui/app/components/app/tests/token-cell.spec.js +++ b/ui/app/components/app/tests/token-cell.spec.js @@ -55,15 +55,15 @@ describe('Token Cell', function () { }) it('renders token balance', function () { - assert.equal(wrapper.find('.token-list-item__token-balance').text(), '5.000') + assert.equal(wrapper.find('.token-cell__token-balance').text(), '5.000') }) it('renders token symbol', function () { - assert.equal(wrapper.find('.token-list-item__token-symbol').text(), 'TEST') + assert.equal(wrapper.find('.token-cell__token-symbol').text(), 'TEST') }) it('renders converted fiat amount', function () { - assert.equal(wrapper.find('.token-list-item__fiat-amount').text(), '0.52 USD') + assert.equal(wrapper.find('.token-cell__fiat-amount').text(), '0.52 USD') }) }) diff --git a/ui/app/components/app/token-cell/token-cell.component.js b/ui/app/components/app/token-cell/token-cell.component.js index 35a8367f4..c4a537d9f 100644 --- a/ui/app/components/app/token-cell/token-cell.component.js +++ b/ui/app/components/app/token-cell/token-cell.component.js @@ -64,29 +64,29 @@ export default class TokenCell extends Component { return (
-
-
-
{string || 0}
-
{symbol}
+
+
+
{string || 0}
+
{symbol}
{showFiat && ( -
+
{formattedFiat}
)}
{ e.stopPropagation() this.setState({ tokenMenuOpen: true }) diff --git a/ui/app/css/itcss/components/token-list.scss b/ui/app/components/app/token-cell/token-cell.scss similarity index 99% rename from ui/app/css/itcss/components/token-list.scss rename to ui/app/components/app/token-cell/token-cell.scss index 49d0c290e..6b0ad83a1 100644 --- a/ui/app/css/itcss/components/token-list.scss +++ b/ui/app/components/app/token-cell/token-cell.scss @@ -1,7 +1,7 @@ $wallet-balance-breakpoint: 890px; $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (max-width: #{$wallet-balance-breakpoint})"; -.token-list-item { +.token-cell { display: flex; flex-flow: row nowrap; align-items: center; @@ -121,4 +121,4 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and ( line-height: 21px; text-align: center; } -} \ No newline at end of file +} diff --git a/ui/app/components/app/token-cell/token-cell.test.js b/ui/app/components/app/token-cell/token-cell.test.js index c730011cc..0ff16537d 100644 --- a/ui/app/components/app/token-cell/token-cell.test.js +++ b/ui/app/components/app/token-cell/token-cell.test.js @@ -61,15 +61,15 @@ describe('Token Cell', function () { }) it('renders token balance', function () { - assert.equal(wrapper.find('.token-list-item__token-balance').text(), '5.000') + assert.equal(wrapper.find('.token-cell__token-balance').text(), '5.000') }) it('renders token symbol', function () { - assert.equal(wrapper.find('.token-list-item__token-symbol').text(), 'TEST') + assert.equal(wrapper.find('.token-cell__token-symbol').text(), 'TEST') }) it('renders converted fiat amount', function () { - assert.equal(wrapper.find('.token-list-item__fiat-amount').text(), '0.52 USD') + assert.equal(wrapper.find('.token-cell__fiat-amount').text(), '0.52 USD') }) it('calls onClick when clicked', function () { diff --git a/ui/app/css/itcss/components/index.scss b/ui/app/css/itcss/components/index.scss index d1697c564..5e790fb53 100644 --- a/ui/app/css/itcss/components/index.scss +++ b/ui/app/css/itcss/components/index.scss @@ -31,8 +31,6 @@ @import './sections.scss'; -@import './token-list.scss'; - @import './currency-display.scss'; @import './menu.scss';