1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-22 17:33:23 +01:00

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>
This commit is contained in:
George Marshall 2023-02-16 18:33:35 -08:00 committed by GitHub
parent 1a330dd8c6
commit 30bc9a923e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -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>
)}