fix: dapp swap design fixes (#38626)

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**

Design fixesin dapp swap banner.

## **Changelog**

<!--
If this PR is not End-User-Facing and should not show up in the
CHANGELOG, you can choose to either:
1. Write `CHANGELOG entry: null`
2. Label with `no-changelog`

If this PR is End-User-Facing, please write a short User-Facing
description in the past tense like:
`CHANGELOG entry: Added a new tab for users to see their NFTs`
`CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker`

(This helps the Release Engineer do their job more quickly and
accurately)
-->

CHANGELOG entry:

## **Related issues**
NA

## **Manual testing steps**

1. Submit swap command
2. Check style of banner and ensure they align with designs

## **Screenshots/Recordings**
<img width="389" height="610" alt="Screenshot 2025-12-08 at 6 46 04 PM"
src="https://github.com/user-attachments/assets/259bbd72-b41c-43eb-b683-019b89088497"
/>

## **Pre-merge author checklist**

- [X] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [X] I've completed the PR template to the best of my ability
- [X] I’ve included tests if applicable
- [X] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [X] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> Increase banner text size to BodySm, add medium weight heading, and
update rewards text color to accent01-normal.
> 
> - **UI — `ui/pages/.../dapp-swap-comparison-banner.tsx`**
> - Increase text variants from `BodyXs` to `BodySm` for quote
difference, divider dot, rewards text, and benefits line.
>   - Add `fontWeight={FontWeight.Medium}` to callout heading.
>   - Use optional chaining for `rewards?.text`.
> - **Styles — `ui/pages/.../dapp-swap-comparison-banner/index.scss`**
> - Update rewards text color from `--color-accent01-light` to
`--color-accent01-normal`.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
435fab8. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: jpuri

ui/pages/confirmations/components/confirm/dapp-swap-comparison-banner/dapp-swap-comparison-banner.tsx

@@ -7,6 +7,7 @@ import {
   BoxFlexDirection,
   ButtonIcon,
   ButtonIconSize,
+  FontWeight,
   IconName,
   Text,
   TextColor,
@@ -187,6 +188,7 @@ const DappSwapComparisonInner = () => {
           <Text
             className="dapp-swap_callout-text"
             color={TextColor.TextDefault}
+            fontWeight={FontWeight.Medium}
             variant={TextVariant.BodySm}
           >
             {rewards ? t('dappSwapAdvantage') : t('dappSwapAdvantageSaveOnly')}
@@ -195,9 +197,8 @@ const DappSwapComparisonInner = () => {
             flexDirection={BoxFlexDirection.Row}
             alignItems={BoxAlignItems.Center}
             gap={2}
-            marginBottom={2}
           >
-            <Text color={TextColor.SuccessDefault} variant={TextVariant.BodyXs}>
+            <Text color={TextColor.SuccessDefault} variant={TextVariant.BodySm}>
               {t('dappSwapQuoteDifference', [
                 `$${selectedQuoteValueDifference.toFixed(2)}`,
               ])}
@@ -206,20 +207,20 @@ const DappSwapComparisonInner = () => {
               <>
                 <Text
                   color={TextColor.TextAlternative}
-                  variant={TextVariant.BodyXs}
+                  variant={TextVariant.BodySm}
                 >
                   {` • `}
                 </Text>
                 <Text
                   className="dapp-swap_text-rewards"
-                  variant={TextVariant.BodyXs}
+                  variant={TextVariant.BodySm}
                 >
-                  {rewards.text}
+                  {rewards?.text}
                 </Text>
               </>
             )}
           </Box>
-          <Text color={TextColor.TextAlternative} variant={TextVariant.BodyXs}>
+          <Text color={TextColor.TextAlternative} variant={TextVariant.BodySm}>
             {t('dappSwapBenefits')}
           </Text>
         </Box>

ui/pages/confirmations/components/confirm/dapp-swap-comparison-banner/index.scss

@@ -46,7 +46,7 @@ Disabling Stylelint's hex color rule here because the TypeScript migration dashb
   }
 
   &_text-rewards {
-    color: var(--color-accent01-light);
+    color: var(--color-accent01-normal);
   }
 
   &_callout-arrow {