diff options
Diffstat (limited to 'ui/app/components/gas-customization/gas-price-button-group')
-rw-r--r-- | ui/app/components/gas-customization/gas-price-button-group/gas-price-button-group.component.js | 27 | ||||
-rw-r--r-- | ui/app/components/gas-customization/gas-price-button-group/index.scss | 67 |
2 files changed, 82 insertions, 12 deletions
diff --git a/ui/app/components/gas-customization/gas-price-button-group/gas-price-button-group.component.js b/ui/app/components/gas-customization/gas-price-button-group/gas-price-button-group.component.js index 3873f54bc..8d6675e18 100644 --- a/ui/app/components/gas-customization/gas-price-button-group/gas-price-button-group.component.js +++ b/ui/app/components/gas-customization/gas-price-button-group/gas-price-button-group.component.js @@ -27,7 +27,7 @@ export default class GasPriceButtonGroup extends Component { } renderButtonContent ({ - label, + labelKey, feeInPrimaryCurrency, feeInSecondaryCurrency, timeEstimate, @@ -36,7 +36,7 @@ export default class GasPriceButtonGroup extends Component { showCheck, }) { return (<div> - { label && <div className={`${className}__label`}>{ label }</div> } + { labelKey && <div className={`${className}__label`}>{ this.context.t(labelKey) }</div> } { feeInPrimaryCurrency && <div className={`${className}__primary-currency`}>{ feeInPrimaryCurrency }</div> } { feeInSecondaryCurrency && <div className={`${className}__secondary-currency`}>{ feeInSecondaryCurrency }</div> } { timeEstimate && <div className={`${className}__time-estimate`}>{ timeEstimate }</div> } @@ -57,9 +57,7 @@ export default class GasPriceButtonGroup extends Component { onClick={() => handleGasPriceSelection(priceInHexWei)} key={`gas-price-button-${index}`} > - {buttonDataLoading - ? 'Loading...' - : this.renderButtonContent(renderableGasInfo, buttonContentPropsAndFlags)} + {this.renderButtonContent(renderableGasInfo, buttonContentPropsAndFlags)} </Button> ) } @@ -68,18 +66,23 @@ export default class GasPriceButtonGroup extends Component { const { gasButtonInfo, defaultActiveButtonIndex = 1, + newActiveButtonIndex, noButtonActiveByDefault = false, + buttonDataLoading, ...buttonPropsAndFlags } = this.props return ( - <ButtonGroup - className={buttonPropsAndFlags.className} - defaultActiveButtonIndex={defaultActiveButtonIndex} - noButtonActiveByDefault={noButtonActiveByDefault} - > - { gasButtonInfo.map((obj, index) => this.renderButton(obj, buttonPropsAndFlags, index)) } - </ButtonGroup> + !buttonDataLoading + ? <ButtonGroup + className={buttonPropsAndFlags.className} + defaultActiveButtonIndex={defaultActiveButtonIndex} + newActiveButtonIndex={newActiveButtonIndex} + noButtonActiveByDefault={noButtonActiveByDefault} + > + { gasButtonInfo.map((obj, index) => this.renderButton(obj, buttonPropsAndFlags, index)) } + </ButtonGroup> + : <div className={`${buttonPropsAndFlags.className}__loading-container`}>Loading...</div> ) } } diff --git a/ui/app/components/gas-customization/gas-price-button-group/index.scss b/ui/app/components/gas-customization/gas-price-button-group/index.scss index e2670edd5..7647c42c0 100644 --- a/ui/app/components/gas-customization/gas-price-button-group/index.scss +++ b/ui/app/components/gas-customization/gas-price-button-group/index.scss @@ -18,6 +18,9 @@ height: 15.4px; } + &__loading-container { + height: 130px; + } .button-group__button, .button-group__button--active { height: 130px; @@ -58,3 +61,67 @@ } } } + +.gas-price-button-group--small { + display: flex; + justify-content: stretch; + max-width: 260px; + + &__button-fiat-price { + font-size: 13px; + } + + &__button-label { + font-size: 16px; + } + + &__label { + font-weight: 500; + } + + &__primary-currency { + font-size: 12px; + } + + &__secondary-currency { + font-size: 12px; + } + + &__loading-container { + height: 78px; + } + + .button-group__button, .button-group__button--active { + height: 78px; + background: white; + color: $scorpion; + padding-top: 9px; + padding-left: 8.5px; + + div { + display: flex; + flex-flow: column; + align-items: flex-start; + justify-content: flex-start; + } + + i { + &:last-child { + display: none; + } + } + } + + .button-group__button--active { + color: $white; + background: $dodger-blue; + + i { + &:last-child { + display: flex; + color: $curious-blue; + margin-top: 10px + } + } + } +} |