From f5f2e2e35f5eaa672edd7905f3d8d979a9fdce85 Mon Sep 17 00:00:00 2001
From: Harsh Shukla <125105825+PrgrmrHarshShukla@users.noreply.github.com>
Date: Tue, 2 May 2023 06:18:58 +0530
Subject: [PATCH] Part of #17670 , #18714 & #18651 for 3 files. (#18752)

* Adding strong tag support for Text component

* Update build-quote.js

* Update awaiting-signatures.js

* Used <strong> tag in a better way.

* Remove <strong> tag from file: awaiting-signatures.js

Co-authored-by: Danica Shen <zhaodanica@gmail.com>

* Update awaiting-signatures.js

* Update ui/components/component-library/text/text.scss

Co-authored-by: George Marshall <georgewrmarshall@gmail.com>

* Update ui/pages/swaps/build-quote/build-quote.js

Co-authored-by: George Marshall <georgewrmarshall@gmail.com>

* Removing unintended UI and strong css from Text component

---------

Co-authored-by: legobeat <109787230+legobeat@users.noreply.github.com>
Co-authored-by: Danica Shen <zhaodanica@gmail.com>
Co-authored-by: Brad Decker <bhdecker84@gmail.com>
Co-authored-by: George Marshall <georgewrmarshall@gmail.com>
Co-authored-by: georgewrmarshall <george.marshall@consensys.net>
---
 .../approve-content-card.js                   | 10 ++--
 .../awaiting-signatures.js                    | 42 +++++++---------
 ui/pages/swaps/build-quote/build-quote.js     | 48 ++++++++-----------
 3 files changed, 44 insertions(+), 56 deletions(-)

diff --git a/ui/components/app/approve-content-card/approve-content-card.js b/ui/components/app/approve-content-card/approve-content-card.js
index 8f188b9ba..f38b3388e 100644
--- a/ui/components/app/approve-content-card/approve-content-card.js
+++ b/ui/components/app/approve-content-card/approve-content-card.js
@@ -12,9 +12,9 @@ import {
   BLOCK_SIZES,
   DISPLAY,
   FLEX_DIRECTION,
-  FONT_WEIGHT,
+  FontWeight,
   JustifyContent,
-  TEXT_ALIGN,
+  TextAlign,
   TextColor,
   TextVariant,
 } from '../../../helpers/constants/design-system';
