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

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

@ -1,13 +1,13 @@
.gas-modal-content { .gas-modal-content {
.basic-tab { &__basic-tab {
height: 219px; height: 219px;
} }
.advanced-tab { &__advanced-tab {
height: 475px; height: 475px;
} }
.info-row, .info-row--fade { &__info-row, &__info-row--fade {
width: 100%; width: 100%;
background: $polar; background: $polar;
padding: 15px 21px; padding: 15px 21px;
@ -15,35 +15,35 @@
flex-flow: column; flex-flow: column;
color: $scorpion; color: $scorpion;
.total-info, .sum-info { &__total-info, &__sum-info {
display: flex; display: flex;
flex-flow: row; flex-flow: row;
justify-content: space-between; justify-content: space-between;
} }
.total-info { &__total-info {
.total-label { &__total-label {
font-size: 16px; font-size: 16px;
} }
.total-value { &__total-value {
font-size: 16px; font-size: 16px;
font-weight: bold; font-weight: bold;
} }
} }
.sum-info { &__sum-info {
.sum-label { &__sum-label {
font-size: 12px; font-size: 12px;
} }
.sum-value { &__sum-value {
font-size: 14px; font-size: 14px;
} }
} }
} }
.info-row--fade { &__info-row--fade {
background: white; background: white;
color: $dusty-gray; 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, disabled,
} = wrapper.find(PageContainer).props() } = wrapper.find(PageContainer).props()
assert.equal(title, 'customGas') assert.equal(title, 'customGas')
assert.equal(subtitle, 'customGasSpeedUp') assert.equal(subtitle, 'customGasSubTitle')
assert.equal(disabled, false) assert.equal(disabled, false)
}) })
@ -112,8 +112,8 @@ describe('GasModalPageContainer Component', function () {
const renderTabContentResult = wrapper.instance().renderTabContent(() => <span>Mock content</span>) const renderTabContentResult = wrapper.instance().renderTabContent(() => <span>Mock content</span>)
const renderedTabContent = shallow(renderTabContentResult) const renderedTabContent = shallow(renderTabContentResult)
assert.equal(renderedTabContent.childAt(1).text(), 'info-row--fade,originalTotal,$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(), 'info-row,newTotal,$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() GP.renderInfoRow.restore()
}) })
@ -128,8 +128,8 @@ describe('GasModalPageContainer Component', function () {
const firstChild = renderedInfoRow.childAt(0) const firstChild = renderedInfoRow.childAt(0)
const secondhild = renderedInfoRow.childAt(1) const secondhild = renderedInfoRow.childAt(1)
assert.equal(firstChild.props().className, 'total-info') assert.equal(firstChild.props().className, 'mockClassName__total-info')
assert.equal(secondhild.props().className, 'sum-info') assert.equal(secondhild.props().className, 'mockClassName__sum-info')
assert.equal(firstChild.childAt(0).text(), 'mockLabelKey:') assert.equal(firstChild.childAt(0).text(), 'mockLabelKey:')
assert.equal(firstChild.childAt(1).text(), 'mockFiatAmount') assert.equal(firstChild.childAt(1).text(), 'mockFiatAmount')
@ -142,7 +142,7 @@ describe('GasModalPageContainer Component', function () {
it('should render', () => { it('should render', () => {
const renderBasicTabContentResult = wrapper.instance().renderBasicTabContent() const renderBasicTabContentResult = wrapper.instance().renderBasicTabContent()
const renderedBasicTabContent = shallow(renderBasicTabContentResult) 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', () => { it('should render', () => {
const renderAdvancedTabContentResult = wrapper.instance().renderAdvancedTabContent() const renderAdvancedTabContentResult = wrapper.instance().renderAdvancedTabContent()
const renderedAdvancedTabContent = shallow(renderAdvancedTabContentResult) const renderedAdvancedTabContent = shallow(renderAdvancedTabContentResult)
assert.equal(renderedAdvancedTabContent.props().className, 'advanced-tab') assert.equal(renderedAdvancedTabContent.props().className, 'gas-modal-content__advanced-tab')
}) })
}) })
}) })