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 { I18nContext } from '../../../contexts/i18n';
import Box from '../../ui/box';
import Typography from '../../ui/typography';
import {
AlignItems,
DISPLAY,
FLEX_DIRECTION,
FONT_WEIGHT,
TypographyVariant,
TextVariant,
JustifyContent,
BorderRadius,
BackgroundColor,
@ -38,7 +36,7 @@ import { FEATURED_RPCS } from '../../../../shared/constants/network';
import { ADD_NETWORK_ROUTE } from '../../../helpers/constants/routes';
import { getEnvironmentType } from '../../../../app/scripts/lib/util';
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';
const AddNetwork = () => {
@ -98,7 +96,7 @@ const AddNetwork = () => {
<img src="images/info-fox.svg" />
</Box>
<Box>
<Typography variant={TypographyVariant.H7}>
<Text variant={TextVariant.bodySm} as="h6">
{t('youHaveAddedAll', [
<a
key="link"
@ -121,15 +119,16 @@ const AddNetwork = () => {
: history.push(ADD_NETWORK_ROUTE);
}}
>
<Typography
variant={TypographyVariant.H7}
<Text
variant={TextVariant.bodySm}
as="h6"
color={TextColor.infoDefault}
>
{t('addMoreNetworks')}.
</Typography>
</Text>
</Button>,
])}
</Typography>
</Text>
</Box>
</Box>
) : (
@ -144,19 +143,21 @@ const AddNetwork = () => {
paddingBottom={2}
className="add-network__header"
>
<Typography
variant={TypographyVariant.H4}
<Text
variant={TextVariant.headingSm}
color={TextColor.textMuted}
as="h4"
>
{t('networks')}
</Typography>
</Text>
<span className="add-network__header__subtitle">{' > '}</span>
<Typography
variant={TypographyVariant.H4}
<Text
variant={TextVariant.headingSm}
as="h4"
color={TextColor.textDefault}
>
{t('addANetwork')}
</Typography>
</Text>
</Box>
)}
<Box
@ -164,22 +165,24 @@ const AddNetwork = () => {
marginBottom={1}
className="add-network__main-container"
>
<Typography
variant={TypographyVariant.H6}
<Text
variant={TextVariant.bodySm}
as="h6"
color={TextColor.textAlternative}
margin={0}
marginTop={4}
>
{t('addFromAListOfPopularNetworks')}
</Typography>
<Typography
variant={TypographyVariant.H7}
</Text>
<Text
variant={TextVariant.bodySm}
as="h6"
color={TextColor.textMuted}
marginTop={4}
marginBottom={3}
>
{t('popularCustomNetworks')}
</Typography>
</Text>
{notExistingNetworkConfigurations.map((item, index) => (
<Box
key={index}
@ -200,13 +203,13 @@ const AddNetwork = () => {
</IconBorder>
</Box>
<Box marginLeft={2}>
<Typography
variant={TypographyVariant.H7}
<Text
variant={TextVariant.bodySmBold}
as="h6"
color={TextColor.textDefault}
fontWeight={FONT_WEIGHT.BOLD}
>
{item.nickname}
</Typography>
</Text>
</Box>
</Box>
<Box
@ -294,12 +297,13 @@ const AddNetwork = () => {
: history.push(ADD_NETWORK_ROUTE);
}}
>
<Typography
variant={TypographyVariant.H6}
<Text
variant={TextVariant.bodySm}
as="h6"
color={TextColor.primaryDefault}
>
{t('addANetworkManually')}
</Typography>
</Text>
</Button>
</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 ErrorMessage from '../../ui/error-message';
import { INSUFFICIENT_FUNDS_ERROR_KEY } from '../../../helpers/constants/error-keys';
import Typography from '../../ui/typography';
import { TypographyVariant } from '../../../helpers/constants/design-system';
import { Text } from '../../component-library';
import {
TextVariant,
TEXT_ALIGN,
} from '../../../helpers/constants/design-system';
import NetworkAccountBalanceHeader from '../network-account-balance-header/network-account-balance-header';
import { fetchTokenBalance } from '../../../../shared/lib/token-util.ts';
@ -233,7 +236,11 @@ const ConfirmPageContainer = (props) => {
<ActionableMessage
message={
isBuyableChain ? (
<Typography variant={TypographyVariant.H7} align="left">
<Text
variant={TextVariant.bodySm}
textAlign={TEXT_ALIGN.LEFT}
as="h6"
>
{t('insufficientCurrencyBuyOrDeposit', [
nativeCurrency,
networkName,
@ -256,14 +263,18 @@ const ConfirmPageContainer = (props) => {
{t('buyAsset', [nativeCurrency])}
</Button>,
])}
</Typography>
</Text>
) : (
<Typography variant={TypographyVariant.H7} align="left">
<Text
variant={TextVariant.bodySm}
textAlign={TEXT_ALIGN.LEFT}
as="h6"
>
{t('insufficientCurrencyDeposit', [
nativeCurrency,
networkName,
])}
</Typography>
</Text>
)
}
useIcon