Adds redesign for the customize gas advanced tab.

4 files changed, 48 insertions, 0 deletions

diff --git a/ui/app/components/gas-customization/gas-price-chart/gas-price-chart.component.js b/ui/app/components/gas-customization/gas-price-chart/gas-price-chart.component.js
new file mode 100644
index 000000000..7c32058b7
--- /dev/null
+++ b/ui/app/components/gas-customization/gas-price-chart/gas-price-chart.component.js
@@ -0,0 +1,16 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+
+export default class GasPriceChart extends Component {
+  static contextTypes = {
+    t: PropTypes.func,
+  }
+
+  render () {
+    return (
+      <div className="gas-price-chart">
+        <div className="gas-price-chart__container" id="chart"></div>
+      </div>
+    )
+  }
+}
diff --git a/ui/app/components/gas-customization/gas-price-chart/index.js b/ui/app/components/gas-customization/gas-price-chart/index.js
new file mode 100644
index 000000000..9895acb62
--- /dev/null
+++ b/ui/app/components/gas-customization/gas-price-chart/index.js
@@ -0,0 +1 @@
+export { default } from './gas-price-chart.component'
diff --git a/ui/app/components/gas-customization/gas-price-chart/index.scss b/ui/app/components/gas-customization/gas-price-chart/index.scss
new file mode 100644
index 000000000..14e7a12a8
--- /dev/null
+++ b/ui/app/components/gas-customization/gas-price-chart/index.scss
@@ -0,0 +1,6 @@
+.gas-price-chart {
+  &__container {
+    display: flex;
+    position: relative;
+  }
+}
diff --git a/ui/app/components/gas-customization/gas-price-chart/tests/gas-price-chart.component.test.js b/ui/app/components/gas-customization/gas-price-chart/tests/gas-price-chart.component.test.js
new file mode 100644
index 000000000..474b7b7b6
--- /dev/null
+++ b/ui/app/components/gas-customization/gas-price-chart/tests/gas-price-chart.component.test.js
@@ -0,0 +1,25 @@
+import React from 'react'
+import assert from 'assert'
+import shallow from '../../../../../lib/shallow-with-context'
+import GasPriceChart from '../gas-price-chart.component.js'
+
+describe('GasPriceChart Component', function () {
+  let wrapper
+
+  beforeEach(() => {
+    wrapper = shallow(<GasPriceChart />)
+  })
+
+  describe('render()', () => {
+    it('should render', () => {
+      console.log('wrapper', wrapper.html())
+      assert(wrapper.hasClass('gas-price-chart'))
+    })
+
+    it('should render the chart div', () => {
+      assert(wrapper.childAt(0).hasClass('gas-price-chart__container'))
+      assert.equal(wrapper.childAt(0).props().id, 'chart')
+    })
+  })
+
+})