From 8d9f4c21865023749050593afc6e1655e41fc945 Mon Sep 17 00:00:00 2001
From: Amanda Yeoh <amanda.yeoh@consensys.net>
Date: Fri, 3 Oct 2025 16:26:23 +0800
Subject: [PATCH 1/3] fix: refine button styles to match trade patterns

---
 .../bridge-transaction-settings-modal.tsx     | 192 ++++++++----------
 ui/pages/bridge/prepare/index.scss            |   4 -
 2 files changed, 88 insertions(+), 108 deletions(-)

diff --git a/ui/pages/bridge/prepare/bridge-transaction-settings-modal.tsx b/ui/pages/bridge/prepare/bridge-transaction-settings-modal.tsx
index 83339950528d..e3ffbfd04a02 100644
--- a/ui/pages/bridge/prepare/bridge-transaction-settings-modal.tsx
+++ b/ui/pages/bridge/prepare/bridge-transaction-settings-modal.tsx
@@ -2,11 +2,10 @@ import React, { useState, useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { BRIDGE_DEFAULT_SLIPPAGE } from '@metamask/bridge-controller';
 import {
-  Button,
   ButtonPrimary,
   ButtonPrimarySize,
-  ButtonSize,
-  ButtonVariant,
+  ButtonSecondary,
+  ButtonSecondarySize,
   Modal,
   ModalContent,
   ModalFooter,
@@ -19,17 +18,16 @@ import {
   BannerAlert,
   BannerAlertSeverity,
   Box,
+  TextFieldSize,
 } from '../../../components/component-library';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import {
-  BackgroundColor,
   BlockSize,
   BorderColor,
-  BorderRadius,
   JustifyContent,
-  TextColor,
   TextVariant,
   SEVERITIES,
+  BorderRadius,
 } from '../../../helpers/constants/design-system';
 import { getIsSolanaSwap, getSlippage } from '../../../ducks/bridge/selectors';
 import { setSlippage } from '../../../ducks/bridge/actions';
@@ -109,55 +107,54 @@ export const BridgeTransactionSettingsModal = ({
       <ModalOverlay />
       <ModalContent>
         <ModalHeader onClose={onClose}>{t('transactionSettings')}</ModalHeader>
-        <Column gap={3} padding={4}>
+        <Column gap={3} paddingInline={4} paddingBottom={4}>
           <Row gap={1} justifyContent={JustifyContent.flexStart}>
-            <Text>{t('swapsMaxSlippage')}</Text>
+            <Text variant={TextVariant.bodyMdMedium}>
+              {t('swapsMaxSlippage')}
+            </Text>
             <Tooltip position={PopoverPosition.Top} style={{ zIndex: 1051 }}>
               {t('swapSlippageTooltip')}
             </Tooltip>
           </Row>
           <Row gap={2} justifyContent={JustifyContent.flexStart}>
             {shouldShowAutoOption && (
-              <Button
-                size={ButtonSize.Sm}
-                onClick={(e: React.MouseEvent<HTMLAnchorElement>) => {
-                  e.preventDefault();
-                  e.stopPropagation();
-                  setLocalSlippage(undefined);
-                  setCustomSlippage(undefined);
-                  setIsAutoSelected(true);
-                }}
-                variant={ButtonVariant.Secondary}
-                borderColor={
-                  isAutoSelected
-                    ? BorderColor.primaryDefault
-                    : BorderColor.borderDefault
-                }
-                borderWidth={isAutoSelected ? 2 : 1}
-                backgroundColor={
-                  isAutoSelected
-                    ? BackgroundColor.primaryMuted
-                    : BackgroundColor.backgroundDefault
-                }
-              >
-                <Text
-                  color={
-                    isAutoSelected
-                      ? TextColor.primaryDefault
-                      : TextColor.textDefault
-                  }
-                >
-                  {t('swapSlippageAutoDescription')}
-                </Text>
-              </Button>
+              <>
+                {isAutoSelected ? (
+                  <ButtonPrimary
+                    size={ButtonPrimarySize.Md}
+                    onClick={(e: React.MouseEvent<HTMLAnchorElement>) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      setLocalSlippage(undefined);
+                      setCustomSlippage(undefined);
+                      setIsAutoSelected(true);
+                    }}
+                  >
+                    {t('swapSlippageAutoDescription')}
+                  </ButtonPrimary>
+                ) : (
+                  <ButtonSecondary
+                    size={ButtonSecondarySize.Md}
+                    onClick={(e: React.MouseEvent<HTMLAnchorElement>) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      setLocalSlippage(undefined);
+                      setCustomSlippage(undefined);
+                      setIsAutoSelected(true);
+                    }}
+                  >
+                    {t('swapSlippageAutoDescription')}
+                  </ButtonSecondary>
+                )}
+              </>
             )}
             {HARDCODED_SLIPPAGE_OPTIONS.map((hardcodedSlippage) => {
               const isSelected =
-                !isAutoSelected && localSlippage === hardcodedSlippage;
-              return (
-                <Button
+                isAutoSelected === false && localSlippage === hardcodedSlippage;
+              return isSelected ? (
+                <ButtonPrimary
                   key={hardcodedSlippage}
-                  size={ButtonSize.Sm}
+                  size={ButtonPrimarySize.Md}
                   onClick={(e: React.MouseEvent<HTMLAnchorElement>) => {
                     e.preventDefault();
                     e.stopPropagation();
@@ -165,71 +162,59 @@ export const BridgeTransactionSettingsModal = ({
                     setCustomSlippage(undefined);
                     setIsAutoSelected(false);
                   }}
-                  variant={ButtonVariant.Secondary}
-                  borderColor={
-                    isSelected
-                      ? BorderColor.primaryDefault
-                      : BorderColor.borderDefault
-                  }
-                  borderWidth={isSelected ? 2 : 1}
-                  backgroundColor={
-                    isSelected
-                      ? BackgroundColor.primaryMuted
-                      : BackgroundColor.backgroundDefault
-                  }
                 >
-                  <Text
-                    color={
-                      isSelected
-                        ? TextColor.primaryDefault
-                        : TextColor.textDefault
-                    }
-                  >
-                    {hardcodedSlippage}%
-                  </Text>
-                </Button>
+                  {hardcodedSlippage}%
+                </ButtonPrimary>
+              ) : (
+                <ButtonSecondary
+                  key={hardcodedSlippage}
+                  size={ButtonSecondarySize.Md}
+                  onClick={(e: React.MouseEvent<HTMLAnchorElement>) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    setLocalSlippage(hardcodedSlippage);
+                    setCustomSlippage(undefined);
+                    setIsAutoSelected(false);
+                  }}
+                >
+                  {hardcodedSlippage}%
+                </ButtonSecondary>
               );
             })}
             {showCustomButton && (
-              <Button
-                size={ButtonSize.Sm}
-                variant={ButtonVariant.Secondary}
-                borderColor={
-                  customSlippage === undefined
-                    ? BorderColor.borderDefault
-                    : BorderColor.primaryDefault
-                }
-                borderWidth={customSlippage === undefined ? 1 : 2}
-                backgroundColor={
-                  customSlippage === undefined
-                    ? BackgroundColor.backgroundDefault
-                    : BackgroundColor.primaryMuted
-                }
-                onClick={(e: React.MouseEvent<HTMLAnchorElement>) => {
-                  e.preventDefault();
-                  e.stopPropagation();
-                  setShowCustomButton(false);
-                  setIsAutoSelected(false);
-                }}
-              >
-                <Text
-                  color={
-                    customSlippage === undefined
-                      ? TextColor.textDefault
-                      : TextColor.primaryDefault
-                  }
-                >
-                  {customSlippage === undefined
-                    ? t('customSlippage')
-                    : `${customSlippage}%`}
-                </Text>
-              </Button>
+              <>
+                {customSlippage === undefined ? (
+                  <ButtonSecondary
+                    size={ButtonSecondarySize.Md}
+                    onClick={(e: React.MouseEvent<HTMLAnchorElement>) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      setShowCustomButton(false);
+                      setIsAutoSelected(false);
+                    }}
+                  >
+                    {t('customSlippage')}
+                  </ButtonSecondary>
+                ) : (
+                  <ButtonPrimary
+                    size={ButtonPrimarySize.Md}
+                    onClick={(e: React.MouseEvent<HTMLAnchorElement>) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      setShowCustomButton(false);
+                      setIsAutoSelected(false);
+                    }}
+                  >
+                    {`${customSlippage}%`}
+                  </ButtonPrimary>
+                )}
+              </>
             )}
             {!showCustomButton && (
               <TextField
-                borderColor={BorderColor.primaryDefault}
-                borderWidth={2}
-                borderRadius={BorderRadius.pill}
+                size={TextFieldSize.Md}
+                borderColor={BorderColor.borderMuted}
+                borderRadius={BorderRadius.XL}
                 type={TextFieldType.Text}
                 value={customSlippage}
                 onChange={(e) => {
@@ -266,8 +251,7 @@ export const BridgeTransactionSettingsModal = ({
         <ModalFooter>
           <ButtonPrimary
             width={BlockSize.Full}
-            size={ButtonPrimarySize.Md}
-            variant={TextVariant.bodyMd}
+            size={ButtonPrimarySize.Lg}
             disabled={(() => {
               // Calculate what the new slippage would be
               const newSlippage = isAutoSelected
diff --git a/ui/pages/bridge/prepare/index.scss b/ui/pages/bridge/prepare/index.scss
index 103fecad9999..bfb29912999e 100644
--- a/ui/pages/bridge/prepare/index.scss
+++ b/ui/pages/bridge/prepare/index.scss
@@ -102,7 +102,6 @@
   }
 
   .mm-text-field {
-    height: 32px;
     width: 94px;
 
     &--focused,
@@ -111,10 +110,7 @@
     }
 
     input {
-      font-size: var(--font-size-2);
-      padding-top: 1px;
       width: 100%;
-      height: 32px;
     }
   }
 }

From 075e1233b8fadc7abf3b7dc343d7fc7192d734bb Mon Sep 17 00:00:00 2001
From: Amanda Yeoh <amanda.yeoh@consensys.net>
Date: Thu, 23 Oct 2025 01:55:05 +0800
Subject: [PATCH 2/3] fix: revert button logic to treat undefined
 isAutoSelected as false

---
 ui/pages/bridge/prepare/bridge-transaction-settings-modal.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/pages/bridge/prepare/bridge-transaction-settings-modal.tsx b/ui/pages/bridge/prepare/bridge-transaction-settings-modal.tsx
index e3ffbfd04a02..6d6ec7399576 100644
--- a/ui/pages/bridge/prepare/bridge-transaction-settings-modal.tsx
+++ b/ui/pages/bridge/prepare/bridge-transaction-settings-modal.tsx
@@ -150,7 +150,7 @@ export const BridgeTransactionSettingsModal = ({
             )}
             {HARDCODED_SLIPPAGE_OPTIONS.map((hardcodedSlippage) => {
               const isSelected =
-                isAutoSelected === false && localSlippage === hardcodedSlippage;
+                !isAutoSelected && localSlippage === hardcodedSlippage;
               return isSelected ? (
                 <ButtonPrimary
                   key={hardcodedSlippage}

From d039c947e1b73a0d715b4373562badb6140084ab Mon Sep 17 00:00:00 2001
From: Amanda Yeoh <amanda.yeoh@consensys.net>
Date: Thu, 23 Oct 2025 02:13:35 +0800
Subject: [PATCH 3/3] fix: refactor buttons to render conditionally

---
 .../bridge-transaction-settings-modal.tsx     | 130 +++++++-----------
 1 file changed, 49 insertions(+), 81 deletions(-)

diff --git a/ui/pages/bridge/prepare/bridge-transaction-settings-modal.tsx b/ui/pages/bridge/prepare/bridge-transaction-settings-modal.tsx
index 6d6ec7399576..d4519f28043d 100644
--- a/ui/pages/bridge/prepare/bridge-transaction-settings-modal.tsx
+++ b/ui/pages/bridge/prepare/bridge-transaction-settings-modal.tsx
@@ -2,10 +2,9 @@ import React, { useState, useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { BRIDGE_DEFAULT_SLIPPAGE } from '@metamask/bridge-controller';
 import {
-  ButtonPrimary,
-  ButtonPrimarySize,
-  ButtonSecondary,
-  ButtonSecondarySize,
+  Button,
+  ButtonSize,
+  ButtonVariant,
   Modal,
   ModalContent,
   ModalFooter,
@@ -118,57 +117,34 @@ export const BridgeTransactionSettingsModal = ({
           </Row>
           <Row gap={2} justifyContent={JustifyContent.flexStart}>
             {shouldShowAutoOption && (
-              <>
-                {isAutoSelected ? (
-                  <ButtonPrimary
-                    size={ButtonPrimarySize.Md}
-                    onClick={(e: React.MouseEvent<HTMLAnchorElement>) => {
-                      e.preventDefault();
-                      e.stopPropagation();
-                      setLocalSlippage(undefined);
-                      setCustomSlippage(undefined);
-                      setIsAutoSelected(true);
-                    }}
-                  >
-                    {t('swapSlippageAutoDescription')}
-                  </ButtonPrimary>
-                ) : (
-                  <ButtonSecondary
-                    size={ButtonSecondarySize.Md}
-                    onClick={(e: React.MouseEvent<HTMLAnchorElement>) => {
-                      e.preventDefault();
-                      e.stopPropagation();
-                      setLocalSlippage(undefined);
-                      setCustomSlippage(undefined);
-                      setIsAutoSelected(true);
-                    }}
-                  >
-                    {t('swapSlippageAutoDescription')}
-                  </ButtonSecondary>
-                )}
-              </>
+              <Button
+                size={ButtonSize.Md}
+                variant={
+                  isAutoSelected
+                    ? ButtonVariant.Primary
+                    : ButtonVariant.Secondary
+                }
+                onClick={(e: React.MouseEvent<HTMLAnchorElement>) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  setLocalSlippage(undefined);
+                  setCustomSlippage(undefined);
+                  setIsAutoSelected(true);
+                }}
+              >
+                {t('swapSlippageAutoDescription')}
+              </Button>
             )}
             {HARDCODED_SLIPPAGE_OPTIONS.map((hardcodedSlippage) => {
               const isSelected =
                 !isAutoSelected && localSlippage === hardcodedSlippage;
-              return isSelected ? (
-                <ButtonPrimary
-                  key={hardcodedSlippage}
-                  size={ButtonPrimarySize.Md}
-                  onClick={(e: React.MouseEvent<HTMLAnchorElement>) => {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    setLocalSlippage(hardcodedSlippage);
-                    setCustomSlippage(undefined);
-                    setIsAutoSelected(false);
-                  }}
-                >
-                  {hardcodedSlippage}%
-                </ButtonPrimary>
-              ) : (
-                <ButtonSecondary
+              return (
+                <Button
                   key={hardcodedSlippage}
-                  size={ButtonSecondarySize.Md}
+                  size={ButtonSize.Md}
+                  variant={
+                    isSelected ? ButtonVariant.Primary : ButtonVariant.Secondary
+                  }
                   onClick={(e: React.MouseEvent<HTMLAnchorElement>) => {
                     e.preventDefault();
                     e.stopPropagation();
@@ -178,37 +154,28 @@ export const BridgeTransactionSettingsModal = ({
                   }}
                 >
                   {hardcodedSlippage}%
-                </ButtonSecondary>
+                </Button>
               );
             })}
             {showCustomButton && (
-              <>
-                {customSlippage === undefined ? (
-                  <ButtonSecondary
-                    size={ButtonSecondarySize.Md}
-                    onClick={(e: React.MouseEvent<HTMLAnchorElement>) => {
-                      e.preventDefault();
-                      e.stopPropagation();
-                      setShowCustomButton(false);
-                      setIsAutoSelected(false);
-                    }}
-                  >
-                    {t('customSlippage')}
-                  </ButtonSecondary>
-                ) : (
-                  <ButtonPrimary
-                    size={ButtonPrimarySize.Md}
-                    onClick={(e: React.MouseEvent<HTMLAnchorElement>) => {
-                      e.preventDefault();
-                      e.stopPropagation();
-                      setShowCustomButton(false);
-                      setIsAutoSelected(false);
-                    }}
-                  >
-                    {`${customSlippage}%`}
-                  </ButtonPrimary>
-                )}
-              </>
+              <Button
+                size={ButtonSize.Md}
+                variant={
+                  customSlippage === undefined
+                    ? ButtonVariant.Secondary
+                    : ButtonVariant.Primary
+                }
+                onClick={(e: React.MouseEvent<HTMLAnchorElement>) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  setShowCustomButton(false);
+                  setIsAutoSelected(false);
+                }}
+              >
+                {customSlippage === undefined
+                  ? t('customSlippage')
+                  : `${customSlippage}%`}
+              </Button>
             )}
             {!showCustomButton && (
               <TextField
@@ -249,9 +216,10 @@ export const BridgeTransactionSettingsModal = ({
           )}
         </Column>
         <ModalFooter>
-          <ButtonPrimary
+          <Button
             width={BlockSize.Full}
-            size={ButtonPrimarySize.Lg}
+            size={ButtonSize.Lg}
+            variant={ButtonVariant.Primary}
             disabled={(() => {
               // Calculate what the new slippage would be
               const newSlippage = isAutoSelected
@@ -276,7 +244,7 @@ export const BridgeTransactionSettingsModal = ({
             }}
           >
             {t('submit')}
-          </ButtonPrimary>
+          </Button>
         </ModalFooter>
       </ModalContent>
     </Modal>