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,7 +378,9 @@ export default class ConfirmTransactionBase extends Component {
                   hideLabel
                 />
               }
-              subText={t('editGasSubTextFee', [
+              subText={
+                <strong>
+                  {t('editGasSubTextFee', [
                     <UserPreferencedCurrencyDisplay
                       key="gas-subtext"
                       type={SECONDARY}
@@ -390,6 +391,8 @@ export default class ConfirmTransactionBase extends Component {
                       hideLabel
                     />,
                   ])}
+                </strong>
+              }
               subTitle={
                 <GasTiming
                   maxPriorityFeePerGas={txData.txParams.maxPriorityFeePerGas}
@@ -418,7 +421,9 @@ export default class ConfirmTransactionBase extends Component {
                 secondaryTotalTextOverride ||
                 t('transactionDetailGasTotalSubtitle')
               }
-              subText={t('editGasSubTextAmount', [
+              subText={
+                <strong>
+                  {t('editGasSubTextAmount', [
                     <UserPreferencedCurrencyDisplay
                       key="gas-total-subtext"
                       type={SECONDARY}
@@ -432,6 +437,8 @@ export default class ConfirmTransactionBase extends Component {
                       hideLabel
                     />,
                   ])}
+                </strong>
+              }
             />,
           ]}
         />