Improve styling of advanced-tab-content gasInput row

3 files changed, 11 insertions, 5 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 69cd06cde..cd5ca7d35 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
@@ -39,7 +39,7 @@ export default class AdvancedTabContent extends Component {
   }
 
   infoButton (onClick) {
-    return <i className="fa info-circle" onClick={onClick} />
+    return <i className="fas fa-info-circle" onClick={onClick} />
   }
 
   renderDataSummary (totalFee, millisecondsRemaining) {
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 0c95afc48..28e2fde9b 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
@@ -67,9 +67,14 @@
       color: $mid-gray;
       font-size: 16px;
       
-      .info-circle {
+      .fa-info-circle {
         color: $silver;
         margin-left: 10px;
+        cursor: pointer;
+      }
+
+      .fa-info-circle:hover {
+        color: $mid-gray;
       }
     }
 
@@ -85,7 +90,8 @@
       font-size: 16px;
       height: 37px;
       width: 163px;
-      padding: 8px 10px 10px 10px;
+      padding-left: 8px;
+      padding-top: 2px;
     }
 
     input[type="number"]::-webkit-inner-spin-button {
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 3efe1d2a9..5cdcf687e 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
@@ -101,7 +101,7 @@ describe('AdvancedTabContent Component', function () {
       const gasRowLabelChildren = gasEditRow.children().at(0).children()
       assert.equal(gasRowLabelChildren.length, 2)
       assert(gasRowLabelChildren.at(0), 'mockLabelKey')
-      assert(gasRowLabelChildren.at(1).hasClass('info-circle'))
+      assert(gasRowLabelChildren.at(1).hasClass('fa-info-circle'))
     })
 
     it('should call this.gasInput with the correct args', () => {
@@ -155,7 +155,7 @@ describe('AdvancedTabContent Component', function () {
     })
 
     it('should render the i element', () => {
-      assert(infoButton.hasClass('info-circle'))
+      assert(infoButton.hasClass('fa-info-circle'))
     })
 
     it('should pass the onClick argument to the i tag onClick prop', () => {