Part of #17670: Replace Typography with Text component

ui/components/app/asset-list/asset-list.js

@@ -19,8 +19,10 @@ import { useCurrencyDisplay } from '../../../hooks/useCurrencyDisplay';
 import Box from '../../ui/box/box';
 import {
   Color,
+
   TextVariant,
   TEXT_ALIGN,
+
 } from '../../../helpers/constants/design-system';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import { MetaMetricsContext } from '../../../contexts/metametrics';
@@ -33,6 +35,7 @@ import {
 } from '../../multichain';
 import { Text } from '../../component-library';
 import DetectedTokensLink from './detetcted-tokens-link/detected-tokens-link';
+import { Text } from 'ui/components/component-library';
 
 const AssetList = ({ onClickAsset }) => {
   const t = useI18nContext();
@@ -135,6 +138,7 @@ const AssetList = ({ onClickAsset }) => {
           </>
         )}
       <Box marginTop={detectedTokens.length > 0 ? 0 : 4}>
+
         {process.env.MULTICHAIN ? (
           <MultichainImportTokenLink margin={4} />
         ) : (
@@ -151,6 +155,7 @@ const AssetList = ({ onClickAsset }) => {
             <ImportTokenLink />
           </>
         )}
+
       </Box>
       {showDetectedTokens && (
         <DetectedToken setShowDetectedTokens={setShowDetectedTokens} />

ui/components/app/beta-header/index.js

@@ -2,20 +2,22 @@ import React from 'react';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 
 import Box from '../../ui/box/box';
-import Typography from '../../ui/typography/typography';
 import {
-  TypographyVariant,
   Color,
   BLOCK_SIZES,
   DISPLAY,
+
   AlignItems,
   IconColor,
+
 } from '../../../helpers/constants/design-system';
 import { BETA_BUGS_URL } from '../../../helpers/constants/beta';
 
 import { hideBetaHeader } from '../../../store/actions';
+
 import { ButtonIcon, ICON_NAMES, ICON_SIZES } from '../../component-library';
 
+
 const BetaHeader = () => {
   const t = useI18nContext();
 
@@ -28,8 +30,8 @@ const BetaHeader = () => {
       className="beta-header"
       alignItems={AlignItems.center}
     >
-      <Typography
-        variant={TypographyVariant.H7}
+      <Text
+        variant={TextVariant.bodySm}
         marginTop={0}
         marginBottom={0}
         className="beta-header__message"
@@ -45,6 +47,7 @@ const BetaHeader = () => {
             {t('here')}
           </a>,
         ])}
+
       </Typography>
       <ButtonIcon
         iconName={ICON_NAMES.CLOSE}

ui/components/app/cancel-speedup-popover/cancel-speedup-popover.js

@@ -6,7 +6,7 @@ import {
   AlignItems,
   DISPLAY,
   FLEX_DIRECTION,
-  TypographyVariant,
+  TextVariant,
 } from '../../../helpers/constants/design-system';
 import { getAppIsLoading } from '../../../selectors';
 import { gasEstimateGreaterThanGasUsedPlusTenPercent } from '../../../helpers/utils/gas';
@@ -19,8 +19,8 @@ import Box from '../../ui/box';
 import Button from '../../ui/button';
 import InfoTooltip from '../../ui/info-tooltip';
 import Popover from '../../ui/popover';
-import Typography from '../../ui/typography';
 import AppLoadingSpinner from '../app-loading-spinner';
+import { Text } from 'ui/components/component-library';
 
 const CancelSpeedupPopover = () => {
   const {
@@ -97,9 +97,9 @@ const CancelSpeedupPopover = () => {
     >
       <AppLoadingSpinner className="cancel-speedup-popover__spinner" />
       <div className="cancel-speedup-popover__wrapper">
-        <Typography
+        <Text
           boxProps={{ alignItems: AlignItems.center, display: DISPLAY.FLEX }}
-          variant={TypographyVariant.H6}
+          variant={TextVariant.bodySm}
           marginTop={0}
           marginBottom={2}
         >
@@ -127,7 +127,7 @@ const CancelSpeedupPopover = () => {
               </Box>
             }
           />
-        </Typography>
+        </Text>
         <div className="cancel-speedup-popover__separator" />
         <Box
           display={DISPLAY.FLEX}

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

@@ -7,12 +7,14 @@ import ActionableMessage from '../../../ui/actionable-message/actionable-message
 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 { TypographyVariant } from '../../../../helpers/constants/design-system';
 
 import SecurityProviderBannerMessage from '../../security-provider-banner-message/security-provider-banner-message';
 import { SECURITY_PROVIDER_MESSAGE_SEVERITIES } from '../../security-provider-banner-message/security-provider-banner-message.constants';
 import { ConfirmPageContainerSummary, ConfirmPageContainerWarning } from '.';
+import { Text } from 'ui/components/component-library';
 
 export default class ConfirmPageContainerContent extends Component {
   static contextTypes = {
@@ -214,7 +216,7 @@ export default class ConfirmPageContainerContent extends Component {
               className="actionable-message--warning"
               message={
                 isBuyableChain ? (
-                  <Typography variant={TypographyVariant.H7} align="left">
+                  <Text variant={TextVariant.bodySm} align="left">
                     {t('insufficientCurrencyBuyOrDeposit', [
                       nativeCurrency,
                       networkName,
@@ -232,14 +234,14 @@ export default class ConfirmPageContainerContent extends Component {
                         {t('buyAsset', [nativeCurrency])}
                       </Button>,
                     ])}
-                  </Typography>
+                  </Text>
                 ) : (
-                  <Typography variant={TypographyVariant.H7} align="left">
+                  <Text variant={TextVariant.bodySm} align="left">
                     {t('insufficientCurrencyDeposit', [
                       nativeCurrency,
                       networkName,
                     ])}
-                  </Typography>
+                  </Text>
                 )
               }
               useIcon

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

@@ -50,6 +50,7 @@ import {
   ConfirmPageContainerContent,
   ConfirmPageContainerNavigation,
 } from '.';
+import { Text } from 'ui/components/component-library';
 
 const ConfirmPageContainer = (props) => {
   const {
@@ -236,6 +237,7 @@ const ConfirmPageContainer = (props) => {
             <ActionableMessage
               message={
                 isBuyableChain ? (
+
                   <Text
                     variant={TextVariant.bodySm}
                     textAlign={TEXT_ALIGN.LEFT}