Adds the content of the advanced tab - w/o chart or dynamic content - to gas customize modal.

3 files changed, 103 insertions, 0 deletions

diff --git a/ui/app/components/gas-customization/gas-slider/gas-slider.component.js b/ui/app/components/gas-customization/gas-slider/gas-slider.component.js
new file mode 100644
index 000000000..5836e7dfc
--- /dev/null
+++ b/ui/app/components/gas-customization/gas-slider/gas-slider.component.js
@@ -0,0 +1,48 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+
+export default class AdvancedTabContent extends Component {
+  static propTypes = {
+    onChange: PropTypes.func,
+    lowLabel: PropTypes.string,
+    highLabel: PropTypes.string,
+    value: PropTypes.number,
+    step: PropTypes.number,
+    max: PropTypes.number,
+    min: PropTypes.number,
+  }
+
+  render () {
+    const {
+      onChange,
+      lowLabel,
+      highLabel,
+      value,
+      step,
+      max,
+      min,
+    } = this.props
+
+    return (
+      <div className="gas-slider">
+        <input
+          className="gas-slider__input"
+          type="range"
+          step={step}
+          max={max}
+          min={min}
+          value={value}
+          id="gasSlider"
+          onChange={event => onChange(event.target.value)}
+        />
+        <div className="gas-slider__bar">
+          <div className="gas-slider__colored"/>
+        </div>
+        <div className="gas-slider__labels">
+          <span>{lowLabel}</span>
+          <span>{highLabel}</span>
+        </div>
+      </div>
+    )
+  }
+}
diff --git a/ui/app/components/gas-customization/gas-slider/index.js b/ui/app/components/gas-customization/gas-slider/index.js
new file mode 100644
index 000000000..f1752c93f
--- /dev/null
+++ b/ui/app/components/gas-customization/gas-slider/index.js
@@ -0,0 +1 @@
+export { default } from './gas-slider.component'
diff --git a/ui/app/components/gas-customization/gas-slider/index.scss b/ui/app/components/gas-customization/gas-slider/index.scss
new file mode 100644
index 000000000..e6c734367
--- /dev/null
+++ b/ui/app/components/gas-customization/gas-slider/index.scss
@@ -0,0 +1,54 @@
+.gas-slider {
+  position: relative;
+  width: 322px;
+
+  &__input {
+    width: 322px;
+    margin-left: -2px;
+    z-index: 2;
+  }
+
+  input[type=range] {
+    -webkit-appearance: none !important;
+  }
+
+  input[type=range]::-webkit-slider-thumb {
+    -webkit-appearance: none !important;
+    height: 34px;
+    width: 34px;
+    background-color: $curious-blue;
+    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.08);
+    border-radius: 50%;
+    position: relative;
+    z-index: 10;
+  }
+
+  &__bar {
+    height: 6px;
+    width: 322px;
+    background: $alto;
+    display: flex;
+    justify-content: space-between;
+    position: absolute;
+    top: 16px;
+    z-index: 0;
+    border-radius: 4px;
+  }
+
+  &__colored {
+    height: 6px;
+    border-radius: 4px;
+    margin-left: 102px; 
+    width: 322px;
+    z-index: 1;
+    background-color: $blizzard-blue;
+  }
+
+  &__labels {
+    display: flex;
+    justify-content: space-between;
+    font-size: 12px;
+    margin-top: -6px;
+    color: $mid-gray;
+  }
+}
\ No newline at end of file