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:
parent
1a330dd8c6
commit
30bc9a923e
@ -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>
|
||||
)}
|
||||
|
Loading…
Reference in New Issue
Block a user