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

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

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';

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

ui/app/components/app/token-cell/token-cell.component.js

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

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

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

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';