EIP-1559 - Ensure transaction detail font-size and icon colors are consistent with Figma design (#11735)

ui/components/app/advanced-gas-controls/index.scss

@@ -30,6 +30,6 @@
   }
 
   path {
-    fill: #dadada;
+    fill: $ui-3;
   }
 }

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 {

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}

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>
+              }
             />,
           ]}
         />