Add control arrows to advanced gas tab inputs.

3 files changed, 63 insertions, 1 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 4dd18ce2b..b9ae93684 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
@@ -29,6 +29,10 @@ export default class AdvancedTabContent extends Component {
           precision={precision}
           onChange={event => onChange(Number(event.target.value))}
         />
+        <div className="advanced-tab__gas-edit-row__input-arrows">
+          <div className="advanced-tab__gas-edit-row__input-arrows__i-wrap"><i className="fa fa-sm fa-angle-up" onClick={() => onChange(value + 1)} /></div>
+          <div className="advanced-tab__gas-edit-row__input-arrows__i-wrap"><i className="fa fa-sm fa-angle-down" onClick={() => onChange(value - 1)} /></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 0fc9f4578..69bb65f2f 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
@@ -119,6 +119,43 @@
       margin-top: 7px;
     }
 
+    &__input-arrows {
+      position: absolute;
+      top: 7px;
+      right: 0px;
+      width: 17px;
+      height: 24px;
+      border: 1px solid #dadada;
+      border-top-right-radius: 4px;
+      display: flex;
+      flex-direction: column;
+      color: #9b9b9b;
+      font-size: .8em;
+      border-bottom-right-radius: 4px;
+      cursor: pointer;
+
+      &__i-wrap {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        justify-content: center;
+      }
+
+      &__i-wrap:hover {
+        background: #4EADE7;
+        color: $white;
+      }
+
+      i:hover {
+        background: #4EADE7;
+      }
+
+      i {
+        font-size: 10px;
+      }
+    }
+
+
     input[type="number"]::-webkit-inner-spin-button {
       -webkit-appearance: none;
       -moz-appearance: none;
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 27a2326b8..d4549f4cd 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
@@ -205,7 +205,7 @@ describe('AdvancedTabContent Component', function () {
     })
 
     it('should render an input, but not a GWEI symbol', () => {
-      assert.equal(gasInput.children().length, 1)
+      assert.equal(gasInput.children().length, 2)
       assert(gasInput.children().at(0).hasClass('advanced-tab__gas-edit-row__input'))
     })
 
@@ -220,6 +220,27 @@ describe('AdvancedTabContent Component', function () {
       const inputOnChange = gasInput.find('input').props().onChange
       assert.equal(inputOnChange({ target: { value: 8} }), 15)
     })
+
+    it('should have two input arrows', () => {
+      const upArrow = gasInput.find('.fa-angle-up')
+      assert.equal(upArrow.length, 1)
+      const downArrow = gasInput.find('.fa-angle-down')
+      assert.equal(downArrow.length, 1)
+    })
+
+    it('should call onChange with the value incremented decremented when its onchange method is called', () => {
+      gasInput = shallow(wrapper.instance().gasInput(
+        321,
+        value => value + 7,
+        0,
+        8,
+        false
+      ))
+      const upArrow = gasInput.find('.fa-angle-up')
+      assert.equal(upArrow.props().onClick(), 329)
+      const downArrow = gasInput.find('.fa-angle-down')
+      assert.equal(downArrow.props().onClick(), 327)
+    })
   })
 
 })