From 32a7f0fe0990ac5f3489495d51cc5281b360673b Mon Sep 17 00:00:00 2001
From: Harsh Shukla <125105825+PrgrmrHarshShukla@users.noreply.github.com>
Date: Tue, 2 May 2023 06:09:56 +0530
Subject: [PATCH] Update pin-extension.js (#18877)

---
 .../pin-extension/pin-extension.js            | 31 ++++++++++---------
 1 file changed, 16 insertions(+), 15 deletions(-)

diff --git a/ui/pages/onboarding-flow/pin-extension/pin-extension.js b/ui/pages/onboarding-flow/pin-extension/pin-extension.js
index cc058967e..0c14d704e 100644
--- a/ui/pages/onboarding-flow/pin-extension/pin-extension.js
+++ b/ui/pages/onboarding-flow/pin-extension/pin-extension.js
@@ -2,13 +2,12 @@ import React, { useState, useContext } from 'react';
 import { useHistory } from 'react-router-dom';
 import { useDispatch, useSelector } from 'react-redux';
 import { Carousel } from 'react-responsive-carousel';
-import Typography from '../../../components/ui/typography/typography';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import Button from '../../../components/ui/button';
 import {
-  TypographyVariant,
-  FONT_WEIGHT,
-  TEXT_ALIGN,
+  TextVariant,
+  FontWeight,
+  TextAlign,
 } from '../../../helpers/constants/design-system';
 import { DEFAULT_ROUTE } from '../../../helpers/constants/routes';
 import { setCompletedOnboarding } from '../../../store/actions';
@@ -19,6 +18,7 @@ import {
 import { MetaMetricsContext } from '../../../contexts/metametrics';
 import { FIRST_TIME_FLOW_TYPES } from '../../../helpers/constants/onboarding';
 import { getFirstTimeFlowType } from '../../../selectors';
+import { Text } from '../../../components/component-library';
 import OnboardingPinBillboard from './pin-billboard';
 
 export default function OnboardingPinExtension() {
@@ -54,13 +54,14 @@ export default function OnboardingPinExtension() {
       className="onboarding-pin-extension"
       data-testid="onboarding-pin-extension"
     >
-      <Typography
-        variant={TypographyVariant.H2}
-        align={TEXT_ALIGN.CENTER}
-        fontWeight={FONT_WEIGHT.BOLD}
+      <Text
+        variant={TextVariant.headingLg}
+        as="h2"
+        align={TextAlign.Center}
+        fontWeight={FontWeight.Bold}
       >
         {t('onboardingPinExtensionTitle')}
-      </Typography>
+      </Text>
       <Carousel
         selectedItem={selectedIndex}
         showThumbs={false}
@@ -69,20 +70,20 @@ export default function OnboardingPinExtension() {
         onChange={(index) => setSelectedIndex(index)}
       >
         <div>
-          <Typography align={TEXT_ALIGN.CENTER}>
+          <Text align={TextAlign.Center}>
             {t('onboardingPinExtensionDescription')}
-          </Typography>
+          </Text>
           <div className="onboarding-pin-extension__diagram">
             <OnboardingPinBillboard />
           </div>
         </div>
         <div>
-          <Typography align={TEXT_ALIGN.CENTER}>
+          <Text align={TextAlign.Center}>
             {t('onboardingPinExtensionDescription2')}
-          </Typography>
-          <Typography align={TEXT_ALIGN.CENTER}>
+          </Text>
+          <Text align={TextAlign.Center}>
             {t('onboardingPinExtensionDescription3')}
-          </Typography>
+          </Text>
           <img
             src="/images/onboarding-pin-browser.svg"
             width="799"