From 30bc9a923e93824ceff5fb1aaf7ed0a0766ef66e Mon Sep 17 00:00:00 2001
From: George Marshall <george.marshall@consensys.net>
Date: Thu, 16 Feb 2023 18:33:35 -0800
Subject: [PATCH] Part of 17670: Replace Typography with Text
 approve-content-card (#17753)

* Updating Typography to Text approve-content-card

* Adding h6 tags

* Update ui/components/app/approve-content-card/approve-content-card.js

Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net>

---------

Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net>
---
 .../approve-content-card.js                   | 67 ++++++++++---------
 1 file changed, 36 insertions(+), 31 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 1b613f37c..532793e01 100644
--- a/ui/components/app/approve-content-card/approve-content-card.js
+++ b/ui/components/app/approve-content-card/approve-content-card.js
@@ -4,7 +4,7 @@ import classnames from 'classnames';
 import Box from '../../ui/box/box';
 import Button from '../../ui/button';
 import EditGasFeeButton from '../edit-gas-fee-button/edit-gas-fee-button';
-import Typography from '../../ui/typography/typography';
+import { Text } from '../../component-library';
 import {
   AlignItems,
   BLOCK_SIZES,
@@ -14,7 +14,7 @@ import {
   JustifyContent,
   TEXT_ALIGN,
   TextColor,
-  TypographyVariant,
+  TextVariant,
 } from '../../../helpers/constants/design-system';
 import { I18nContext } from '../../../contexts/i18n';
 import GasDetailsItem from '../gas-details-item/gas-details-item';
@@ -73,24 +73,22 @@ export default function ApproveContentCard({
                 marginLeft={4}
                 className="approve-content-card-container__card-header__title"
               >
-                <Typography
-                  variant={TypographyVariant.H6}
-                  fontWeight={FONT_WEIGHT.BOLD}
-                >
+                <Text variant={TextVariant.bodySmBold} as="h6">
                   {title}
-                </Typography>
+                </Text>
               </Box>
             </>
           )}
           {showEdit && (!showAdvanceGasFeeOptions || !supportsEIP1559) && (
             <Box width={BLOCK_SIZES.ONE_SIXTH}>
               <Button type="link" onClick={() => onEditClick()}>
-                <Typography
-                  variant={TypographyVariant.H7}
+                <Text
+                  variant={TextVariant.bodySm}
                   color={TextColor.primaryDefault}
+                  as="h6"
                 >
                   {t('edit')}
-                </Typography>
+                </Text>
               </Button>
             </Box>
           )}
@@ -132,14 +130,15 @@ export default function ApproveContentCard({
                     display={DISPLAY.FLEX}
                     justifyContent={JustifyContent.spaceBetween}
                   >
-                    <Typography
-                      variant={TypographyVariant.H6}
+                    <Text
+                      variant={TextVariant.bodySm}
                       fontWeight={FONT_WEIGHT.NORMAL}
                       color={TextColor.textMuted}
+                      as="h6"
                     >
                       <span>{t('transactionDetailLayer2GasHeading')}</span>
                       {`${ethTransactionTotal} ${nativeCurrency}`}
-                    </Typography>
+                    </Text>
                   </Box>
                   <MultiLayerFeeMessage
                     transaction={fullTxData}
@@ -151,12 +150,13 @@ export default function ApproveContentCard({
               ) : (
                 <>
                   <Box>
-                    <Typography
-                      variant={TypographyVariant.H7}
+                    <Text
+                      variant={TextVariant.bodySm}
                       color={TextColor.textAlternative}
+                      as="h6"
                     >
                       {t('feeAssociatedRequest')}
-                    </Typography>
+                    </Text>
                   </Box>
                   <Box
                     display={DISPLAY.FLEX}
@@ -166,26 +166,28 @@ export default function ApproveContentCard({
                   >
                     {useCurrencyRateCheck && (
                       <Box>
-                        <Typography
-                          variant={TypographyVariant.H4}
+                        <Text
+                          variant={TextVariant.headingSm}
                           fontWeight={FONT_WEIGHT.BOLD}
                           color={TextColor.TEXT_DEFAULT}
+                          as="h4"
                         >
                           {formatCurrency(
                             fiatTransactionTotal,
                             currentCurrency,
                           )}
-                        </Typography>
+                        </Text>
                       </Box>
                     )}
                     <Box>
-                      <Typography
-                        variant={TypographyVariant.H6}
+                      <Text
+                        variant={TextVariant.bodySm}
                         fontWeight={FONT_WEIGHT.NORMAL}
                         color={TextColor.textMuted}
+                        as="h6"
                       >
                         {`${ethTransactionTotal} ${nativeCurrency}`}
-                      </Typography>
+                      </Text>
                     </Box>
                   </Box>
                 </>
@@ -195,35 +197,38 @@ export default function ApproveContentCard({
         {renderDataContent && (
           <Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.COLUMN}>
             <Box>
-              <Typography
-                variant={TypographyVariant.H7}
+              <Text
+                variant={TextVariant.bodySm}
                 color={TextColor.textAlternative}
+                as="h6"
               >
                 {isSetApproveForAll
                   ? t('functionSetApprovalForAll')
                   : t('functionApprove')}
-              </Typography>
+              </Text>
             </Box>
             {isSetApproveForAll && isApprovalOrRejection !== undefined ? (
               <Box>
-                <Typography
-                  variant={TypographyVariant.H7}
+                <Text
+                  variant={TextVariant.bodySm}
                   color={TextColor.textAlternative}
+                  as="h6"
                 >
                   {`${t('parameters')}: ${isApprovalOrRejection}`}
-                </Typography>
+                </Text>
               </Box>
             ) : null}
             <Box
               marginRight={4}
               className="approve-content-card-container__data__data-block"
             >
-              <Typography
-                variant={TypographyVariant.H7}
+              <Text
+                variant={TextVariant.bodySm}
                 color={TextColor.textAlternative}
+                as="h6"
               >
                 {data}
-              </Typography>
+              </Text>
             </Box>
           </Box>
         )}