Replaced ActionableMessage in confirm-page-container-content (#20417)

* Replaced ActionableMessage in confirm-page-container-content

* Updated Snapshot of confirm-transaction-base

* Updated BannerAlert className

* Using component API and replacing ErrorMessage

* Update snapshot

---------

Co-authored-by: George Marshall <george.marshall@consensys.net>

ui/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-content.component.js

@@ -2,15 +2,17 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { Tabs, Tab } from '../../../ui/tabs';
+import {
   ///: BEGIN:ONLY_INCLUDE_IN(build-main,build-beta,build-flask)
-import Button from '../../../ui/button';
+  Button,
+  BUTTON_SIZES,
+  BUTTON_VARIANT,
   ///: END:ONLY_INCLUDE_IN
-import ActionableMessage from '../../../ui/actionable-message/actionable-message';
+  BannerAlert,
+} from '../../../component-library';
 import { PageContainerFooter } from '../../../ui/page-container';
-import ErrorMessage from '../../../ui/error-message';
 import { INSUFFICIENT_FUNDS_ERROR_KEY } from '../../../../helpers/constants/error-keys';
-import Typography from '../../../ui/typography';
+import { Severity } from '../../../../helpers/constants/design-system';
-import { TypographyVariant } from '../../../../helpers/constants/design-system';
 
 import { isSuspiciousResponse } from '../../../../../shared/modules/security-provider.utils';
 ///: BEGIN:ONLY_INCLUDE_IN(blockaid)
@@ -256,46 +258,42 @@ export default class ConfirmPageContainerContent extends Component {
         {!supportsEIP1559 &&
           !showInsuffienctFundsError &&
           (errorKey || errorMessage) && (
-            <div className="confirm-page-container-content__error-container">
+            <BannerAlert
-              <ErrorMessage errorMessage={errorMessage} errorKey={errorKey} />
+              severity={Severity.Danger}
-            </div>
+              description={errorKey ? t(errorKey) : errorMessage}
+              marginBottom={4}
+              marginLeft={4}
+              marginRight={4}
+            />
           )}
         {showInsuffienctFundsError && (
-          <div className="confirm-page-container-content__error-container">
+          <BannerAlert
-            <ActionableMessage
+            severity={Severity.Danger}
-              className="actionable-message--warning"
+            marginBottom={4}
-              message={
+            marginLeft={4}
-                isBuyableChain ? (
+            marginRight={4}
-                  <Typography variant={TypographyVariant.H7} align="left">
+            description={
-                    {t('insufficientCurrencyBuyOrDeposit', [
+              isBuyableChain
+                ? t('insufficientCurrencyBuyOrDeposit', [
                     nativeCurrency,
                     networkName,
                     ///: BEGIN:ONLY_INCLUDE_IN(build-main,build-beta,build-flask)
                     <Button
-                        type="inline"
+                      variant={BUTTON_VARIANT.LINK}
-                        className="confirm-page-container-content__link"
+                      size={BUTTON_SIZES.INHERIT}
                       onClick={openBuyCryptoInPdapp}
                       key={`${nativeCurrency}-buy-button`}
                     >
                       {t('buyAsset', [nativeCurrency])}
                     </Button>,
                     ///: END:ONLY_INCLUDE_IN
-                    ])}
+                  ])
-                  </Typography>
+                : t('insufficientCurrencyDeposit', [
-                ) : (
-                  <Typography variant={TypographyVariant.H7} align="left">
-                    {t('insufficientCurrencyDeposit', [
                     nativeCurrency,
                     networkName,
-                    ])}
+                  ])
-                  </Typography>
-                )
             }
-              useIcon
-              iconFillColor="var(--color-error-default)"
-              type="danger"
           />
-          </div>
         )}
         <PageContainerFooter
           onCancel={onCancel}

ui/components/app/confirm-page-container/confirm-page-container-content/index.scss

@@ -12,10 +12,6 @@
     border-top: 1px solid var(--color-border-muted);
   }
 
-  &__error-container {
-    padding: 0 16px 16px 16px;
-  }
-
   &__details {
     box-sizing: border-box;
     padding: 0 24px;

ui/pages/confirm-transaction-base/__snapshots__/confirm-transaction-base.test.js.snap

@@ -489,30 +489,21 @@ exports[`Confirm Transaction Base should match snapshot 1`] = `
         </div>
       </div>
       <div
-        class="confirm-page-container-content__error-container"
+        class="box mm-banner-base mm-banner-alert mm-banner-alert--severity-danger box--margin-right-4 box--margin-bottom-4 box--margin-left-4 box--padding-3 box--padding-left-2 box--display-flex box--gap-2 box--flex-direction-row box--background-color-error-muted box--rounded-sm"
       >
-        <div
+        <span
-          class="actionable-message actionable-message--danger actionable-message--warning actionable-message--with-icon"
+          class="mm-box mm-icon mm-icon--size-lg mm-box--display-inline-block mm-box--color-error-default"
-        >
+          style="mask-image: url('./images/icons/danger.svg');"
-          <svg
-            viewBox="0 0 10 10"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M5 0C2.2 0 0 2.2 0 5s2.2 5 5 5 5-2.2 5-5-2.2-5-5-5zm0 2c.4 0 .7.3.7.7s-.3.7-.7.7-.7-.2-.7-.6.3-.8.7-.8zm.7 6H4.3V4.3h1.5V8z"
-              fill="var(--color-error-default)"
         />
-          </svg>
+        <div>
-          
+          <p
-          <div
+            class="mm-box mm-text mm-text--body-md mm-box--color-text-default"
-            class="actionable-message__message"
-          >
-            <h6
-              class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography typography--h7 typography--weight-normal typography--style-normal typography--align-left typography--color-text-default"
           >
             You do not have enough  in your account to pay for transaction fees on Goerli network. Deposit  from another account.
-            </h6>
+          </p>
-          </div>
+          <p
+            class="mm-box mm-text mm-text--body-md mm-box--color-text-default"
+          />
         </div>
       </div>
       <div