From 3162a2747c0e54f729405caaef777519e4ded4dc Mon Sep 17 00:00:00 2001 From: Dan Miller Date: Thu, 25 Oct 2018 01:25:39 -0230 Subject: Redesign of gas customization basic tab. --- .../basic-tab-content.component.js | 6 +- .../basic-tab-content/index.scss | 25 ++++-- .../gas-modal-page-container.container.js | 1 - .../gas-price-button-group.component.js | 4 +- .../gas-price-button-group/index.scss | 96 ++++++++++++++++++++++ ui/app/selectors/custom-gas.js | 3 + ui/app/selectors/tests/custom-gas.test.js | 6 ++ 7 files changed, 131 insertions(+), 10 deletions(-) (limited to 'ui/app') diff --git a/ui/app/components/gas-customization/gas-modal-page-container/basic-tab-content/basic-tab-content.component.js b/ui/app/components/gas-customization/gas-modal-page-container/basic-tab-content/basic-tab-content.component.js index 0e5f15519..4483b71df 100644 --- a/ui/app/components/gas-customization/gas-modal-page-container/basic-tab-content/basic-tab-content.component.js +++ b/ui/app/components/gas-customization/gas-modal-page-container/basic-tab-content/basic-tab-content.component.js @@ -14,12 +14,14 @@ export default class BasicTabContent extends Component { render () { return (
-
Suggest gas fee increases
+
Estimated Processing Times
+
Select a higher gas fee to accelerate the processing of your transaction.*
+
* Accelerating a transaction by using a higher gas price increases its chances of getting processed by the network faster, but it is not always guaranteed.
) } diff --git a/ui/app/components/gas-customization/gas-modal-page-container/basic-tab-content/index.scss b/ui/app/components/gas-customization/gas-modal-page-container/basic-tab-content/index.scss index b7b6c0f94..e34e4e328 100644 --- a/ui/app/components/gas-customization/gas-modal-page-container/basic-tab-content/index.scss +++ b/ui/app/components/gas-customization/gas-modal-page-container/basic-tab-content/index.scss @@ -1,13 +1,28 @@ .basic-tab-content { display: flex; flex-direction: column; - align-items: center; - margin-bottom: 22px; - height: 291px; + align-items: flex-start; + padding-left: 21px; + height: 324px; + background: #F5F7F8; + border-bottom: 1px solid #d2d8dd; &__title { margin-top: 19px; - font-size: 20px; - color: $scorpion; + font-size: 16px; + color: $black; + } + + &__blurb { + font-size: 12px; + color: $black; + margin-top: 5px; + margin-bottom: 15px; + } + + &__footer-blurb { + font-size: 12px; + color: #979797; + margin-top: 15px; } } diff --git a/ui/app/components/gas-customization/gas-modal-page-container/gas-modal-page-container.container.js b/ui/app/components/gas-customization/gas-modal-page-container/gas-modal-page-container.container.js index 426f940d1..d098d49cc 100644 --- a/ui/app/components/gas-customization/gas-modal-page-container/gas-modal-page-container.container.js +++ b/ui/app/components/gas-customization/gas-modal-page-container/gas-modal-page-container.container.js @@ -32,7 +32,6 @@ import { getDefaultActiveButtonIndex, getEstimatedGasPrices, getEstimatedGasTimes, - getPriceAndTimeEstimates, getRenderableBasicEstimateData, } from '../../../selectors/custom-gas' import { 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 62ebb512d..8ad063b21 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 @@ -38,10 +38,10 @@ export default class GasPriceButtonGroup extends Component { }) { return (
{ labelKey &&
{ this.context.t(labelKey) }
} + { timeEstimate &&
{ timeEstimate }
} { feeInPrimaryCurrency &&
{ feeInPrimaryCurrency }
} { feeInSecondaryCurrency &&
{ feeInSecondaryCurrency }
} - { timeEstimate &&
{ timeEstimate }
} - { showCheck && } + { showCheck &&
}
) } 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 7647c42c0..22661ed7b 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 @@ -125,3 +125,99 @@ } } } + +.gas-price-button-group--alt { + display: flex; + justify-content: stretch; + max-width: 342px; + + &__button-fiat-price { + font-size: 13px; + } + + &__button-label { + font-size: 16px; + } + + &__label { + font-weight: 500; + font-size: 10px; + text-transform: capitalize; + } + + &__primary-currency { + font-size: 11px; + margin-top: 3px; + } + + &__secondary-currency { + font-size: 11px; + } + + &__loading-container { + height: 78px; + } + + &__time-estimate { + font-size: 14px; + font-weight: 500; + margin-top: 4px; + color: $black; + } + + .button-group__button, .button-group__button--active { + height: 78px; + background: white; + color: #2A4055; + width: 108px; + height: 97px; + box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.151579); + border-radius: 6px; + border: none; + + div { + display: flex; + flex-flow: column;; + align-items: flex-start; + justify-content: flex-start; + position: relative; + } + + .button-check-wrapper { + display: none; + } + + &:first-child { + margin-right: 6px; + } + + &:last-child { + margin-left: 6px; + } + } + + .button-group__button--active { + background: #F7FCFF; + border: 2px solid #2C8BDC; + + .button-check-wrapper { + height: 16px; + width: 16px; + border-radius: 8px; + position: absolute; + top: -11px; + right: -10px; + background: #D5ECFA; + display: flex; + flex-flow: row; + justify-content: center; + align-items: center; + } + + i { + display: flex; + color: $curious-blue; + font-size: 12px; + } + } +} diff --git a/ui/app/selectors/custom-gas.js b/ui/app/selectors/custom-gas.js index 46bf06efc..1c577c1b4 100644 --- a/ui/app/selectors/custom-gas.js +++ b/ui/app/selectors/custom-gas.js @@ -189,18 +189,21 @@ function getRenderableBasicEstimateData (state) { return [ { + labelKey: 'fastest', feeInPrimaryCurrency: getRenderableConvertedCurrencyFee(fast, gasLimit, currentCurrency, conversionRate), feeInSecondaryCurrency: getRenderableEthFee(fast, gasLimit), timeEstimate: getRenderableTimeEstimate(fastWait, blockTime), priceInHexWei: getGasPriceInHexWei(fast), }, { + labelKey: 'fast', feeInPrimaryCurrency: getRenderableConvertedCurrencyFee(average, gasLimit, currentCurrency, conversionRate), feeInSecondaryCurrency: getRenderableEthFee(average, gasLimit), timeEstimate: getRenderableTimeEstimate(avgWait, blockTime), priceInHexWei: getGasPriceInHexWei(average), }, { + labelKey: 'slow', feeInPrimaryCurrency: getRenderableConvertedCurrencyFee(safeLow, gasLimit, currentCurrency, conversionRate), feeInSecondaryCurrency: getRenderableEthFee(safeLow, gasLimit), timeEstimate: getRenderableTimeEstimate(safeLowWait, blockTime), diff --git a/ui/app/selectors/tests/custom-gas.test.js b/ui/app/selectors/tests/custom-gas.test.js index 1099670f2..8a6e7e351 100644 --- a/ui/app/selectors/tests/custom-gas.test.js +++ b/ui/app/selectors/tests/custom-gas.test.js @@ -77,18 +77,21 @@ describe('custom-gas selectors', () => { { expectedResult: [ { + labelKey: 'fastest', feeInPrimaryCurrency: '$0.05', feeInSecondaryCurrency: '0.00021 ETH', timeEstimate: '~7 sec', priceInHexWei: '0x2540be400', }, { + labelKey: 'fast', feeInPrimaryCurrency: '$0.03', feeInSecondaryCurrency: '0.000105 ETH', timeEstimate: '~46 sec', priceInHexWei: '0x12a05f200', }, { + labelKey: 'slow', feeInPrimaryCurrency: '$0.01', feeInSecondaryCurrency: '0.0000525 ETH', timeEstimate: '~1 min 33 sec', @@ -119,18 +122,21 @@ describe('custom-gas selectors', () => { { expectedResult: [ { + labelKey: 'fastest', feeInPrimaryCurrency: '$1.07', feeInSecondaryCurrency: '0.00042 ETH', timeEstimate: '~14 sec', priceInHexWei: '0x4a817c800', }, { + labelKey: 'fast', feeInPrimaryCurrency: '$0.54', feeInSecondaryCurrency: '0.00021 ETH', timeEstimate: '~1 min 33 sec', priceInHexWei: '0x2540be400', }, { + labelKey: 'slow', feeInPrimaryCurrency: '$0.27', feeInSecondaryCurrency: '0.000105 ETH', timeEstimate: '~3 min 7 sec', -- cgit