From c8ace5c6931bea1dbc4c7046a5a0520c17537938 Mon Sep 17 00:00:00 2001
From: Dhruv Parmar <dhruvv173@gmail.com>
Date: Thu, 8 Jun 2023 19:39:01 +0530
Subject: [PATCH 1/2] replacing deprecated constants with enums

---
 .../advanced-gas-fee-defaults.js              |  8 +++---
 .../contract-details-modal.js                 | 28 +++++++++----------
 .../network-account-balance-header.js         | 24 ++++++++--------
 3 files changed, 30 insertions(+), 30 deletions(-)

diff --git a/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-defaults/advanced-gas-fee-defaults.js b/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-defaults/advanced-gas-fee-defaults.js
index c4a57667d6c2..56a5c4b15598 100644
--- a/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-defaults/advanced-gas-fee-defaults.js
+++ b/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-defaults/advanced-gas-fee-defaults.js
@@ -6,8 +6,8 @@ import { EditGasModes } from '../../../../../shared/constants/gas';
 import Box from '../../../ui/box';
 import CheckBox from '../../../ui/check-box';
 import {
-  DISPLAY,
-  FLEX_DIRECTION,
+  Display,
+  FlexDirection,
   TextColor,
   TextVariant,
 } from '../../../../helpers/constants/design-system';
