Skip to content

Commit

Permalink
Updating Typography to Text (#17681)
Browse files Browse the repository at this point in the history 
Co-authored-by: georgewrmarshall <george.marshall@consensys.net>
  • Loading branch information
@Yomna-J @georgewrmarshall
Yomna-J and georgewrmarshall authored Mar 28, 2023
1 parent 870415f commit 6be1855
Show file tree
Hide file tree
Showing 2 changed files with 49 additions and 34 deletions.
60 changes: 32 additions & 28 deletions ui/components/app/add-network/add-network.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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 = () => {
Expand Down Expand Up @@ -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"
Expand All @@ -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>
) : (
Expand All @@ -144,42 +143,46 @@ 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
marginTop={getEnvironmentType() === ENVIRONMENT_TYPE_POPUP ? 0 : 4}
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}
Expand All @@ -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
Expand Down Expand Up @@ -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>
Expand Down
23 changes: 17 additions & 6 deletions ui/components/app/confirm-page-container/confirm-page-container.component.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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,
Expand All @@ -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
Expand Down

0 comments on commit 6be1855

Please sign in to comment.