m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-10-22 19:26:13 +02:00
Code

Part of 17670: Replace Typography with Text confirm-approve-content.component.js and home.component.js (#18049)

Browse Source 
* 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 2023-03-14 00:57:24 +05:30 committed by GitHub
parent be15200168
commit a2838b0dd1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 51 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
ui/pages/confirm-approve/confirm-approve-content/confirm-approve-content.component.js
View File

@ -6,20 +6,19 @@ import { getTokenTrackerLink } from '@metamask/etherscan-link';
import UrlIcon from '../../../components/ui/url-icon'; import UrlIcon from '../../../components/ui/url-icon';
import { addressSummary } from '../../../helpers/utils/util'; import { addressSummary } from '../../../helpers/utils/util';
import { formatCurrency } from '../../../helpers/utils/confirm-tx.util'; import { formatCurrency } from '../../../helpers/utils/confirm-tx.util';
import Typography from '../../../components/ui/typography';
import Box from '../../../components/ui/box'; import Box from '../../../components/ui/box';
import Button from '../../../components/ui/button'; import Button from '../../../components/ui/button';
import SimulationErrorMessage from '../../../components/ui/simulation-error-message'; import SimulationErrorMessage from '../../../components/ui/simulation-error-message';
import EditGasFeeButton from '../../../components/app/edit-gas-fee-button'; import EditGasFeeButton from '../../../components/app/edit-gas-fee-button';
import MultiLayerFeeMessage from '../../../components/app/multilayer-fee-message'; import MultiLayerFeeMessage from '../../../components/app/multilayer-fee-message';
import { import {
TypographyVariant,
FONT_WEIGHT,
BLOCK_SIZES, BLOCK_SIZES,
JustifyContent, JustifyContent,
DISPLAY, DISPLAY,
TextColor, TextColor,
IconColor, IconColor,
TextVariant,
AlignItems,
} from '../../../helpers/constants/design-system'; } from '../../../helpers/constants/design-system';
import { ConfirmPageContainerWarning } from '../../../components/app/confirm-page-container/confirm-page-container-content'; import { ConfirmPageContainerWarning } from '../../../components/app/confirm-page-container/confirm-page-container-content';
import GasDetailsItem from '../../../components/app/gas-details-item'; import GasDetailsItem from '../../../components/app/gas-details-item';
@ -31,6 +30,7 @@ import {
ICON_NAMES, ICON_NAMES,
ButtonIcon, ButtonIcon,
Icon, Icon,
Text,
} from '../../../components/component-library'; } from '../../../components/component-library';
export default class ConfirmApproveContent extends Component { export default class ConfirmApproveContent extends Component {
@ -330,12 +330,9 @@ export default class ConfirmApproveContent extends Component {
className="confirm-approve-content__custom-nonce-header" className="confirm-approve-content__custom-nonce-header"
justifyContent={JustifyContent.flexStart} justifyContent={JustifyContent.flexStart}
> >
<Typography <Text variant={TextVariant.bodySm} as="h6">
variant={TypographyVariant.H6}
fontWeight={FONT_WEIGHT.NORMAL}
>
{t('nonce')} {t('nonce')}
</Typography> </Text>
<Button <Button
type="link" type="link"
className="confirm-approve-content__custom-nonce-edit" className="confirm-approve-content__custom-nonce-edit"
@ -351,13 +348,13 @@ export default class ConfirmApproveContent extends Component {
{t('edit')} {t('edit')}
</Button> </Button>
</Box> </Box>
<Typography <Text
className="confirm-approve-content__custom-nonce-value" className="confirm-approve-content__custom-nonce-value"
variant={TypographyVariant.H6} variant={TextVariant.bodySmBold}
fontWeight={FONT_WEIGHT.BOLD} as="h6"
> >
{customNonceValue || nextNonce} {customNonceValue || nextNonce}
</Typography> </Text>
</div> </div>
)} )}
</> </>
@ -543,21 +540,21 @@ export default class ConfirmApproveContent extends Component {
display={DISPLAY.FLEX} display={DISPLAY.FLEX}
className="confirm-approve-content__icon-display-content" className="confirm-approve-content__icon-display-content"
> >
<Box display={DISPLAY.FLEX}> <Box display={DISPLAY.FLEX} alignItems={AlignItems.center}>
<UrlIcon <UrlIcon
className="confirm-approve-content__siteimage-identicon" className="confirm-approve-content__siteimage-identicon"
fallbackClassName="confirm-approve-content__siteimage-identicon" fallbackClassName="confirm-approve-content__siteimage-identicon"
name={origin} name={origin}
url={siteImage} url={siteImage}
/> />
<Typography <Text
variant={TypographyVariant.H6} variant={TextVariant.bodySm}
fontWeight={FONT_WEIGHT.NORMAL} as="h6"
color={TextColor.textAlternative} color={TextColor.textAlternative}
boxProps={{ marginLeft: 1, marginTop: 2 }} marginLeft={1}
> >
{origin} {origin}
</Typography> </Text>
</Box> </Box>
</Box> </Box>
<div <div

81
ui/pages/home/home.component.js
View File

@ -24,18 +24,18 @@ import { EthOverview } from '../../components/app/wallet-overview';
import WhatsNewPopup from '../../components/app/whats-new-popup'; import WhatsNewPopup from '../../components/app/whats-new-popup';
import RecoveryPhraseReminder from '../../components/app/recovery-phrase-reminder'; import RecoveryPhraseReminder from '../../components/app/recovery-phrase-reminder';
import ActionableMessage from '../../components/ui/actionable-message/actionable-message'; import ActionableMessage from '../../components/ui/actionable-message/actionable-message';
import Typography from '../../components/ui/typography/typography';
import { import {
TypographyVariant,
FONT_WEIGHT, FONT_WEIGHT,
DISPLAY, DISPLAY,
TextColor, TextColor,
TextVariant,
} from '../../helpers/constants/design-system'; } from '../../helpers/constants/design-system';
import { SECOND } from '../../../shared/constants/time'; import { SECOND } from '../../../shared/constants/time';
import { import {
ButtonIcon, ButtonIcon,
ICON_NAMES, ICON_NAMES,
ICON_SIZES, ICON_SIZES,
Text,
} from '../../components/component-library'; } from '../../components/component-library';
import { import {
@ -298,20 +298,20 @@ export default class Home extends PureComponent {
infoText={error.data.snapId} infoText={error.data.snapId}
descriptionText={ descriptionText={
<> <>
<Typography <Text
variant={TextVariant.bodyMd}
as="h5"
color={TextColor.textAlternative} color={TextColor.textAlternative}
variant={TypographyVariant.H5}
fontWeight={FONT_WEIGHT.NORMAL}
> >
{t('somethingWentWrong')} {t('somethingWentWrong')}
</Typography> </Text>
<Typography <Text
color={TextColor.textAlternative} color={TextColor.textAlternative}
variant={TypographyVariant.H7} variant={TextVariant.bodySm}
fontWeight={FONT_WEIGHT.NORMAL} as="h6"
> >
{t('snapError', [error.message, error.code])} {t('snapError', [error.message, error.code])}
</Typography> </Text>
</> </>
} }
onIgnore={async () => { onIgnore={async () => {
@ -334,17 +334,13 @@ export default class Home extends PureComponent {
message={ message={
<Box display={DISPLAY.INLINE_FLEX}> <Box display={DISPLAY.INLINE_FLEX}>
<i className="fa fa-check-circle home__new-nft-notification-icon" /> <i className="fa fa-check-circle home__new-nft-notification-icon" />
<Typography <Text variant={TextVariant.bodySm} as="h6">
variant={TypographyVariant.H7}
fontWeight={FONT_WEIGHT.NORMAL}
>
{t('newNftAddedMessage')} {t('newNftAddedMessage')}
</Typography> </Text>
<ButtonIcon <ButtonIcon
iconName={ICON_NAMES.CLOSE} iconName={ICON_NAMES.CLOSE}
size={ICON_SIZES.SM} size={ICON_SIZES.SM}
ariaLabel={t('close')} ariaLabel={t('close')}
onClick={onAutoHide}
/> />
</Box> </Box>
} }
@ -360,12 +356,9 @@ export default class Home extends PureComponent {
message={ message={
<Box display={DISPLAY.INLINE_FLEX}> <Box display={DISPLAY.INLINE_FLEX}>
<i className="fa fa-check-circle home__new-nft-notification-icon" /> <i className="fa fa-check-circle home__new-nft-notification-icon" />
<Typography <Text variant={TextVariant.bodySm} as="h6">
variant={TypographyVariant.H7}
fontWeight={FONT_WEIGHT.NORMAL}
>
{t('removeNftMessage')} {t('removeNftMessage')}
</Typography> </Text>
<ButtonIcon <ButtonIcon
iconName={ICON_NAMES.CLOSE} iconName={ICON_NAMES.CLOSE}
size={ICON_SIZES.SM} size={ICON_SIZES.SM}
@ -383,12 +376,9 @@ export default class Home extends PureComponent {
message={ message={
<Box display={DISPLAY.INLINE_FLEX}> <Box display={DISPLAY.INLINE_FLEX}>
<i className="fa fa-check-circle home__new-network-notification-icon" /> <i className="fa fa-check-circle home__new-network-notification-icon" />
<Typography <Text variant={TextVariant.bodySm} as="h6">
variant={TypographyVariant.H7}
fontWeight={FONT_WEIGHT.NORMAL}
>
{t('newNetworkAdded', [newNetworkAddedName])} {t('newNetworkAdded', [newNetworkAddedName])}
</Typography> </Text>
<ButtonIcon <ButtonIcon
iconName={ICON_NAMES.CLOSE} iconName={ICON_NAMES.CLOSE}
size={ICON_SIZES.SM} size={ICON_SIZES.SM}
@ -408,20 +398,20 @@ export default class Home extends PureComponent {
<Box display={DISPLAY.INLINE_FLEX}> <Box display={DISPLAY.INLINE_FLEX}>
<i className="fa fa-check-circle home__new-tokens-imported-notification-icon" /> <i className="fa fa-check-circle home__new-tokens-imported-notification-icon" />
<Box> <Box>
<Typography <Text
className="home__new-tokens-imported-notification-title" className="home__new-tokens-imported-notification-title"
variant={TypographyVariant.H6} variant={TextVariant.bodySmBold}
fontWeight={FONT_WEIGHT.BOLD} as="h6"
> >
{t('newTokensImportedTitle')} {t('newTokensImportedTitle')}
</Typography> </Text>
<Typography <Text
className="home__new-tokens-imported-notification-message" className="home__new-tokens-imported-notification-message"
variant={TypographyVariant.H7} variant={TextVariant.bodySm}
fontWeight={FONT_WEIGHT.NORMAL} as="h6"
> >
{t('newTokensImportedMessage', [newTokensImported])} {t('newTokensImportedMessage', [newTokensImported])}
</Typography> </Text>
</Box> </Box>
<ButtonIcon <ButtonIcon
@ -509,8 +499,9 @@ export default class Home extends PureComponent {
{newNetworkAddedConfigurationId && ( {newNetworkAddedConfigurationId && (
<Popover className="home__new-network-added"> <Popover className="home__new-network-added">
<i className="fa fa-check-circle fa-2x home__new-network-added__check-circle" /> <i className="fa fa-check-circle fa-2x home__new-network-added__check-circle" />
<Typography <Text
variant={TypographyVariant.H4} variant={TextVariant.headingSm}
as="h4"
marginTop={5} marginTop={5}
marginRight={9} marginRight={9}
marginLeft={9} marginLeft={9}
@ -518,7 +509,7 @@ export default class Home extends PureComponent {
fontWeight={FONT_WEIGHT.BOLD} fontWeight={FONT_WEIGHT.BOLD}
> >
{t('networkAddedSuccessfully')} {t('networkAddedSuccessfully')}
</Typography> </Text>
<Box marginTop={8} marginRight={8} marginLeft={8} marginBottom={5}> <Box marginTop={8} marginRight={8} marginLeft={8} marginBottom={5}>
<Button <Button
type="primary" type="primary"
@ -528,22 +519,22 @@ export default class Home extends PureComponent {
clearNewNetworkAdded(); clearNewNetworkAdded();
}} }}
> >
<Typography <Text
variant={TypographyVariant.H6} variant={TextVariant.bodySm}
fontWeight={FONT_WEIGHT.NORMAL} as="h6"
color={TextColor.primaryInverse} color={TextColor.primaryInverse}
> >
{t('switchToNetwork', [newNetworkAddedName])} {t('switchToNetwork', [newNetworkAddedName])}
</Typography> </Text>
</Button> </Button>
<Button type="secondary" onClick={() => clearNewNetworkAdded()}> <Button type="secondary" onClick={() => clearNewNetworkAdded()}>
<Typography <Text
variant={TypographyVariant.H6} variant={TextVariant.bodySm}
fontWeight={FONT_WEIGHT.NORMAL} as="h6"
color={TextColor.primaryDefault} color={TextColor.primaryDefault}
> >
{t('dismiss')} {t('dismiss')}
</Typography> </Text>
</Button> </Button>
</Box> </Box>
</Popover> </Popover>