3 files changed, 23 insertions, 12 deletions
diff --git a/ui/app/components/app/gas-customization/gas-price-button-group/index.scss b/ui/app/components/app/gas-customization/gas-price-button-group/index.scss
index 0b48995e2..92b4aba42 100644
--- a/ui/app/components/app/gas-customization/gas-price-button-group/index.scss
+++ b/ui/app/components/app/gas-customization/gas-price-button-group/index.scss
@@ -65,6 +65,7 @@
 .gas-price-button-group--small {
   display: flex;
   justify-content: stretch;
+  height: 54px;
 
   @media screen and (max-width: $break-small) {
     max-width: 260px;
@@ -80,10 +81,14 @@
 
   &__label {
     font-weight: 500;
+    line-height: 16px;
+    padding-bottom: 4px;
   }
 
   &__primary-currency {
     font-size: 12px;
+    line-height: 12px;
+    padding-bottom: 2px;
 
     @media screen and (max-width: 575px) {
       font-size: 10px;
@@ -92,6 +97,8 @@
 
   &__secondary-currency {
     font-size: 12px;
+    line-height: 12px;
+    padding-bottom: 2px;
 
     @media screen and (max-width: 575px) {
       font-size: 10px;
@@ -105,11 +112,7 @@
   .button-group__button, .button-group__button--active {
     background: white;
     color: $scorpion;
-    padding: 2px 8.5px 4px 8.5px;
-
-    @media screen and (max-width: $break-small) {
-      padding-left: 4px;
-    }
+    padding: 0 4px;
 
     div {
       display: flex;
diff --git a/ui/app/components/ui/button/button.component.js b/ui/app/components/ui/button/button.component.js
index 01d946927..39e81317c 100644
--- a/ui/app/components/ui/button/button.component.js
+++ b/ui/app/components/ui/button/button.component.js
@@ -5,7 +5,7 @@ import classnames from 'classnames'
 const CLASSNAME_DEFAULT = 'btn-default'
 const CLASSNAME_PRIMARY = 'btn-primary'
 const CLASSNAME_SECONDARY = 'btn-secondary'
-const CLASSNAME_CONFIRM = 'btn-confirm'
+const CLASSNAME_CONFIRM = 'btn-primary'
 const CLASSNAME_RAISED = 'btn-raised'
 const CLASSNAME_LARGE = 'btn--large'
 const CLASSNAME_FIRST_TIME = 'btn--first-time'
@@ -14,13 +14,14 @@ const typeHash = {
   default: CLASSNAME_DEFAULT,
   primary: CLASSNAME_PRIMARY,
   secondary: CLASSNAME_SECONDARY,
-  confirm: CLASSNAME_CONFIRM,
-  raised: CLASSNAME_RAISED,
-  'first-time': CLASSNAME_FIRST_TIME,
   warning: 'btn-warning',
   danger: 'btn-danger',
   'danger-primary': 'btn-danger-primary',
   link: 'btn-link',
+  // TODO: Legacy button type to be deprecated
+  confirm: CLASSNAME_CONFIRM,
+  raised: CLASSNAME_RAISED,
+  'first-time': CLASSNAME_FIRST_TIME,
 }
 
 export default class Button extends Component {
@@ -42,7 +43,7 @@ export default class Button extends Component {
       <button
         className={classnames(
           'button',
-          typeHash[type],
+          typeHash[type] || CLASSNAME_DEFAULT,
           large && CLASSNAME_LARGE,
           className
         )}
diff --git a/ui/app/components/ui/unit-input/index.scss b/ui/app/components/ui/unit-input/index.scss
index e4075d225..adc4a3531 100644
--- a/ui/app/components/ui/unit-input/index.scss
+++ b/ui/app/components/ui/unit-input/index.scss
@@ -7,7 +7,7 @@
   border-radius: 4px;
   background-color: #fff;
   color: #4d4d4d;
-  font-size: 1rem;
+  font-size: 16px;
   padding: 8px 10px;
   position: relative;
 
@@ -29,6 +29,8 @@
 
   &__inputs {
     flex: 1 0 auto;
+    display: flex;
+    flex-flow: column nowrap;
   }
 
   &__input {
@@ -38,15 +40,20 @@
     border: none;
     outline: 0 !important;
     max-width: 22ch;
+    height: 16px;
+    line-height: 18px;
   }
 
   &__input-container {
     display: flex;
-    align-items: center;
+    align-items: flex-start;
+    padding-bottom: 4px;
   }
 
   &__suffix {
     margin-left: 3px;
+    font-size: 1rem;
+    line-height: 1rem;
   }
 
   &--error {