Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Part of #17670: Replace Typography with Text component #17766

Closed
wants to merge 7 commits into from
10 changes: 5 additions & 5 deletions ui/components/app/asset-list/asset-list.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,19 +15,19 @@ import {
} from '../../../selectors';
import { getNativeCurrency } from '../../../ducks/metamask/metamask';
import { useCurrencyDisplay } from '../../../hooks/useCurrencyDisplay';
import Typography from '../../ui/typography/typography';
import Box from '../../ui/box/box';
import {
Color,
TypographyVariant,
FONT_WEIGHT,
JustifyContent,
TextVariant,
} from '../../../helpers/constants/design-system';
import { useI18nContext } from '../../../hooks/useI18nContext';
import { MetaMetricsContext } from '../../../contexts/metametrics';
import { EVENT, EVENT_NAMES } from '../../../../shared/constants/metametrics';
import DetectedToken from '../detected-token/detected-token';
import DetectedTokensLink from './detetcted-tokens-link/detected-tokens-link';
import { Text } from 'ui/components/component-library';

const AssetList = ({ onClickAsset }) => {
const t = useI18nContext();
Expand Down Expand Up @@ -102,13 +102,13 @@ const AssetList = ({ onClickAsset }) => {
)}
<Box marginTop={detectedTokens.length > 0 ? 0 : 4}>
<Box justifyContent={JustifyContent.center}>
<Typography
<Text
color={Color.textAlternative}
variant={TypographyVariant.H6}
variant={TextVariant.bodySm}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah oversight on my part we need to add html tags here so that some e2e tests pass. I've updated the description of the issue if you'd like to look.

Suggested change
variant={TextVariant.bodySm}
variant={TextVariant.bodySm}
as="h6"

fontWeight={FONT_WEIGHT.NORMAL}
SawanKumarBhagat marked this conversation as resolved.
Show resolved Hide resolved
>
{t('missingToken')}
</Typography>
</Text>
</Box>
<ImportTokenLink />
</Box>
Expand Down
10 changes: 5 additions & 5 deletions ui/components/app/beta-header/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,16 @@ import React from 'react';
import { useI18nContext } from '../../../hooks/useI18nContext';

import Box from '../../ui/box/box';
import Typography from '../../ui/typography/typography';
import {
TypographyVariant,
Color,
BLOCK_SIZES,
DISPLAY,
TextVariant,
} from '../../../helpers/constants/design-system';
import { BETA_BUGS_URL } from '../../../helpers/constants/beta';

import { hideBetaHeader } from '../../../store/actions';
import { Text } from 'ui/components/component-library';

const BetaHeader = () => {
const t = useI18nContext();
Expand All @@ -24,8 +24,8 @@ const BetaHeader = () => {
padding={2}
className="beta-header"
>
<Typography
variant={TypographyVariant.H7}
<Text
variant={TextVariant.bodySm}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
variant={TextVariant.bodySm}
variant={TextVariant.bodySm}
as="h6"

marginTop={0}
marginBottom={0}
className="beta-header__message"
Expand All @@ -41,7 +41,7 @@ const BetaHeader = () => {
{t('here')}
</a>,
])}
</Typography>
</Text>
<button
className="beta-header__button"
data-testid="beta-header-close"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import {
AlignItems,
DISPLAY,
FLEX_DIRECTION,
TypographyVariant,
TextVariant,
} from '../../../helpers/constants/design-system';
import { getAppIsLoading } from '../../../selectors';
import { gasEstimateGreaterThanGasUsedPlusTenPercent } from '../../../helpers/utils/gas';
Expand All @@ -19,8 +19,8 @@ import Box from '../../ui/box';
import Button from '../../ui/button';
import InfoTooltip from '../../ui/info-tooltip';
import Popover from '../../ui/popover';
import Typography from '../../ui/typography';
import AppLoadingSpinner from '../app-loading-spinner';
import { Text } from 'ui/components/component-library';

