m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

Part of 17670: Replace Typography with Text approve-content-card (#17753)

Browse Source 
* 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
1 changed files with 36 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
ui/components/app/approve-content-card/approve-content-card.js
View File

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