m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-22 18:00:18 +01:00
Code

Move TokenCell styles alongside component (#8257)

Browse Source 
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.
This commit is contained in:
Mark Stacey 2020-03-30 23:44:10 -03:00 committed by GitHub
parent d82f06c710
commit f7504d153e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 21 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
test/e2e/metamask-ui.spec.js
View File

@ -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)

2
ui/app/components/app/index.scss
View File

@ -48,6 +48,8 @@
@import '../ui/token-balance/index';
@import 'token-cell/token-cell';
@import 'transaction-activity-log/index';
@import 'transaction-breakdown/index';

6
ui/app/components/app/tests/token-cell.spec.js
View File

@ -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')
})
})

18
ui/app/components/app/token-cell/token-cell.component.js
View File

@ -64,29 +64,29 @@ export default class TokenCell extends Component {
return (
<div
className={classnames(`token-list-item`, {
'token-list-item--active': selectedTokenAddress === address,
className={classnames('token-cell', {
'token-cell--active': selectedTokenAddress === address,
})}
onClick={onClick.bind(null, address)}
>
<Identicon
className="token-list-item__identicon"
className="token-cell__identicon"
diameter={50}
address={address}
image={image}
/>
<div className="token-list-item__balance-ellipsis">
<div className="token-list-item__balance-wrapper">
<div className="token-list-item__token-balance">{string || 0}</div>
<div className="token-list-item__token-symbol">{symbol}</div>
<div className="token-cell__balance-ellipsis">
<div className="token-cell__balance-wrapper">
<div className="token-cell__token-balance">{string || 0}</div>
<div className="token-cell__token-symbol">{symbol}</div>
{showFiat && (
<div className="token-list-item__fiat-amount">
<div className="token-cell__fiat-amount">
{formattedFiat}
</div>
)}
</div>
<i
className="fa fa-ellipsis-h fa-lg token-list-item__ellipsis cursor-pointer"
className="fa fa-ellipsis-h fa-lg token-cell__ellipsis cursor-pointer"
onClick={(e) => {
e.stopPropagation()
this.setState({ tokenMenuOpen: true })

4
ui/app/css/itcss/components/token-list.scss → ui/app/components/app/token-cell/token-cell.scss
View File

@ -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;
}
}
}

6
ui/app/components/app/token-cell/token-cell.test.js
View File

@ -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 () {

2
ui/app/css/itcss/components/index.scss
View File

@ -31,8 +31,6 @@
@import './sections.scss';
@import './token-list.scss';
@import './currency-display.scss';
@import './menu.scss';