aboutsummaryrefslogtreecommitdiffstats
path: root/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content
diff options
context:
space:
mode:
authorDan Miller <danjm.com@gmail.com>2018-09-21 00:06:23 +0800
committerDan Miller <danjm.com@gmail.com>2018-12-04 11:36:05 +0800
commit0ba6f7d9bb5c2183d8a370fd0955e18d45616207 (patch)
tree3295b24c2b87eb0dbe443b96e10872e76f8590d7 /ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content
parent6dd1028c71a343b2a60768bf988ba0ed33c84fb3 (diff)
downloadtangerine-wallet-browser-0ba6f7d9bb5c2183d8a370fd0955e18d45616207.tar.gz
tangerine-wallet-browser-0ba6f7d9bb5c2183d8a370fd0955e18d45616207.tar.zst
tangerine-wallet-browser-0ba6f7d9bb5c2183d8a370fd0955e18d45616207.zip
Adds not yet functional gas price chart.
Diffstat (limited to 'ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content')
-rw-r--r--ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/advanced-tab-content.component.js5
-rw-r--r--ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/index.scss33
-rw-r--r--ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/tests/advanced-tab-content-component.test.js4
3 files changed, 31 insertions, 11 deletions
diff --git a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/advanced-tab-content.component.js b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/advanced-tab-content.component.js
index 5218dd477..f90da0a88 100644
--- a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/advanced-tab-content.component.js
+++ b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/advanced-tab-content.component.js
@@ -94,7 +94,12 @@ export default class AdvancedTabContent extends Component {
customGasLimit,
updateCustomGasLimit
) }
+ <div className="advanced-tab__fee-chart__title">Live Gas Price Predictions</div>
<GasPriceChart />
+ <div className="advanced-tab__fee-chart__speed-buttons">
+ <span>Slower</span>
+ <span>Faster</span>
+ </div>
</div>
</div>
)
diff --git a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/index.scss b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/index.scss
index ae99ba4aa..9c89688e2 100644
--- a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/index.scss
+++ b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/index.scss
@@ -38,19 +38,32 @@
}
}
- &__fee-chart-title {
- font-size: 14px;
- color: $scorpion;
- margin-top: 22px;
- }
-
&__fee-chart {
- padding-left: 10px;
margin-top: 8px;
- height: 258px;
+ height: 265px;
background: #F8F9FB;
border-bottom: 1px solid #d2d8dd;
border-top: 1px solid #d2d8dd;
+ position: relative;
+
+ &__title {
+ font-size: 12px;
+ color: #313A5E;
+ margin-left: 22px;
+ margin-bottom: 11px;
+ }
+
+ &__speed-buttons {
+ position: absolute;
+ bottom: 13px;
+ display: flex;
+ justify-content: space-between;
+ padding-left: 20px;
+ padding-right: 19px;
+ width: 100%;
+ font-size: 10px;
+ color: #888EA3;
+ }
}
&__slider-container {
@@ -59,11 +72,11 @@
}
&__gas-edit-rows {
- height: 87px;
+ height: 73px;
display: flex;
flex-flow: row;
justify-content: space-between;
- margin-left: 10px;
+ margin-left: 20px;
margin-right: 10px;
margin-top: 9px;
}
diff --git a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/tests/advanced-tab-content-component.test.js b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/tests/advanced-tab-content-component.test.js
index 14863e59d..27a2326b8 100644
--- a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/tests/advanced-tab-content-component.test.js
+++ b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/tests/advanced-tab-content-component.test.js
@@ -54,7 +54,9 @@ describe('AdvancedTabContent Component', function () {
const feeChartDiv = advancedTabChildren.at(1)
assert(feeChartDiv.childAt(0).hasClass('advanced-tab__gas-edit-rows'))
- assert(feeChartDiv.childAt(1).is(GasPriceChart))
+ assert(feeChartDiv.childAt(1).hasClass('advanced-tab__fee-chart__title'))
+ assert(feeChartDiv.childAt(2).is(GasPriceChart))
+ assert(feeChartDiv.childAt(3).hasClass('advanced-tab__fee-chart__speed-buttons'))
})
it('should call renderDataSummary with the expected params', () => {