m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

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

Browse Source
This commit is contained in:
Dan Miller 2018-08-06 12:04:06 -02:30
parent 88d8eb289e
commit 5e7409482b
3 changed files with 28 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

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

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