Use BEM for css in gas-modal-page-container

ui/app/components/gas-customization/gas-modal-page-container/gas-modal-page-container.component.js

@@ -16,24 +16,26 @@ export default class GasModalPageContainer extends Component {
 
   renderBasicTabContent () {
     return (
-      <div className="basic-tab"/>
+      <div className="gas-modal-content__basic-tab"/>
     )
   }
 
   renderAdvancedTabContent () {
     return (
-      <div className="advanced-tab"/>
+      <div className="gas-modal-content__advanced-tab"/>
     )
   }
 
   renderInfoRow (className, totalLabelKey, fiatTotal, cryptoTotal) {
     return (
       <div className={className}>
-        <div className="total-info">
-          <span className="total-label">{`${this.context.t(totalLabelKey)}:`}</span><span className="total-value">{fiatTotal}</span>
+        <div className={`${className}__total-info`}>
+          <span className={`${className}__total-info__total-label`}>{`${this.context.t(totalLabelKey)}:`}</span>
+          <span className={`${className}__total-info__total-value`}>{fiatTotal}</span>
         </div>
-        <div className="sum-info">
-          <span className="sum-label">{`${this.context.t('amountPlusTxFee')}`}</span><span className="sum-value">{cryptoTotal}</span>
+        <div className={`${className}__sum-info`}>
+          <span className={`${className}__sum-info__sum-label`}>{`${this.context.t('amountPlusTxFee')}`}</span>
+          <span className={`${className}__sum-info__sum-value`}>{cryptoTotal}</span>
         </div>
       </div>
     )
@@ -43,8 +45,8 @@ export default class GasModalPageContainer extends Component {
     return (
       <div className="gas-modal-content">
         { mainTabContent() }
-        { this.renderInfoRow('info-row--fade', 'originalTotal', '$20.02 USD', '0.06685 ETH') }
-        { this.renderInfoRow('info-row', 'newTotal', '$20.02 USD', '0.06685 ETH') }
+        { this.renderInfoRow('gas-modal-content__info-row--fade', 'originalTotal', '$20.02 USD', '0.06685 ETH') }
+        { this.renderInfoRow('gas-modal-content__info-row', 'newTotal', '$20.02 USD', '0.06685 ETH') }
       </div>
     )
   }

ui/app/components/gas-customization/gas-modal-page-container/index.scss

@@ -1,13 +1,13 @@
 .gas-modal-content {
-  .basic-tab {
+  &__basic-tab {
     height: 219px;
   }
 
-  .advanced-tab {
+  &__advanced-tab {
     height: 475px;
   }
 
-  .info-row, .info-row--fade {
+  &__info-row, &__info-row--fade {
     width: 100%;
     background: $polar;
     padding: 15px 21px;
@@ -15,35 +15,35 @@
     flex-flow: column;
     color: $scorpion;
 
-    .total-info, .sum-info {
+    &__total-info, &__sum-info {
       display: flex;
       flex-flow: row;
       justify-content: space-between;
     }
 
-    .total-info {
-      .total-label {
+    &__total-info {
+      &__total-label {
         font-size: 16px;
       }
 
-      .total-value {
+      &__total-value {
         font-size: 16px;
         font-weight: bold;
       }
     }
 
-    .sum-info {
-      .sum-label {
+    &__sum-info {
+      &__sum-label {
         font-size: 12px;
       }
 
-      .sum-value {
+      &__sum-value {
         font-size: 14px;
       }
     }
   }
 
-  .info-row--fade {
+  &__info-row--fade {
     background: white;
     color: $dusty-gray;
   }

ui/app/components/gas-customization/gas-modal-page-container/tests/gas-modal-page-container-component.test.js

@@ -36,7 +36,7 @@ describe('GasModalPageContainer Component', function () {
         disabled,
       } = wrapper.find(PageContainer).props()
       assert.equal(title, 'customGas')
-      assert.equal(subtitle, 'customGasSpeedUp')
+      assert.equal(subtitle, 'customGasSubTitle')
       assert.equal(disabled, false)
     })
 
@@ -112,8 +112,8 @@ describe('GasModalPageContainer Component', function () {
 
       const renderTabContentResult = wrapper.instance().renderTabContent(() => <span>Mock content</span>)
       const renderedTabContent = shallow(renderTabContentResult)
-      assert.equal(renderedTabContent.childAt(1).text(), 'info-row--fade,originalTotal,$20.02 USD,0.06685 ETH')
-      assert.equal(renderedTabContent.childAt(2).text(), 'info-row,newTotal,$20.02 USD,0.06685 ETH')
+      assert.equal(renderedTabContent.childAt(1).text(), 'gas-modal-content__info-row--fade,originalTotal,$20.02 USD,0.06685 ETH')
+      assert.equal(renderedTabContent.childAt(2).text(), 'gas-modal-content__info-row,newTotal,$20.02 USD,0.06685 ETH')
 
       GP.renderInfoRow.restore()
     })
@@ -128,8 +128,8 @@ describe('GasModalPageContainer Component', function () {
       const firstChild = renderedInfoRow.childAt(0)
       const secondhild = renderedInfoRow.childAt(1)
 
-      assert.equal(firstChild.props().className, 'total-info')
-      assert.equal(secondhild.props().className, 'sum-info')
+      assert.equal(firstChild.props().className, 'mockClassName__total-info')
+      assert.equal(secondhild.props().className, 'mockClassName__sum-info')
 
       assert.equal(firstChild.childAt(0).text(), 'mockLabelKey:')
       assert.equal(firstChild.childAt(1).text(), 'mockFiatAmount')
@@ -142,7 +142,7 @@ describe('GasModalPageContainer Component', function () {
     it('should render', () => {
       const renderBasicTabContentResult = wrapper.instance().renderBasicTabContent()
       const renderedBasicTabContent = shallow(renderBasicTabContentResult)
-      assert.equal(renderedBasicTabContent.props().className, 'basic-tab')
+      assert.equal(renderedBasicTabContent.props().className, 'gas-modal-content__basic-tab')
     })
   })
 
@@ -150,7 +150,7 @@ describe('GasModalPageContainer Component', function () {
     it('should render', () => {
       const renderAdvancedTabContentResult = wrapper.instance().renderAdvancedTabContent()
       const renderedAdvancedTabContent = shallow(renderAdvancedTabContentResult)
-      assert.equal(renderedAdvancedTabContent.props().className, 'advanced-tab')
+      assert.equal(renderedAdvancedTabContent.props().className, 'gas-modal-content__advanced-tab')
     })
   })
 })