Improvement: Increase click area for arrows (#5264)

2 files changed, 18 insertions, 6 deletions

diff --git a/ui/app/components/input-number.js b/ui/app/components/input-number.js
index 59c6842ef..eec5e3740 100644
--- a/ui/app/components/input-number.js
+++ b/ui/app/components/input-number.js
@@ -66,13 +66,16 @@ InputNumber.prototype.render = function () {
     }),
     h('span.gas-tooltip-input-detail', {}, [unitLabel]),
     h('div.gas-tooltip-input-arrows', {}, [
-      h('i.fa.fa-angle-up', {
+      h('div.gas-tooltip-input-arrow-wrapper', {
         onClick: () => this.setValue(addCurrencies(value, step, { toNumericBase: 'dec' })),
-      }),
-      h('i.fa.fa-angle-down', {
-        style: { cursor: 'pointer' },
+      }, [
+        h('i.fa.fa-angle-up'),
+      ]),
+      h('div.gas-tooltip-input-arrow-wrapper', {
         onClick: () => this.setValue(subtractCurrencies(value, step, { toNumericBase: 'dec' })),
-      }),
+      }, [
+        h('i.fa.fa-angle-down'),
+      ]),
     ]),
   ])
 }
diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss
index 125134f12..7fc960d7d 100644
--- a/ui/app/css/itcss/components/send.scss
+++ b/ui/app/css/itcss/components/send.scss
@@ -888,12 +888,21 @@
       font-size: 18px;
       color: $tundora;
       right: 0px;
-      padding: 1px 4px;
+      padding: 0;
       display: flex;
       justify-content: space-around;
       align-items: center;
     }
 
+    .gas-tooltip-input-arrow-wrapper {
+      align-items: center;
+      align-self: stretch;
+      display: flex;
+      flex-direction: column;
+      flex-grow: 1;
+      justify-content: center;
+    }
+
     input[type="number"]::-webkit-inner-spin-button {
       -webkit-appearance: none;
       display: none;