const CancelSpeedupPopover = () => {
const {
Expand Down Expand Up @@ -97,9 +97,9 @@ const CancelSpeedupPopover = () => {
>
<AppLoadingSpinner className="cancel-speedup-popover__spinner" />
<div className="cancel-speedup-popover__wrapper">
<Typography
<Text
boxProps={{ alignItems: AlignItems.center, display: DISPLAY.FLEX }}
variant={TypographyVariant.H6}
variant={TextVariant.bodySm}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
variant={TextVariant.bodySm}
variant={TextVariant.bodySm}
as="h6"

marginTop={0}
marginBottom={2}
>
Expand Down Expand Up @@ -127,7 +127,7 @@ const CancelSpeedupPopover = () => {
</Box>
}
/>
</Typography>
</Text>
<div className="cancel-speedup-popover__separator" />
<Box
display={DISPLAY.FLEX}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,11 @@ import ActionableMessage from '../../../ui/actionable-message/actionable-message
import { PageContainerFooter } from '../../../ui/page-container';
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 { TextVariant} from '../../../../helpers/constants/design-system';
import DepositPopover from '../../deposit-popover/deposit-popover';

import { ConfirmPageContainerSummary, ConfirmPageContainerWarning } from '.';
import { Text } from 'ui/components/component-library';

export default class ConfirmPageContainerContent extends Component {
static contextTypes = {
Expand Down Expand Up @@ -217,7 +217,7 @@ export default class ConfirmPageContainerContent extends Component {
className="actionable-message--warning"
message={
isBuyableChain ? (
<Typography variant={TypographyVariant.H7} align="left">
<Text variant={TextVariant.bodySm} align="left">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<Text variant={TextVariant.bodySm} align="left">
<Text variant={TextVariant.bodySm} textAlign="left" as="h6">

{t('insufficientCurrencyBuyOrDeposit', [
nativeCurrency,
networkName,
Expand All @@ -232,14 +232,14 @@ export default class ConfirmPageContainerContent extends Component {
{t('buyAsset', [nativeCurrency])}
</Button>,
])}
</Typography>
</Text>
) : (
<Typography variant={TypographyVariant.H7} align="left">
<Text variant={TextVariant.bodySm} align="left">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<Text variant={TextVariant.bodySm} align="left">
<Text variant={TextVariant.bodySm} textAlign="left" as="h6">

{t('insufficientCurrencyDeposit', [
nativeCurrency,
networkName,
])}
</Typography>
</Text>
)
}
useIcon
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,7 @@ 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 { TextVariant } from '../../../helpers/constants/design-system';

import NetworkAccountBalanceHeader from '../network-account-balance-header/network-account-balance-header';
import DepositPopover from '../deposit-popover/deposit-popover';
Expand All @@ -45,6 +44,7 @@ import {
ConfirmPageContainerContent,
ConfirmPageContainerNavigation,
} from '.';
import { Text } from 'ui/components/component-library';

const ConfirmPageContainer = (props) => {
const {
Expand Down Expand Up @@ -230,7 +230,7 @@ const ConfirmPageContainer = (props) => {
<ActionableMessage
message={
isBuyableChain ? (
<Typography variant={TypographyVariant.H7} align="left">
<Text variant={TextVariant.bodySm} align="left">
SawanKumarBhagat marked this conversation as resolved.
Show resolved Hide resolved
{t('insufficientCurrencyBuyOrDeposit', [
nativeCurrency,
networkName,
Expand All @@ -243,14 +243,14 @@ const ConfirmPageContainer = (props) => {
{t('buyAsset', [nativeCurrency])}
</Button>,
])}
</Typography>
</Text>
) : (
<Typography variant={TypographyVariant.H7} align="left">
<Text variant={TextVariant.bodySm} align="left">
SawanKumarBhagat marked this conversation as resolved.
Show resolved Hide resolved
{t('insufficientCurrencyDeposit', [
nativeCurrency,
networkName,
])}
</Typography>
</Text>
)
}
useIcon
Expand Down