diff --git a/ui/components/app/cancel-speedup-popover/cancel-speedup-popover.js b/ui/components/app/cancel-speedup-popover/cancel-speedup-popover.js
index 8b5e666d5..e7c0b6ee3 100644
--- a/ui/components/app/cancel-speedup-popover/cancel-speedup-popover.js
+++ b/ui/components/app/cancel-speedup-popover/cancel-speedup-popover.js
@@ -3,8 +3,8 @@ import React, { useEffect } from 'react';
 import { EditGasModes, PriorityLevels } from '../../../../shared/constants/gas';
 import {
   AlignItems,
-  DISPLAY,
-  FLEX_DIRECTION,
+  Display,
+  FlexDirection,
   TextVariant,
 } from '../../../helpers/constants/design-system';
 import { getAppIsLoading } from '../../../selectors';
@@ -97,20 +97,14 @@ const CancelSpeedupPopover = () => {
       <div className="cancel-speedup-popover__wrapper">
         <Text
           alignItems={AlignItems.center}
-          display={DISPLAY.FLEX}
+          display={Display.Flex}
           variant={TextVariant.bodySm}
           marginBottom={2}
           paddingBottom={2}
           className="cancel-speedup-popover__description"
         >
           {t('cancelSpeedUpLabel', [
-            <Text
-              as="strong"
-              variant={TextVariant.bodySm}
-              key="cancelSpeedupCancel"
-            >
-              {t('replace')}
-            </Text>,
+            <strong key="cancelSpeedupCancel">{t('replace')}</strong>,
           ])}
           <InfoTooltip
             position="top"
@@ -135,17 +129,17 @@ const CancelSpeedupPopover = () => {
           />
         </Text>
         <Box
-          display={DISPLAY.FLEX}
+          display={Display.Flex}
           alignItems={AlignItems.center}
-          flexDirection={FLEX_DIRECTION.COLUMN}
+          flexDirection={FlexDirection.Column}
           marginTop={2}
         >
-          <Box className="cancel-speedup-popover__edit-gas-button">
+          <div className="cancel-speedup-popover__edit-gas-button">
             {!appIsLoading && <EditGasFeeButton />}
-          </Box>
-          <Box className="cancel-speedup-popover__gas-details">
+          </div>
+          <div className="cancel-speedup-popover__gas-details">
             <GasDetailsItem />
-          </Box>
+          </div>
         </Box>
         <Button onClick={submitTransactionChange}>{t('submit')}</Button>
       </div>
diff --git a/ui/components/app/cancel-speedup-popover/cancel-speedup-popover.test.js b/ui/components/app/cancel-speedup-popover/cancel-speedup-popover.test.js
index 1d8c28056..1512b8992 100644
--- a/ui/components/app/cancel-speedup-popover/cancel-speedup-popover.test.js
+++ b/ui/components/app/cancel-speedup-popover/cancel-speedup-popover.test.js
@@ -125,7 +125,7 @@ describe('CancelSpeedupPopover', () => {
   it('information tooltip should contain the correct text if editGasMode is cancel', async () => {
     await act(async () => render());
     expect(
-      InfoTooltip.mock.calls[0][0].contentText.props.children[0],
+      InfoTooltip.mock.calls[0][0].contentText.props.children[0].props.children,
     ).toStrictEqual(
       'To Cancel a transaction the gas fee must be increased by at least 10% for it to be recognized by the network.',
     );
@@ -134,7 +134,7 @@ describe('CancelSpeedupPopover', () => {
   it('information tooltip should contain the correct text if editGasMode is speedup', async () => {
     await act(async () => render({ editGasMode: EditGasModes.speedUp }));
     expect(
-      InfoTooltip.mock.calls[0][0].contentText.props.children[0],
+      InfoTooltip.mock.calls[0][0].contentText.props.children[0].props.children,
     ).toStrictEqual(
       'To Speed up a transaction the gas fee must be increased by at least 10% for it to be recognized by the network.',
     );