From cdbfe0f1329680ca3e12b218e8c319394b8e509e Mon Sep 17 00:00:00 2001
From: David Walsh <davidwalsh83@gmail.com>
Date: Mon, 2 Aug 2021 21:08:20 -0500
Subject: [PATCH] EIP-1559 - Ensure transaction detail font-size and icon
 colors are consistent with Figma design (#11735)

---
 .../app/advanced-gas-controls/index.scss      |  2 +-
 .../app/transaction-detail-item/index.scss    |  4 ++
 .../transaction-detail-item.component.js      |  6 +-
 .../confirm-transaction-base.component.js     | 59 +++++++++++--------
 4 files changed, 41 insertions(+), 30 deletions(-)

diff --git a/ui/components/app/advanced-gas-controls/index.scss b/ui/components/app/advanced-gas-controls/index.scss
index 7fdf9174f..969c8ca3f 100644
--- a/ui/components/app/advanced-gas-controls/index.scss
+++ b/ui/components/app/advanced-gas-controls/index.scss
@@ -30,6 +30,6 @@
   }
 
   path {
-    fill: #dadada;
+    fill: $ui-3;
   }
 }
diff --git a/ui/components/app/transaction-detail-item/index.scss b/ui/components/app/transaction-detail-item/index.scss
index 30308cdf7..a2dc8e4cd 100644
--- a/ui/components/app/transaction-detail-item/index.scss
+++ b/ui/components/app/transaction-detail-item/index.scss
@@ -14,6 +14,10 @@
   .info-tooltip {
     display: inline-block;
     margin-inline-start: 4px;
+
+    path {
+      fill: $ui-3;
+    }
   }
 
   &__total {
diff --git a/ui/components/app/transaction-detail-item/transaction-detail-item.component.js b/ui/components/app/transaction-detail-item/transaction-detail-item.component.js
index d8f6cf299..80a3e2fef 100644
--- a/ui/components/app/transaction-detail-item/transaction-detail-item.component.js
+++ b/ui/components/app/transaction-detail-item/transaction-detail-item.component.js
@@ -22,14 +22,14 @@ export default function TransactionDetailItem({
         <Typography
           color={detailTitleColor}
           fontWeight={FONT_WEIGHT.BOLD}
-          variant={TYPOGRAPHY.H7}
+          variant={TYPOGRAPHY.H6}
           className="transaction-detail-item__title"
         >
           {detailTitle}
         </Typography>
         {detailText && (
           <Typography
-            variant={TYPOGRAPHY.H7}
+            variant={TYPOGRAPHY.H6}
             className="transaction-detail-item__detail-text"
             color={COLORS.UI4}
           >
@@ -39,7 +39,7 @@ export default function TransactionDetailItem({
         <Typography
           color={COLORS.BLACK}
           fontWeight={FONT_WEIGHT.BOLD}
-          variant={TYPOGRAPHY.H7}
+          variant={TYPOGRAPHY.H6}
           className="transaction-detail-item__total"
         >
           {detailTotal}
diff --git a/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js b/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js
index 415c1cd05..96cf67903 100644
--- a/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js
+++ b/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js
@@ -331,7 +331,6 @@ export default class ConfirmTransactionBase extends Component {
                     <InfoTooltip
                       contentText={t('transactionDetailDappGasTooltip')}
                       position="top"
-                      iconFillColor="#f66a0a"
                     >
                       <i className="fa fa-info-circle" />
                     </InfoTooltip>
@@ -379,17 +378,21 @@ export default class ConfirmTransactionBase extends Component {
                   hideLabel
                 />
               }
-              subText={t('editGasSubTextFee', [
-                <UserPreferencedCurrencyDisplay
-                  key="gas-subtext"
-                  type={SECONDARY}
-                  value={getHexGasTotal({
-                    gasPrice: txData.txParams.maxFeePerGas,
-                    gasLimit: txData.txParams.gas,
-                  })}
-                  hideLabel
-                />,
-              ])}
+              subText={
+                <strong>
+                  {t('editGasSubTextFee', [
+                    <UserPreferencedCurrencyDisplay
+                      key="gas-subtext"
+                      type={SECONDARY}
+                      value={getHexGasTotal({
+                        gasPrice: txData.txParams.maxFeePerGas,
+                        gasLimit: txData.txParams.gas,
+                      })}
+                      hideLabel
+                    />,
+                  ])}
+                </strong>
+              }
               subTitle={
                 <GasTiming
                   maxPriorityFeePerGas={txData.txParams.maxPriorityFeePerGas}
@@ -418,20 +421,24 @@ export default class ConfirmTransactionBase extends Component {
                 secondaryTotalTextOverride ||
                 t('transactionDetailGasTotalSubtitle')
               }
-              subText={t('editGasSubTextAmount', [
-                <UserPreferencedCurrencyDisplay
-                  key="gas-total-subtext"
-                  type={SECONDARY}
-                  value={addHexes(
-                    txData.txParams.value,
-                    getHexGasTotal({
-                      gasPrice: txData.txParams.maxFeePerGas,
-                      gasLimit: txData.txParams.gas,
-                    }),
-                  )}
-                  hideLabel
-                />,
-              ])}
+              subText={
+                <strong>
+                  {t('editGasSubTextAmount', [
+                    <UserPreferencedCurrencyDisplay
+                      key="gas-total-subtext"
+                      type={SECONDARY}
+                      value={addHexes(
+                        txData.txParams.value,
+                        getHexGasTotal({
+                          gasPrice: txData.txParams.maxFeePerGas,
+                          gasLimit: txData.txParams.gas,
+                        }),
+                      )}
+                      hideLabel
+                    />,
+                  ])}
+                </strong>
+              }
             />,
           ]}
         />