@@ -72,8 +72,8 @@ const AdvancedGasFeeDefaults = () => {
 
   return (
     <Box
-      display={DISPLAY.FLEX}
-      flexDirection={FLEX_DIRECTION.ROW}
+      display={Display.Flex}
+      flexDirection={FlexDirection.Row}
       marginTop={4}
       marginLeft={2}
       marginRight={2}
diff --git a/ui/components/app/modals/contract-details-modal/contract-details-modal.js b/ui/components/app/modals/contract-details-modal/contract-details-modal.js
index e6250a280081..2c045871052b 100644
--- a/ui/components/app/modals/contract-details-modal/contract-details-modal.js
+++ b/ui/components/app/modals/contract-details-modal/contract-details-modal.js
@@ -12,7 +12,7 @@ import Popover from '../../../ui/popover';
 import {
   FontWeight,
   TextVariant,
-  DISPLAY,
+  Display,
   Size,
   BorderStyle,
   BorderColor,
@@ -65,7 +65,7 @@ export default function ContractDetailsModal({
           fontWeight={FontWeight.Bold}
           variant={TextVariant.bodyMd}
           as="h5"
-          display={DISPLAY.FLEX}
+          display={Display.Flex}
           boxProps={{ marginTop: 0, marginBottom: 0 }}
         >
           {t('contractTitle')}
@@ -73,7 +73,7 @@ export default function ContractDetailsModal({
         <Text
           variant={TextVariant.bodySm}
           as="h6"
-          display={DISPLAY.FLEX}
+          display={Display.Flex}
           color={TextColor.textAlternative}
           boxProps={{ marginTop: 2, marginBottom: 0 }}
         >
@@ -84,14 +84,14 @@ export default function ContractDetailsModal({
             <Text
               variant={TextVariant.bodySm}
               as="h6"
-              display={DISPLAY.FLEX}
+              display={Display.Flex}
               marginTop={4}
               marginBottom={2}
             >
               {nft ? t('contractNFT') : t('contractToken')}
             </Text>
             <Box
-              display={DISPLAY.FLEX}
+              display={Display.Flex}
               borderRadius={Size.SM}
               borderStyle={BorderStyle.solid}
               borderColor={BorderColor.borderDefault}
@@ -124,7 +124,7 @@ export default function ContractDetailsModal({
                   <Text
                     variant={TextVariant.bodySm}
                     as="h6"
-                    display={DISPLAY.FLEX}
+                    display={Display.Flex}
                     color={TextColor.textAlternative}
                     marginTop={0}
                     marginBottom={4}
@@ -148,7 +148,7 @@ export default function ContractDetailsModal({
                   }
                 >
                   <ButtonIcon
-                    display={DISPLAY.FLEX}
+                    display={Display.Flex}
                     iconName={
                       copiedTokenAddress ? IconName.CopySuccess : IconName.Copy
                     }
@@ -163,7 +163,7 @@ export default function ContractDetailsModal({
                 </Tooltip>
                 <Tooltip position="top" title={t('openInBlockExplorer')}>
                   <ButtonIcon
-                    display={DISPLAY.FLEX}
+                    display={Display.Flex}
                     iconName={IconName.Export}
                     color={Color.iconMuted}
                     onClick={() => {
@@ -189,7 +189,7 @@ export default function ContractDetailsModal({
         <Text
           variant={TextVariant.bodySm}
           as="h6"
-          display={DISPLAY.FLEX}
+          display={Display.Flex}
           marginTop={4}
           marginBottom={2}
         >
@@ -200,7 +200,7 @@ export default function ContractDetailsModal({
             t('contractRequestingSpendingCap')}
         </Text>
         <Box
-          display={DISPLAY.FLEX}
+          display={Display.Flex}
           borderRadius={Size.SM}
           borderStyle={BorderStyle.solid}
           borderColor={BorderColor.borderDefault}
@@ -224,7 +224,7 @@ export default function ContractDetailsModal({
               <Text
                 variant={TextVariant.bodySm}
                 as="h6"
-                display={DISPLAY.FLEX}
+                display={Display.Flex}
                 color={TextColor.textAlternative}
                 marginTop={0}
                 marginBottom={4}
@@ -246,7 +246,7 @@ export default function ContractDetailsModal({
               }
             >
               <ButtonIcon
-                display={DISPLAY.FLEX}
+                display={Display.Flex}
                 iconName={
                   copiedToAddress ? IconName.CopySuccess : IconName.Copy
                 }
@@ -261,7 +261,7 @@ export default function ContractDetailsModal({
             </Tooltip>
             <Tooltip position="top" title={t('openInBlockExplorer')}>
               <ButtonIcon
-                display={DISPLAY.FLEX}
+                display={Display.Flex}
                 iconName={IconName.Export}
                 color={Color.iconMuted}
                 onClick={() => {
@@ -284,7 +284,7 @@ export default function ContractDetailsModal({
         </Box>
       </Box>
       <Box
-        display={DISPLAY.FLEX}
+        display={Display.Flex}
         paddingTop={6}
         paddingRight={4}
         paddingBottom={6}
diff --git a/ui/components/app/network-account-balance-header/network-account-balance-header.js b/ui/components/app/network-account-balance-header/network-account-balance-header.js
index 79953f3d60f5..042ece624b48 100644
--- a/ui/components/app/network-account-balance-header/network-account-balance-header.js
+++ b/ui/components/app/network-account-balance-header/network-account-balance-header.js
@@ -3,8 +3,8 @@ import PropTypes from 'prop-types';
 import IconWithFallback from '../../ui/icon-with-fallback';
 import Identicon from '../../ui/identicon';
 import {
-  DISPLAY,
-  FLEX_DIRECTION,
+  Display,
+  FlexDirection,
   TextVariant,
   FontWeight,
   AlignItems,
@@ -33,22 +33,22 @@ export default function NetworkAccountBalanceHeader({
 
   return (
     <Box
-      display={DISPLAY.FLEX}
-      flexDirection={FLEX_DIRECTION.ROW}
+      display={Display.Flex}
+      flexDirection={FlexDirection.Row}
       padding={4}
       className="network-account-balance-header"
       alignItems={AlignItems.center}
       justifyContent={JustifyContent.spaceBetween}
     >
       <Box
-        display={DISPLAY.FLEX}
-        flexDirection={FLEX_DIRECTION.ROW}
+        display={Display.Flex}
+        flexDirection={FlexDirection.Row}
         alignItems={AlignItems.center}
         gap={2}
       >
         <Box
-          display={DISPLAY.FLEX}
-          flexDirection={FLEX_DIRECTION.ROW}
+          display={Display.Flex}
+          flexDirection={FlexDirection.Row}
           alignItems={AlignItems.center}
         >
           <Identicon address={accountAddress} diameter={32} />
@@ -60,9 +60,9 @@ export default function NetworkAccountBalanceHeader({
           />
         </Box>
         <Box
-          display={DISPLAY.FLEX}
+          display={Display.Flex}
           alignItems={AlignItems.flexStart}
-          flexDirection={FLEX_DIRECTION.COLUMN}
+          flexDirection={FlexDirection.Column}
         >
           <Text
             variant={TextVariant.bodySm}
@@ -85,9 +85,9 @@ export default function NetworkAccountBalanceHeader({
         </Box>
       </Box>
       <Box
-        display={DISPLAY.FLEX}
+        display={Display.Flex}
         alignItems={AlignItems.flexEnd}
-        flexDirection={FLEX_DIRECTION.COLUMN}
+        flexDirection={FlexDirection.Column}
       >
         <Text
           variant={TextVariant.bodySm}

From 6068c6471dc9b8586b9bacfd34c98fcf29299f0d Mon Sep 17 00:00:00 2001
From: Dhruv Parmar <dhruvv173@gmail.com>
Date: Fri, 9 Jun 2023 03:20:24 +0530
Subject: [PATCH 2/2] Removing redundant properties

---
 .../advanced-gas-fee-defaults/advanced-gas-fee-defaults.js   | 1 -
 .../modals/contract-details-modal/contract-details-modal.js  | 5 +----
 .../network-account-balance-header.js                        | 4 ----
 3 files changed, 1 insertion(+), 9 deletions(-)

diff --git a/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-defaults/advanced-gas-fee-defaults.js b/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-defaults/advanced-gas-fee-defaults.js
index 56a5c4b15598..033145d8a548 100644
--- a/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-defaults/advanced-gas-fee-defaults.js
+++ b/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-defaults/advanced-gas-fee-defaults.js
@@ -90,7 +90,6 @@ const AdvancedGasFeeDefaults = () => {
           variant={TextVariant.bodySm}
           as="h6"
           color={TextColor.textAlternative}
-          margin={0}
         >
           {isDefaultSettingsSelected
             ? t('advancedGasFeeDefaultOptOut')
diff --git a/ui/components/app/modals/contract-details-modal/contract-details-modal.js b/ui/components/app/modals/contract-details-modal/contract-details-modal.js
index 2c045871052b..db14cb8bc3bd 100644
--- a/ui/components/app/modals/contract-details-modal/contract-details-modal.js
+++ b/ui/components/app/modals/contract-details-modal/contract-details-modal.js
@@ -66,7 +66,6 @@ export default function ContractDetailsModal({
           variant={TextVariant.bodyMd}
           as="h5"
           display={Display.Flex}
-          boxProps={{ marginTop: 0, marginBottom: 0 }}
         >
           {t('contractTitle')}
         </Text>
@@ -75,7 +74,7 @@ export default function ContractDetailsModal({
           as="h6"
           display={Display.Flex}
           color={TextColor.textAlternative}
-          boxProps={{ marginTop: 2, marginBottom: 0 }}
+          marginTop={2}
         >
           {t('contractDescription')}
         </Text>
@@ -126,7 +125,6 @@ export default function ContractDetailsModal({
                     as="h6"
                     display={Display.Flex}
                     color={TextColor.textAlternative}
-                    marginTop={0}
                     marginBottom={4}
                   >
                     {ellipsify(tokenAddress)}
@@ -226,7 +224,6 @@ export default function ContractDetailsModal({
                 as="h6"
                 display={Display.Flex}
                 color={TextColor.textAlternative}
-                marginTop={0}
                 marginBottom={4}
               >
                 {ellipsify(toAddress)}
diff --git a/ui/components/app/network-account-balance-header/network-account-balance-header.js b/ui/components/app/network-account-balance-header/network-account-balance-header.js
index 042ece624b48..98c91acfe81a 100644
--- a/ui/components/app/network-account-balance-header/network-account-balance-header.js
+++ b/ui/components/app/network-account-balance-header/network-account-balance-header.js
@@ -68,7 +68,6 @@ export default function NetworkAccountBalanceHeader({
             variant={TextVariant.bodySm}
             as="h6"
             color={TextColor.textAlternative}
-            marginBottom={0}
           >
             {networkName}
           </Text>
@@ -78,7 +77,6 @@ export default function NetworkAccountBalanceHeader({
             as="h6"
             color={TextColor.textDefault}
             fontWeight={FontWeight.Bold}
-            marginTop={0}
           >
             {accountName}
           </Text>
@@ -93,7 +91,6 @@ export default function NetworkAccountBalanceHeader({
           variant={TextVariant.bodySm}
           as="h6"
           color={TextColor.textAlternative}
-          marginBottom={0}
         >
           {t('balance')}
         </Text>
@@ -103,7 +100,6 @@ export default function NetworkAccountBalanceHeader({
           as="h6"
           color={TextColor.textDefault}
           fontWeight={FontWeight.Bold}
-          marginTop={0}
           align={TextAlign.End}
         >
           {accountBalance} {tokenName}