diff --git a/common/components/TXMetaDataPanel/components/SimpleGas.tsx b/common/components/TXMetaDataPanel/components/SimpleGas.tsx index cf1ce983..396b3ea6 100644 --- a/common/components/TXMetaDataPanel/components/SimpleGas.tsx +++ b/common/components/TXMetaDataPanel/components/SimpleGas.tsx @@ -9,6 +9,7 @@ import { getGasLimitEstimationTimedOut } from 'selectors/transaction'; import { connect } from 'react-redux'; import { GasLimitField } from 'components/GasLimitField'; import { getIsWeb3Node } from 'selectors/config'; +const SliderWithTooltip = Slider.createSliderWithTooltip(Slider); interface OwnProps { gasPrice: AppState['transaction']['fields']['gasPrice']; @@ -48,11 +49,12 @@ class SimpleGas extends React.Component {
- `${gas} Gwei`} />
{translate('Cheap')} diff --git a/common/sass/styles/overrides/rc-slider.scss b/common/sass/styles/overrides/rc-slider.scss index 356a89b2..cdc9cf0c 100644 --- a/common/sass/styles/overrides/rc-slider.scss +++ b/common/sass/styles/overrides/rc-slider.scss @@ -3,6 +3,7 @@ $rail-height: 4px; $handle-size: 22px; $speed: 70ms; +$tooltip-bg: rgba(#222, 0.95); .rc-slider { &-rail { @@ -22,4 +23,20 @@ $speed: 70ms; border: none; transform: translate(-50%, -50%); } + + &-tooltip { + &-arrow { + .rc-slider-tooltip-placement-top & { + border-top-color: $tooltip-bg; + } + } + + &-inner { + background: $tooltip-bg; + padding: 7px 8px; + height: 26px; + box-shadow: none; + border-radius: 3px; + } + } }