mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-10-22 11:22:43 +02:00
Part of 17670: Replace Typography with Text confirm-approve-content.component.js and home.component.js (#18049)
* Changed Typography to Text component in comfirm-apporve-content-component.js * Changed Typography to Text component in home.component.js * Changed Typography to Text component in comfirm-apporve-content-component.js * Changed Typography to Text component in home.component.js * Changed all h7 heading to h6 as h7 does not exist * Fixed prettier errors on home.component.js * Alignment fix --------- Co-authored-by: georgewrmarshall <george.marshall@consensys.net>
This commit is contained in:
Suryansh Anand
GitHub
parent
be15200168
commit
a2838b0dd1
@ -6,20 +6,19 @@ import { getTokenTrackerLink } from '@metamask/etherscan-link';
|
||||
import UrlIcon from '../../../components/ui/url-icon';
|
||||
import { addressSummary } from '../../../helpers/utils/util';
|
||||
import { formatCurrency } from '../../../helpers/utils/confirm-tx.util';
|
||||
import Typography from '../../../components/ui/typography';
|
||||
import Box from '../../../components/ui/box';
|
||||
import Button from '../../../components/ui/button';
|
||||
import SimulationErrorMessage from '../../../components/ui/simulation-error-message';
|
||||
import EditGasFeeButton from '../../../components/app/edit-gas-fee-button';
|
||||
import MultiLayerFeeMessage from '../../../components/app/multilayer-fee-message';
|
||||
import {
|
||||
TypographyVariant,
|
||||
FONT_WEIGHT,
|
||||
BLOCK_SIZES,
|
||||
JustifyContent,
|
||||
DISPLAY,
|
||||
TextColor,
|
||||
IconColor,
|
||||
TextVariant,
|
||||
AlignItems,
|
||||
} from '../../../helpers/constants/design-system';
|
||||
import { ConfirmPageContainerWarning } from '../../../components/app/confirm-page-container/confirm-page-container-content';
|
||||
import GasDetailsItem from '../../../components/app/gas-details-item';
|
||||
@ -31,6 +30,7 @@ import {
|
||||
ICON_NAMES,
|
||||
ButtonIcon,
|
||||
Icon,
|
||||
Text,
|
||||
} from '../../../components/component-library';
|
||||
|
||||
export default class ConfirmApproveContent extends Component {
|
||||
@ -330,12 +330,9 @@ export default class ConfirmApproveContent extends Component {
|
||||
className="confirm-approve-content__custom-nonce-header"
|
||||
justifyContent={JustifyContent.flexStart}
|
||||
>
|
||||
<Typography
|
||||
variant={TypographyVariant.H6}
|
||||
fontWeight={FONT_WEIGHT.NORMAL}
|
||||
>
|
||||
<Text variant={TextVariant.bodySm} as="h6">
|
||||
{t('nonce')}
|
||||
</Typography>
|
||||
</Text>
|
||||
<Button
|
||||
type="link"
|
||||
className="confirm-approve-content__custom-nonce-edit"
|
||||
@ -351,13 +348,13 @@ export default class ConfirmApproveContent extends Component {
|
||||
{t('edit')}
|
||||
</Button>
|
||||
</Box>
|
||||
<Typography
|
||||
<Text
|
||||
className="confirm-approve-content__custom-nonce-value"
|
||||
variant={TypographyVariant.H6}
|
||||
fontWeight={FONT_WEIGHT.BOLD}
|
||||
variant={TextVariant.bodySmBold}
|
||||
as="h6"
|
||||
>
|
||||
{customNonceValue || nextNonce}
|
||||
</Typography>
|
||||
</Text>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
@ -543,21 +540,21 @@ export default class ConfirmApproveContent extends Component {
|
||||
display={DISPLAY.FLEX}
|
||||
className="confirm-approve-content__icon-display-content"
|
||||
>
|
||||
<Box display={DISPLAY.FLEX}>
|
||||
<Box display={DISPLAY.FLEX} alignItems={AlignItems.center}>
|
||||
<UrlIcon
|
||||
className="confirm-approve-content__siteimage-identicon"
|
||||
fallbackClassName="confirm-approve-content__siteimage-identicon"
|
||||
name={origin}
|
||||
url={siteImage}
|
||||
/>
|
||||
<Typography
|
||||
variant={TypographyVariant.H6}
|
||||
fontWeight={FONT_WEIGHT.NORMAL}
|
||||
<Text
|
||||
variant={TextVariant.bodySm}
|
||||
as="h6"
|
||||
color={TextColor.textAlternative}
|
||||
boxProps={{ marginLeft: 1, marginTop: 2 }}
|
||||
marginLeft={1}
|
||||
>
|
||||
{origin}
|
||||
</Typography>
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
<div
|
||||
|
||||
@ -24,18 +24,18 @@ import { EthOverview } from '../../components/app/wallet-overview';
|
||||
import WhatsNewPopup from '../../components/app/whats-new-popup';
|
||||
import RecoveryPhraseReminder from '../../components/app/recovery-phrase-reminder';
|
||||
import ActionableMessage from '../../components/ui/actionable-message/actionable-message';
|
||||
import Typography from '../../components/ui/typography/typography';
|
||||
import {
|
||||
TypographyVariant,
|
||||
FONT_WEIGHT,
|
||||
DISPLAY,
|
||||
TextColor,
|
||||
TextVariant,
|
||||
} from '../../helpers/constants/design-system';
|
||||
import { SECOND } from '../../../shared/constants/time';
|
||||
import {
|
||||
ButtonIcon,
|
||||
ICON_NAMES,
|
||||
ICON_SIZES,
|
||||
Text,
|
||||
} from '../../components/component-library';
|
||||
|
||||
import {
|
||||
@ -298,20 +298,20 @@ export default class Home extends PureComponent {
|
||||
infoText={error.data.snapId}
|
||||
descriptionText={
|
||||
<>
|
||||
<Typography
|
||||
<Text
|
||||
variant={TextVariant.bodyMd}
|
||||
as="h5"
|
||||
color={TextColor.textAlternative}
|
||||
variant={TypographyVariant.H5}
|
||||
fontWeight={FONT_WEIGHT.NORMAL}
|
||||
>
|
||||
{t('somethingWentWrong')}
|
||||
</Typography>
|
||||
<Typography
|
||||
</Text>
|
||||
<Text
|
||||
color={TextColor.textAlternative}
|
||||
variant={TypographyVariant.H7}
|
||||
fontWeight={FONT_WEIGHT.NORMAL}
|
||||
variant={TextVariant.bodySm}
|
||||
as="h6"
|
||||
>
|
||||
{t('snapError', [error.message, error.code])}
|
||||
</Typography>
|
||||
</Text>
|
||||
</>
|
||||
}
|
||||
onIgnore={async () => {
|
||||
@ -334,17 +334,13 @@ export default class Home extends PureComponent {
|
||||
message={
|
||||
<Box display={DISPLAY.INLINE_FLEX}>
|
||||
<i className="fa fa-check-circle home__new-nft-notification-icon" />
|
||||
<Typography
|
||||
variant={TypographyVariant.H7}
|
||||
fontWeight={FONT_WEIGHT.NORMAL}
|
||||
>
|
||||
<Text variant={TextVariant.bodySm} as="h6">
|
||||
{t('newNftAddedMessage')}
|
||||
</Typography>
|
||||
</Text>
|
||||
<ButtonIcon
|
||||
iconName={ICON_NAMES.CLOSE}
|
||||
size={ICON_SIZES.SM}
|
||||
ariaLabel={t('close')}
|
||||
onClick={onAutoHide}
|
||||
/>
|
||||
</Box>
|
||||
}
|
||||
@ -360,12 +356,9 @@ export default class Home extends PureComponent {
|
||||
message={
|
||||
<Box display={DISPLAY.INLINE_FLEX}>
|
||||
<i className="fa fa-check-circle home__new-nft-notification-icon" />
|
||||
<Typography
|
||||
variant={TypographyVariant.H7}
|
||||
fontWeight={FONT_WEIGHT.NORMAL}
|
||||
>
|
||||
<Text variant={TextVariant.bodySm} as="h6">
|
||||
{t('removeNftMessage')}
|
||||
</Typography>
|
||||
</Text>
|
||||
<ButtonIcon
|
||||
iconName={ICON_NAMES.CLOSE}
|
||||
size={ICON_SIZES.SM}
|
||||
@ -383,12 +376,9 @@ export default class Home extends PureComponent {
|
||||
message={
|
||||
<Box display={DISPLAY.INLINE_FLEX}>
|
||||
<i className="fa fa-check-circle home__new-network-notification-icon" />
|
||||
<Typography
|
||||
variant={TypographyVariant.H7}
|
||||
fontWeight={FONT_WEIGHT.NORMAL}
|
||||
>
|
||||
<Text variant={TextVariant.bodySm} as="h6">
|
||||
{t('newNetworkAdded', [newNetworkAddedName])}
|
||||
</Typography>
|
||||
</Text>
|
||||
<ButtonIcon
|
||||
iconName={ICON_NAMES.CLOSE}
|
||||
size={ICON_SIZES.SM}
|
||||
@ -408,20 +398,20 @@ export default class Home extends PureComponent {
|
||||
<Box display={DISPLAY.INLINE_FLEX}>
|
||||
<i className="fa fa-check-circle home__new-tokens-imported-notification-icon" />
|
||||
<Box>
|
||||
<Typography
|
||||
<Text
|
||||
className="home__new-tokens-imported-notification-title"
|
||||
variant={TypographyVariant.H6}
|
||||
fontWeight={FONT_WEIGHT.BOLD}
|
||||
variant={TextVariant.bodySmBold}
|
||||
as="h6"
|
||||
>
|
||||
{t('newTokensImportedTitle')}
|
||||
</Typography>
|
||||
<Typography
|
||||
</Text>
|
||||
<Text
|
||||
className="home__new-tokens-imported-notification-message"
|
||||
variant={TypographyVariant.H7}
|
||||
fontWeight={FONT_WEIGHT.NORMAL}
|
||||
variant={TextVariant.bodySm}
|
||||
as="h6"
|
||||
>
|
||||
{t('newTokensImportedMessage', [newTokensImported])}
|
||||
</Typography>
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
<ButtonIcon
|
||||
@ -509,8 +499,9 @@ export default class Home extends PureComponent {
|
||||
{newNetworkAddedConfigurationId && (
|
||||
<Popover className="home__new-network-added">
|
||||
<i className="fa fa-check-circle fa-2x home__new-network-added__check-circle" />
|
||||
<Typography
|
||||
variant={TypographyVariant.H4}
|
||||
<Text
|
||||
variant={TextVariant.headingSm}
|
||||
as="h4"
|
||||
marginTop={5}
|
||||
marginRight={9}
|
||||
marginLeft={9}
|
||||
@ -518,7 +509,7 @@ export default class Home extends PureComponent {
|
||||
fontWeight={FONT_WEIGHT.BOLD}
|
||||
>
|
||||
{t('networkAddedSuccessfully')}
|
||||
</Typography>
|
||||
</Text>
|
||||
<Box marginTop={8} marginRight={8} marginLeft={8} marginBottom={5}>
|
||||
<Button
|
||||
type="primary"
|
||||
@ -528,22 +519,22 @@ export default class Home extends PureComponent {
|
||||
clearNewNetworkAdded();
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
variant={TypographyVariant.H6}
|
||||
fontWeight={FONT_WEIGHT.NORMAL}
|
||||
<Text
|
||||
variant={TextVariant.bodySm}
|
||||
as="h6"
|
||||
color={TextColor.primaryInverse}
|
||||
>
|
||||
{t('switchToNetwork', [newNetworkAddedName])}
|
||||
</Typography>
|
||||
</Text>
|
||||
</Button>
|
||||
<Button type="secondary" onClick={() => clearNewNetworkAdded()}>
|
||||
<Typography
|
||||
variant={TypographyVariant.H6}
|
||||
fontWeight={FONT_WEIGHT.NORMAL}
|
||||
<Text
|
||||
variant={TextVariant.bodySm}
|
||||
as="h6"
|
||||
color={TextColor.primaryDefault}
|
||||
>
|
||||
{t('dismiss')}
|
||||
</Typography>
|
||||
</Text>
|
||||
</Button>
|
||||
</Box>
|
||||
</Popover>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user