From 7e7b4f018ce056b42185a0744f4d588efc59e750 Mon Sep 17 00:00:00 2001
From: David Walsh <davidwalsh83@gmail.com>
Date: Wed, 28 Jun 2023 10:03:50 -0500
Subject: [PATCH] UX: Multichain: Update deprecated variables (#19795)

---
 .../account-details/account-details-authenticate.js  |  8 ++++----
 .../account-details/account-details-display.js       |  8 ++++----
 .../account-details/account-details-key.js           | 12 ++++++------
 .../multichain/account-details/account-details.js    | 10 +++++-----
 .../account-list-menu/account-list-menu.js           |  4 ++--
 .../connected-site-menu/connected-site-menu.js       |  4 ++--
 .../network-list-item/network-list-item.js           |  4 ++--
 .../network-list-menu/network-list-menu.js           |  4 ++--
 8 files changed, 27 insertions(+), 27 deletions(-)

diff --git a/ui/components/multichain/account-details/account-details-authenticate.js b/ui/components/multichain/account-details/account-details-authenticate.js
index c76bde71b..6094f6f5a 100644
--- a/ui/components/multichain/account-details/account-details-authenticate.js
+++ b/ui/components/multichain/account-details/account-details-authenticate.js
@@ -2,9 +2,9 @@ import React, { useCallback, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
 import {
-  DISPLAY,
+  Display,
   FontWeight,
-  SEVERITIES,
+  Severity,
   TextVariant,
 } from '../../../helpers/constants/design-system';
 import {
@@ -60,10 +60,10 @@ export const AccountDetailsAuthenticate = ({ address, onCancel }) => {
         labelProps={{ fontWeight: FontWeight.Medium }}
         autoFocus
       />
-      <BannerAlert marginTop={6} severity={SEVERITIES.DANGER}>
+      <BannerAlert marginTop={6} severity={Severity.Danger}>
         <Text variant={TextVariant.bodySm}>{t('privateKeyWarning')}</Text>
       </BannerAlert>
-      <Box display={DISPLAY.FLEX} marginTop={6} gap={2}>
+      <Box display={Display.Flex} marginTop={6} gap={2}>
         <ButtonSecondary onClick={onCancel} block>
           {t('cancel')}
         </ButtonSecondary>
diff --git a/ui/components/multichain/account-details/account-details-display.js b/ui/components/multichain/account-details/account-details-display.js
index e3c609813..210670fbb 100644
--- a/ui/components/multichain/account-details/account-details-display.js
+++ b/ui/components/multichain/account-details/account-details-display.js
@@ -18,8 +18,8 @@ import {
 } from '../../component-library';
 import {
   AlignItems,
-  DISPLAY,
-  FLEX_DIRECTION,
+  Display,
+  FlexDirection,
   TextVariant,
 } from '../../../helpers/constants/design-system';
 import { MetaMetricsContext } from '../../../contexts/metametrics';
@@ -50,9 +50,9 @@ export const AccountDetailsDisplay = ({
 
   return (
     <Box
-      display={DISPLAY.FLEX}
+      display={Display.Flex}
       alignItems={AlignItems.center}
-      flexDirection={FLEX_DIRECTION.COLUMN}
+      flexDirection={FlexDirection.Column}
     >
       <EditableLabel
         defaultValue={accountName}
diff --git a/ui/components/multichain/account-details/account-details-key.js b/ui/components/multichain/account-details/account-details-key.js
index 2c539ae0e..9eb4ba28c 100644
--- a/ui/components/multichain/account-details/account-details-key.js
+++ b/ui/components/multichain/account-details/account-details-key.js
@@ -11,9 +11,9 @@ import {
   AlignItems,
   BorderColor,
   BorderRadius,
-  DISPLAY,
-  FLEX_DIRECTION,
-  SEVERITIES,
+  Display,
+  FlexDirection,
+  Severity,
   TextVariant,
 } from '../../../helpers/constants/design-system';
 import { useI18nContext } from '../../../hooks/useI18nContext';
@@ -35,8 +35,8 @@ export const AccountDetailsKey = ({ accountName, onClose, privateKey }) => {
         {t('privateKeyCopyWarning', [accountName])}
       </Text>
       <Box
-        display={DISPLAY.FLEX}
-        flexDirection={FLEX_DIRECTION.ROW}
+        display={Display.Flex}
+        flexDirection={FlexDirection.Row}
         alignItems={AlignItems.center}
         borderRadius={BorderRadius.SM}
         borderWidth={1}
@@ -52,7 +52,7 @@ export const AccountDetailsKey = ({ accountName, onClose, privateKey }) => {
           iconName={privateKeyCopied ? IconName.CopySuccess : IconName.Copy}
         />
       </Box>
-      <BannerAlert severity={SEVERITIES.DANGER} marginTop={4}>
+      <BannerAlert severity={Severity.Danger} marginTop={4}>
         <Text variant={TextVariant.bodySm}>{t('privateKeyWarning')}</Text>
       </BannerAlert>
       <ButtonPrimary marginTop={6} onClick={onClose}>
diff --git a/ui/components/multichain/account-details/account-details.js b/ui/components/multichain/account-details/account-details.js
index 67244de38..8ba53230f 100644
--- a/ui/components/multichain/account-details/account-details.js
+++ b/ui/components/multichain/account-details/account-details.js
@@ -21,11 +21,11 @@ import { getMetaMaskAccountsOrdered } from '../../../selectors';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import {
   AlignItems,
-  DISPLAY,
-  FLEX_DIRECTION,
   JustifyContent,
   TextVariant,
   Size,
+  Display,
+  FlexDirection,
 } from '../../../helpers/constants/design-system';
 import { AddressCopyButton } from '../address-copy-button';
 import { AccountDetailsDisplay } from './account-details-display';
@@ -93,7 +93,7 @@ export const AccountDetails = ({ address }) => {
         ) : (
           <PopoverHeader
             childrenWrapperProps={{
-              display: DISPLAY.FLEX,
+              display: Display.Text,
               justifyContent: JustifyContent.center,
             }}
           >
@@ -106,9 +106,9 @@ export const AccountDetails = ({ address }) => {
       {attemptingExport ? (
         <>
           <Box
-            display={DISPLAY.FLEX}
+            display={Display.Flex}
             alignItems={AlignItems.center}
-            flexDirection={FLEX_DIRECTION.COLUMN}
+            flexDirection={FlexDirection.Column}
           >
             {avatar}
             <Text
diff --git a/ui/components/multichain/account-list-menu/account-list-menu.js b/ui/components/multichain/account-list-menu/account-list-menu.js
index 40d6b9df6..a53c1c255 100644
--- a/ui/components/multichain/account-list-menu/account-list-menu.js
+++ b/ui/components/multichain/account-list-menu/account-list-menu.js
@@ -12,7 +12,7 @@ import {
 } from '../../component-library';
 import { AccountListItem, CreateAccount, ImportAccount } from '..';
 import {
-  BLOCK_SIZES,
+  BlockSize,
   Size,
   TextColor,
 } from '../../../helpers/constants/design-system';
@@ -129,7 +129,7 @@ export const AccountListMenu = ({ onClose }) => {
             >
               <TextFieldSearch
                 size={Size.SM}
-                width={BLOCK_SIZES.FULL}
+                width={BlockSize.Full}
                 placeholder={t('searchAccounts')}
                 value={searchQuery}
                 onChange={(e) => setSearchQuery(e.target.value)}
diff --git a/ui/components/multichain/connected-site-menu/connected-site-menu.js b/ui/components/multichain/connected-site-menu/connected-site-menu.js
index 1a868f18a..9914066dd 100644
--- a/ui/components/multichain/connected-site-menu/connected-site-menu.js
+++ b/ui/components/multichain/connected-site-menu/connected-site-menu.js
@@ -11,7 +11,7 @@ import {
   BackgroundColor,
   BorderColor,
   BorderRadius,
-  DISPLAY,
+  Display,
   IconColor,
   JustifyContent,
 } from '../../../helpers/constants/design-system';
@@ -41,7 +41,7 @@ export const ConnectedSiteMenu = ({
       data-testid="connection-menu"
       as="button"
       onClick={onClick}
-      display={DISPLAY.FLEX}
+      display={Display.Flex}
       alignItems={AlignItems.center}
       justifyContent={JustifyContent.center}
       backgroundColor={BackgroundColor.backgroundDefault}
diff --git a/ui/components/multichain/network-list-item/network-list-item.js b/ui/components/multichain/network-list-item/network-list-item.js
index d4b84ddfc..ad05b00a0 100644
--- a/ui/components/multichain/network-list-item/network-list-item.js
+++ b/ui/components/multichain/network-list-item/network-list-item.js
@@ -10,8 +10,8 @@ import {
   Size,
   JustifyContent,
   TextColor,
-  BLOCK_SIZES,
   BackgroundColor,
+  BlockSize,
 } from '../../../helpers/constants/design-system';
 import {
   AvatarNetwork,
@@ -69,7 +69,7 @@ export const NetworkListItem = ({
       })}
       alignItems={AlignItems.center}
       justifyContent={JustifyContent.spaceBetween}
-      width={BLOCK_SIZES.FULL}
+      width={BlockSize.Full}
       ref={networkRef}
     >
       {selected && (
diff --git a/ui/components/multichain/network-list-menu/network-list-menu.js b/ui/components/multichain/network-list-menu/network-list-menu.js
index 10d856079..bd211d5d7 100644
--- a/ui/components/multichain/network-list-menu/network-list-menu.js
+++ b/ui/components/multichain/network-list-menu/network-list-menu.js
@@ -21,7 +21,7 @@ import {
 import Box from '../../ui/box/box';
 import ToggleButton from '../../ui/toggle-button';
 import {
-  DISPLAY,
+  Display,
   JustifyContent,
 } from '../../../helpers/constants/design-system';
 import {
@@ -140,7 +140,7 @@ export const NetworkListMenu = ({ onClose }) => {
         </Box>
         <Box
           padding={4}
-          display={DISPLAY.FLEX}
+          display={Display.Flex}
           justifyContent={JustifyContent.spaceBetween}
         >
           <Text>{t('showTestnetNetworks')}</Text>