Redesign of gas customization basic tab.

2 files changed, 24 insertions, 7 deletions

diff --git a/ui/app/components/gas-customization/gas-modal-page-container/basic-tab-content/basic-tab-content.component.js b/ui/app/components/gas-customization/gas-modal-page-container/basic-tab-content/basic-tab-content.component.js
index 0e5f15519..4483b71df 100644
--- a/ui/app/components/gas-customization/gas-modal-page-container/basic-tab-content/basic-tab-content.component.js
+++ b/ui/app/components/gas-customization/gas-modal-page-container/basic-tab-content/basic-tab-content.component.js
@@ -14,12 +14,14 @@ export default class BasicTabContent extends Component {
   render () {
     return (
       <div className="basic-tab-content">
-        <div className="basic-tab-content__title">Suggest gas fee increases</div>
+        <div className="basic-tab-content__title">Estimated Processing Times</div>
+        <div className="basic-tab-content__blurb">Select a higher gas fee to accelerate the processing of your transaction.*</div>
         <GasPriceButtonGroup
-          className="gas-price-button-group"
+          className="gas-price-button-group--alt"
           showCheck={true}
           {...this.props.gasPriceButtonGroupProps}
         />
+        <div className="basic-tab-content__footer-blurb">* Accelerating a transaction by using a higher gas price increases its chances of getting processed by the network faster, but it is not always guaranteed.</div>
       </div>
     )
   }
diff --git a/ui/app/components/gas-customization/gas-modal-page-container/basic-tab-content/index.scss b/ui/app/components/gas-customization/gas-modal-page-container/basic-tab-content/index.scss
index b7b6c0f94..e34e4e328 100644
--- a/ui/app/components/gas-customization/gas-modal-page-container/basic-tab-content/index.scss
+++ b/ui/app/components/gas-customization/gas-modal-page-container/basic-tab-content/index.scss
@@ -1,13 +1,28 @@
 .basic-tab-content {
   display: flex;
   flex-direction: column;
-  align-items: center;
-  margin-bottom: 22px;
-  height: 291px;
+  align-items: flex-start;
+  padding-left: 21px;
+  height: 324px;
+  background: #F5F7F8;
+  border-bottom: 1px solid #d2d8dd;
 
   &__title {
     margin-top: 19px;
-    font-size: 20px;
-    color: $scorpion;
+    font-size: 16px;
+    color: $black;
+  }
+
+  &__blurb {
+    font-size: 12px;
+    color: $black;
+    margin-top: 5px;
+    margin-bottom: 15px;
+  }
+
+  &__footer-blurb {
+    font-size: 12px;
+    color: #979797;
+    margin-top: 15px;
   }
 }