@@ -177,13 +177,13 @@ export default function ApproveContentCard({
                     display={DISPLAY.FLEX}
                     flexDirection={FLEX_DIRECTION.COLUMN}
                     alignItems={AlignItems.flexEnd}
-                    textAlign={TEXT_ALIGN.RIGHT}
+                    textAlign={TextAlign.Right}
                   >
                     {useCurrencyRateCheck && (
                       <Box>
                         <Text
                           variant={TextVariant.headingSm}
-                          fontWeight={FONT_WEIGHT.BOLD}
+                          fontWeight={FontWeight.Bold}
                           color={TextColor.TEXT_DEFAULT}
                           as="h4"
                         >
@@ -197,7 +197,7 @@ export default function ApproveContentCard({
                     <Box>
                       <Text
                         variant={TextVariant.bodySm}
-                        fontWeight={FONT_WEIGHT.NORMAL}
+                        fontWeight={FontWeight.Normal}
                         color={TextColor.textMuted}
                         as="h6"
                       >
diff --git a/ui/pages/swaps/awaiting-signatures/awaiting-signatures.js b/ui/pages/swaps/awaiting-signatures/awaiting-signatures.js
index 4ba914891..7bf1ace5d 100644
--- a/ui/pages/swaps/awaiting-signatures/awaiting-signatures.js
+++ b/ui/pages/swaps/awaiting-signatures/awaiting-signatures.js
@@ -21,12 +21,10 @@ import {
   BUILD_QUOTE_ROUTE,
 } from '../../../helpers/constants/routes';
 import PulseLoader from '../../../components/ui/pulse-loader';
-import Typography from '../../../components/ui/typography';
 import Box from '../../../components/ui/box';
 import {
   BLOCK_SIZES,
-  TypographyVariant,
-  FONT_WEIGHT,
+  TextVariant,
   JustifyContent,
   DISPLAY,
   TextColor,
@@ -34,6 +32,7 @@ import {
 import SwapsFooter from '../swaps-footer';
 import { MetaMetricsContext } from '../../../contexts/metametrics';
 import { MetaMetricsEventCategory } from '../../../../shared/constants/metametrics';
+import { Text } from '../../../components/component-library';
 import SwapStepIcon from './swap-step-icon';
 
 export default function AwaitingSignatures() {
@@ -94,57 +93,52 @@ export default function AwaitingSignatures() {
         <Box marginTop={3} marginBottom={4}>
           <PulseLoader />
         </Box>
-        <Typography
+        <Text
           color={TextColor.textDefault}
-          variant={TypographyVariant.H3}
+          variant={TextVariant.headingMd}
+          as="h3"
         >
           {headerText}
-        </Typography>
+        </Text>
         {needsTwoConfirmations && (
           <>
-            <Typography
-              variant={TypographyVariant.paragraph}
-              boxProps={{ marginTop: 2 }}
-              fontWeight={FONT_WEIGHT.BOLD}
-            >
+            <Text variant={TextVariant.bodyMdBold} boxProps={{ marginTop: 2 }}>
               {t('swapToConfirmWithHwWallet')}
-            </Typography>
+            </Text>
             <ul className="awaiting-signatures__steps">
               <li>
                 <SwapStepIcon stepNumber={1} />
                 {t('swapAllowSwappingOf', [
-                  <Typography
+                  <Text
                     as="span"
-                    fontWeight={FONT_WEIGHT.BOLD}
+                    variant={TextVariant.bodyMdBold}
                     key="allowToken"
                   >
                     {destinationTokenInfo?.symbol}
-                  </Typography>,
+                  </Text>,
                 ])}
               </li>
               <li>
                 <SwapStepIcon stepNumber={2} />
                 {t('swapFromTo', [
-                  <Typography
+                  <Text
                     as="span"
-                    fontWeight={FONT_WEIGHT.BOLD}
+                    variant={TextVariant.bodyMdBold}
                     key="tokenFrom"
                   >
                     {sourceTokenInfo?.symbol}
-                  </Typography>,
-                  <Typography
+                  </Text>,
+                  <Text
                     as="span"
-                    fontWeight={FONT_WEIGHT.BOLD}
+                    variation={TextVariant.bodyMdBold}
                     key="tokenTo"
                   >
                     {destinationTokenInfo?.symbol}
-                  </Typography>,
+                  </Text>,
                 ])}
               </li>
             </ul>
-            <Typography variant={TypographyVariant.paragraph}>
-              {t('swapGasFeesSplit')}
-            </Typography>
+            <Text variant={TextVariant.bodyMd}>{t('swapGasFeesSplit')}</Text>
           </>
         )}
       </Box>
diff --git a/ui/pages/swaps/build-quote/build-quote.js b/ui/pages/swaps/build-quote/build-quote.js
index 6e0bc81b5..084969fa3 100644
--- a/ui/pages/swaps/build-quote/build-quote.js
+++ b/ui/pages/swaps/build-quote/build-quote.js
@@ -22,12 +22,11 @@ import Popover from '../../../components/ui/popover';
 import Button from '../../../components/ui/button';
 import ActionableMessage from '../../../components/ui/actionable-message/actionable-message';
 import Box from '../../../components/ui/box';
-import Typography from '../../../components/ui/typography';
 import {
-  TypographyVariant,
+  TextVariant,
   DISPLAY,
   FLEX_DIRECTION,
-  FONT_WEIGHT,
+  FontWeight,
   TextColor,
 } from '../../../helpers/constants/design-system';
 import {
@@ -112,6 +111,7 @@ import {
   getValueFromWeiHex,
   hexToDecimal,
 } from '../../../../shared/modules/conversion.utils';
+import { Text } from '../../../components/component-library';
 
 const fuseSearchKeys = [
   { name: 'name', weight: 0.499 },
@@ -593,7 +593,7 @@ export default function BuildQuote({
                   {t('enableSmartTransactions')}
                 </Button>
                 <Box marginTop={1}>
-                  <Typography variant={TypographyVariant.H6}>
+                  <Text variant={TextVariant.bodySm} as="h6">
                     <Button
                       type="link"
                       onClick={onCloseSmartTransactionsOptInPopover}
@@ -601,7 +601,7 @@ export default function BuildQuote({
                     >
                       {t('noThanksVariant2')}
                     </Button>
-                  </Typography>
+                  </Text>
                 </Box>
               </>
             }
@@ -627,13 +627,13 @@ export default function BuildQuote({
                   alt={t('swapSwapSwitch')}
                 />
               </Box>
-              <Typography variant={TypographyVariant.H7} marginTop={0}>
+              <Text variant={TextVariant.bodySm} as="h6" marginTop={0}>
                 {t('stxDescription')}
-              </Typography>
-              <Typography
+              </Text>
+              <Text
                 as="ul"
-                variant={TypographyVariant.H7}
-                fontWeight={FONT_WEIGHT.BOLD}
+                variant={TextVariant.bodySm}
+                fontWeight={FontWeight.Bold}
                 marginTop={3}
               >
                 <li>{t('stxBenefit1')}</li>
@@ -641,30 +641,24 @@ export default function BuildQuote({
                 <li>{t('stxBenefit3')}</li>
                 <li>
                   {t('stxBenefit4')}
-                  <Typography
+                  <Text
                     as="span"
-                    fontWeight={FONT_WEIGHT.NORMAL}
-                    variant={TypographyVariant.H7}
+                    fontWeight={FontWeight.Normal}
+                    variant={TextVariant.bodySm}
                   >
                     {' *'}
-                  </Typography>
+                  </Text>
                 </li>
-              </Typography>
-              <Typography
-                variant={TypographyVariant.H8}
+              </Text>
+              <Text
+                variant={TextVariant.bodyXs}
+                as="h6"
                 color={TextColor.textAlternative}
-                boxProps={{ marginTop: 3 }}
+                marginTop={3}
               >
                 {t('stxSubDescription')}&nbsp;
-                <Typography
-                  as="span"
-                  fontWeight={FONT_WEIGHT.BOLD}
-                  variant={TypographyVariant.H8}
-                  color={TextColor.textAlternative}
-                >
-                  {t('stxYouCanOptOut')}&nbsp;
-                </Typography>
-              </Typography>
+                <strong>{t('stxYouCanOptOut')}&nbsp;</strong>
+              </Text>
             </Box>
           </Popover>
         )}