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

Updating Typography to Text (#17681)

Browse Source 
Co-authored-by: georgewrmarshall <george.marshall@consensys.net>
This commit is contained in:
Youmna Jaza 2023-03-29 01:04:22 +03:00 committed by GitHub
parent 870415f111
commit 6be18552ab
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 49 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
ui/components/app/add-network/add-network.js
View File

@ -3,13 +3,11 @@ import { useDispatch, useSelector } from 'react-redux';
import { useHistory } from 'react-router-dom'; import { useHistory } from 'react-router-dom';
import { I18nContext } from '../../../contexts/i18n'; import { I18nContext } from '../../../contexts/i18n';
import Box from '../../ui/box'; import Box from '../../ui/box';
import Typography from '../../ui/typography';
import { import {
AlignItems, AlignItems,
DISPLAY, DISPLAY,
FLEX_DIRECTION, FLEX_DIRECTION,
FONT_WEIGHT, TextVariant,
TypographyVariant,
JustifyContent, JustifyContent,
BorderRadius, BorderRadius,
BackgroundColor, BackgroundColor,
@ -38,7 +36,7 @@ import { FEATURED_RPCS } from '../../../../shared/constants/network';
import { ADD_NETWORK_ROUTE } from '../../../helpers/constants/routes'; import { ADD_NETWORK_ROUTE } from '../../../helpers/constants/routes';
import { getEnvironmentType } from '../../../../app/scripts/lib/util'; import { getEnvironmentType } from '../../../../app/scripts/lib/util';
import ZENDESK_URLS from '../../../helpers/constants/zendesk-url'; import ZENDESK_URLS from '../../../helpers/constants/zendesk-url';
import { Icon, ICON_NAMES, ICON_SIZES } from '../../component-library'; import { Icon, ICON_NAMES, ICON_SIZES, Text } from '../../component-library';
import { EVENT } from '../../../../shared/constants/metametrics'; import { EVENT } from '../../../../shared/constants/metametrics';
const AddNetwork = () => { const AddNetwork = () => {
@ -98,7 +96,7 @@ const AddNetwork = () => {
<img src="images/info-fox.svg" /> <img src="images/info-fox.svg" />
</Box> </Box>
<Box> <Box>
<Typography variant={TypographyVariant.H7}> <Text variant={TextVariant.bodySm} as="h6">
{t('youHaveAddedAll', [ {t('youHaveAddedAll', [
<a <a
key="link" key="link"
@ -121,15 +119,16 @@ const AddNetwork = () => {
: history.push(ADD_NETWORK_ROUTE); : history.push(ADD_NETWORK_ROUTE);
}} }}
> >
<Typography <Text
variant={TypographyVariant.H7} variant={TextVariant.bodySm}
as="h6"
color={TextColor.infoDefault} color={TextColor.infoDefault}
> >
{t('addMoreNetworks')}. {t('addMoreNetworks')}.
</Typography> </Text>
</Button>, </Button>,
])} ])}
</Typography> </Text>
</Box> </Box>
</Box> </Box>
) : ( ) : (
@ -144,19 +143,21 @@ const AddNetwork = () => {
paddingBottom={2} paddingBottom={2}
className="add-network__header" className="add-network__header"
> >
<Typography <Text
variant={TypographyVariant.H4} variant={TextVariant.headingSm}
color={TextColor.textMuted} color={TextColor.textMuted}
as="h4"
> >
{t('networks')} {t('networks')}
</Typography> </Text>
<span className="add-network__header__subtitle">{' > '}</span> <span className="add-network__header__subtitle">{' > '}</span>
<Typography <Text
variant={TypographyVariant.H4} variant={TextVariant.headingSm}
as="h4"
color={TextColor.textDefault} color={TextColor.textDefault}
> >
{t('addANetwork')} {t('addANetwork')}
</Typography> </Text>
</Box> </Box>
)} )}
<Box <Box
@ -164,22 +165,24 @@ const AddNetwork = () => {
marginBottom={1} marginBottom={1}
className="add-network__main-container" className="add-network__main-container"
> >
<Typography <Text
variant={TypographyVariant.H6} variant={TextVariant.bodySm}
as="h6"
color={TextColor.textAlternative} color={TextColor.textAlternative}
margin={0} margin={0}
marginTop={4} marginTop={4}
> >
{t('addFromAListOfPopularNetworks')} {t('addFromAListOfPopularNetworks')}
</Typography> </Text>
<Typography <Text
variant={TypographyVariant.H7} variant={TextVariant.bodySm}
as="h6"
color={TextColor.textMuted} color={TextColor.textMuted}
marginTop={4} marginTop={4}
marginBottom={3} marginBottom={3}
> >
{t('popularCustomNetworks')} {t('popularCustomNetworks')}
</Typography> </Text>
{notExistingNetworkConfigurations.map((item, index) => ( {notExistingNetworkConfigurations.map((item, index) => (
<Box <Box
key={index} key={index}
@ -200,13 +203,13 @@ const AddNetwork = () => {
</IconBorder> </IconBorder>
</Box> </Box>
<Box marginLeft={2}> <Box marginLeft={2}>
<Typography <Text
variant={TypographyVariant.H7} variant={TextVariant.bodySmBold}
as="h6"
color={TextColor.textDefault} color={TextColor.textDefault}
fontWeight={FONT_WEIGHT.BOLD}
> >
{item.nickname} {item.nickname}
</Typography> </Text>
</Box> </Box>
</Box> </Box>
<Box <Box
@ -294,12 +297,13 @@ const AddNetwork = () => {
: history.push(ADD_NETWORK_ROUTE); : history.push(ADD_NETWORK_ROUTE);
}} }}
> >
<Typography <Text
variant={TypographyVariant.H6} variant={TextVariant.bodySm}
as="h6"
color={TextColor.primaryDefault} color={TextColor.primaryDefault}
> >
{t('addANetworkManually')} {t('addANetworkManually')}
</Typography> </Text>
</Button> </Button>
</Box> </Box>
</Box> </Box>

23
ui/components/app/confirm-page-container/confirm-page-container.component.js
View File

@ -20,8 +20,11 @@ import EditGasFeePopover from '../edit-gas-fee-popover/edit-gas-fee-popover';
import EditGasPopover from '../edit-gas-popover'; import EditGasPopover from '../edit-gas-popover';
import ErrorMessage from '../../ui/error-message'; import ErrorMessage from '../../ui/error-message';
import { INSUFFICIENT_FUNDS_ERROR_KEY } from '../../../helpers/constants/error-keys'; import { INSUFFICIENT_FUNDS_ERROR_KEY } from '../../../helpers/constants/error-keys';
import Typography from '../../ui/typography'; import { Text } from '../../component-library';
import { TypographyVariant } from '../../../helpers/constants/design-system'; import {
TextVariant,
TEXT_ALIGN,
} from '../../../helpers/constants/design-system';
import NetworkAccountBalanceHeader from '../network-account-balance-header/network-account-balance-header'; import NetworkAccountBalanceHeader from '../network-account-balance-header/network-account-balance-header';
import { fetchTokenBalance } from '../../../../shared/lib/token-util.ts'; import { fetchTokenBalance } from '../../../../shared/lib/token-util.ts';
@ -233,7 +236,11 @@ const ConfirmPageContainer = (props) => {
<ActionableMessage <ActionableMessage
message={ message={
isBuyableChain ? ( isBuyableChain ? (
<Typography variant={TypographyVariant.H7} align="left"> <Text
variant={TextVariant.bodySm}
textAlign={TEXT_ALIGN.LEFT}
as="h6"
>
{t('insufficientCurrencyBuyOrDeposit', [ {t('insufficientCurrencyBuyOrDeposit', [
nativeCurrency, nativeCurrency,
networkName, networkName,
@ -256,14 +263,18 @@ const ConfirmPageContainer = (props) => {
{t('buyAsset', [nativeCurrency])} {t('buyAsset', [nativeCurrency])}
</Button>, </Button>,
])} ])}
</Typography> </Text>
) : ( ) : (
<Typography variant={TypographyVariant.H7} align="left"> <Text
variant={TextVariant.bodySm}
textAlign={TEXT_ALIGN.LEFT}
as="h6"
>
{t('insufficientCurrencyDeposit', [ {t('insufficientCurrencyDeposit', [
nativeCurrency, nativeCurrency,
networkName, networkName,
])} ])}
</Typography> </Text>
) )
} }
useIcon useIcon