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

feature: migrate design-system.ts (#17518)

Browse Source
This commit is contained in:
Danica Shen 2023-02-02 20:15:26 +00:00 committed by GitHub
parent deb9343ff0
commit 794f3039f1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
255 changed files with 3225 additions and 2954 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,14 +5,15 @@ import { I18nContext } from '../../../contexts/i18n';
import Box from '../../ui/box';
import Typography from '../../ui/typography';
import {
ALIGN_ITEMS,
COLORS,
AlignItems,
DISPLAY,
FLEX_DIRECTION,
FONT_WEIGHT,
TYPOGRAPHY,
JUSTIFY_CONTENT,
SIZES,
TypographyVariant,
JustifyContent,
BorderRadius,
BackgroundColor,
TextColor,
} from '../../../helpers/constants/design-system';
import Button from '../../ui/button';
import Tooltip from '../../ui/tooltip';
@ -80,20 +81,20 @@ const AddNetwork = () => {
{Object.keys(notFrequentRpcNetworks).length === 0 ? (
<Box
className="add-network__edge-case-box"
borderRadius={SIZES.MD}
borderRadius={BorderRadius.MD}
padding={4}
marginTop={4}
marginRight={6}
marginLeft={6}
display={DISPLAY.FLEX}
flexDirection={FLEX_DIRECTION.ROW}
backgroundColor={COLORS.BACKGROUND_ALTERNATIVE}
backgroundColor={BackgroundColor.backgroundAlternative}
>
<Box marginRight={4}>
<img src="images/info-fox.svg" />
</Box>
<Box>
<Typography variant={TYPOGRAPHY.H7}>
<Typography variant={TypographyVariant.H7}>
{t('youHaveAddedAll', [
<a
key="link"
@ -117,8 +118,8 @@ const AddNetwork = () => {
}}
>
<Typography
variant={TYPOGRAPHY.H7}
color={COLORS.INFO_DEFAULT}
variant={TypographyVariant.H7}
color={TextColor.infoDefault}
>
{t('addMoreNetworks')}.
</Typography>
@ -132,18 +133,24 @@ const AddNetwork = () => {
{getEnvironmentType() === ENVIRONMENT_TYPE_FULLSCREEN && (
<Box
display={DISPLAY.FLEX}
alignItems={ALIGN_ITEMS.CENTER}
alignItems={AlignItems.center}
flexDirection={FLEX_DIRECTION.ROW}
marginTop={7}
marginBottom={4}
paddingBottom={2}
className="add-network__header"
>
<Typography variant={TYPOGRAPHY.H4} color={COLORS.TEXT_MUTED}>
<Typography
variant={TypographyVariant.H4}
color={TextColor.textMuted}
>
{t('networks')}
</Typography>
<span className="add-network__header__subtitle">{' > '}</span>
<Typography variant={TYPOGRAPHY.H4} color={COLORS.TEXT_DEFAULT}>
<Typography
variant={TypographyVariant.H4}
color={TextColor.textDefault}
>
{t('addANetwork')}
</Typography>
</Box>
@ -154,16 +161,16 @@ const AddNetwork = () => {
className="add-network__main-container"
>
<Typography
variant={TYPOGRAPHY.H6}
color={COLORS.TEXT_ALTERNATIVE}
variant={TypographyVariant.H6}
color={TextColor.textAlternative}
margin={0}
marginTop={4}
>
{t('addFromAListOfPopularNetworks')}
</Typography>
<Typography
variant={TYPOGRAPHY.H7}
color={COLORS.TEXT_MUTED}
variant={TypographyVariant.H7}
color={TextColor.textMuted}
marginTop={4}
marginBottom={3}
>
@ -173,12 +180,12 @@ const AddNetwork = () => {
<Box
key={index}
display={DISPLAY.FLEX}
alignItems={ALIGN_ITEMS.CENTER}
justifyContent={JUSTIFY_CONTENT.SPACE_BETWEEN}
alignItems={AlignItems.center}
justifyContent={JustifyContent.spaceBetween}
marginBottom={6}
className="add-network__list-of-networks"
>
<Box display={DISPLAY.FLEX} alignItems={ALIGN_ITEMS.CENTER}>
<Box display={DISPLAY.FLEX} alignItems={AlignItems.center}>
<Box>
<IconBorder size={24}>
<IconWithFallback
@ -190,8 +197,8 @@ const AddNetwork = () => {
</Box>
<Box marginLeft={2}>
<Typography
variant={TYPOGRAPHY.H7}
color={COLORS.TEXT_DEFAULT}
variant={TypographyVariant.H7}
color={TextColor.textDefault}
fontWeight={FONT_WEIGHT.BOLD}
>
{item.nickname}
@ -200,7 +207,7 @@ const AddNetwork = () => {
</Box>
<Box
display={DISPLAY.FLEX}
alignItems={ALIGN_ITEMS.CENTER}
alignItems={AlignItems.center}
marginLeft={1}
>
{
@ -267,8 +274,8 @@ const AddNetwork = () => {
}}
>
<Typography
variant={TYPOGRAPHY.H6}
color={COLORS.PRIMARY_DEFAULT}
variant={TypographyVariant.H6}
color={TextColor.primaryDefault}
>
{t('addANetworkManually')}
</Typography>

8
ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-defaults/advanced-gas-fee-defaults.js
View File

@ -7,10 +7,10 @@ import Box from '../../../ui/box';
import Typography from '../../../ui/typography';
import CheckBox from '../../../ui/check-box';
import {
COLORS,
DISPLAY,
FLEX_DIRECTION,
TYPOGRAPHY,
TextColor,
TypographyVariant,
} from '../../../../helpers/constants/design-system';
import { getAdvancedGasFeeValues } from '../../../../selectors';
import { setAdvancedGasFee } from '../../../../store/actions';
@ -88,8 +88,8 @@ const AdvancedGasFeeDefaults = () => {
disabled={gasErrors.maxFeePerGas || gasErrors.maxPriorityFeePerGas}
/>
<Typography
variant={TYPOGRAPHY.H7}
color={COLORS.TEXT_ALTERNATIVE}
variant={TypographyVariant.H7}
color={TextColor.textAlternative}
margin={0}
>
{isDefaultSettingsSelected

6
ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-gas-limit/advanced-gas-fee-gas-limit.js
View File

@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
import { useGasFeeContext } from '../../../../contexts/gasFee';
import { bnGreaterThan, bnLessThan } from '../../../../helpers/utils/util';
import { TYPOGRAPHY } from '../../../../helpers/constants/design-system';
import { TypographyVariant } from '../../../../helpers/constants/design-system';
import { useI18nContext } from '../../../../hooks/useI18nContext';
import { MAX_GAS_LIMIT_DEC } from '../../../../pages/send/send.constants';
import Button from '../../../ui/button';
@ -59,8 +59,8 @@ const AdvancedGasFeeGasLimit = () => {
return (
<Typography
tag={TYPOGRAPHY.Paragraph}
variant={TYPOGRAPHY.H7}
tag={TypographyVariant.paragraph}
variant={TypographyVariant.H7}
className="advanced-gas-fee-gas-limit"
marginTop={4}
marginLeft={2}

54
ui/components/app/approve-content-card/approve-content-card.js
View File

@ -6,17 +6,17 @@ import Button from '../../ui/button';
import EditGasFeeButton from '../edit-gas-fee-button/edit-gas-fee-button';
import Typography from '../../ui/typography/typography';
import {
ALIGN_ITEMS,
AlignItems,
BLOCK_SIZES,
COLORS,
DISPLAY,
FLEX_DIRECTION,
FONT_WEIGHT,
JUSTIFY_CONTENT,
JustifyContent,
TEXT_ALIGN,
TYPOGRAPHY,
TextColor,
TypographyVariant,
} from '../../../helpers/constants/design-system';
import { I18nContext } from '../../../../.storybook/i18n';
import { I18nContext } from '../../../contexts/i18n';
import GasDetailsItem from '../gas-details-item/gas-details-item';
import MultiLayerFeeMessage from '../multilayer-fee-message/multi-layer-fee-message';
import { formatCurrency } from '../../../helpers/utils/confirm-tx.util';
@ -59,8 +59,8 @@ export default function ApproveContentCard({
<Box
display={DISPLAY.FLEX}
flexDirection={FLEX_DIRECTION.ROW}
alignItems={ALIGN_ITEMS.CENTER}
justifyContent={JUSTIFY_CONTENT.FLEX_END}
alignItems={AlignItems.center}
justifyContent={JustifyContent.flexEnd}
className="approve-content-card-container__card-header"
>
{supportsEIP1559 && title === t('transactionFee') ? null : (
@ -73,7 +73,7 @@ export default function ApproveContentCard({
className="approve-content-card-container__card-header__title"
>
<Typography
variant={TYPOGRAPHY.H6}
variant={TypographyVariant.H6}
fontWeight={FONT_WEIGHT.BOLD}
>
{title}
@ -85,8 +85,8 @@ export default function ApproveContentCard({
<Box width={BLOCK_SIZES.ONE_SIXTH}>
<Button type="link" onClick={() => onEditClick()}>
<Typography
variant={TYPOGRAPHY.H7}
color={COLORS.PRIMARY_DEFAULT}
variant={TypographyVariant.H7}
color={TextColor.primaryDefault}
>
{t('edit')}
</Typography>
@ -119,7 +119,7 @@ export default function ApproveContentCard({
<Box
display={DISPLAY.FLEX}
flexDirection={FLEX_DIRECTION.ROW}
justifyContent={JUSTIFY_CONTENT.SPACE_BETWEEN}
justifyContent={JustifyContent.spaceBetween}
>
{isMultiLayerFeeNetwork ? (
<Box
@ -129,12 +129,12 @@ export default function ApproveContentCard({
>
<Box
display={DISPLAY.FLEX}
justifyContent={JUSTIFY_CONTENT.SPACE_BETWEEN}
justifyContent={JustifyContent.spaceBetween}
>
<Typography
variant={TYPOGRAPHY.H6}
variant={TypographyVariant.H6}
fontWeight={FONT_WEIGHT.NORMAL}
color={COLORS.TEXT_MUTED}
color={TextColor.textMuted}
>
<span>{t('transactionDetailLayer2GasHeading')}</span>
{`${ethTransactionTotal} ${nativeCurrency}`}
@ -151,8 +151,8 @@ export default function ApproveContentCard({
<>
<Box>
<Typography
variant={TYPOGRAPHY.H7}
color={COLORS.TEXT_ALTERNATIVE}
variant={TypographyVariant.H7}
color={TextColor.textAlternative}
>
{t('feeAssociatedRequest')}
</Typography>
@ -160,23 +160,23 @@ export default function ApproveContentCard({
<Box
display={DISPLAY.FLEX}
flexDirection={FLEX_DIRECTION.COLUMN}
alignItems={ALIGN_ITEMS.FLEX_END}
alignItems={AlignItems.flexEnd}
textAlign={TEXT_ALIGN.RIGHT}
>
<Box>
<Typography
variant={TYPOGRAPHY.H4}
variant={TypographyVariant.H4}
fontWeight={FONT_WEIGHT.BOLD}
color={COLORS.TEXT_DEFAULT}
color={TextColor.textDefault}
>
{formatCurrency(fiatTransactionTotal, currentCurrency)}
</Typography>
</Box>
<Box>
<Typography
variant={TYPOGRAPHY.H6}
variant={TypographyVariant.H6}
fontWeight={FONT_WEIGHT.NORMAL}
color={COLORS.TEXT_MUTED}
color={TextColor.textMuted}
>
{`${ethTransactionTotal} ${nativeCurrency}`}
</Typography>
@ -190,8 +190,8 @@ export default function ApproveContentCard({
<Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.COLUMN}>
<Box>
<Typography
variant={TYPOGRAPHY.H7}
color={COLORS.TEXT_ALTERNATIVE}
variant={TypographyVariant.H7}
color={TextColor.textAlternative}
>
{isSetApproveForAll
? t('functionSetApprovalForAll')
@ -201,8 +201,8 @@ export default function ApproveContentCard({
{isSetApproveForAll && isApprovalOrRejection !== undefined ? (
<Box>
<Typography
variant={TYPOGRAPHY.H7}
color={COLORS.TEXT_ALTERNATIVE}
variant={TypographyVariant.H7}
color={TextColor.textAlternative}
>
{`${t('parameters')}: ${isApprovalOrRejection}`}
</Typography>
@ -213,8 +213,8 @@ export default function ApproveContentCard({
className="approve-content-card-container__data__data-block"
>
<Typography
variant={TYPOGRAPHY.H7}
color={COLORS.TEXT_ALTERNATIVE}
variant={TypographyVariant.H7}
color={TextColor.textAlternative}
>
{data}
</Typography>

12
ui/components/app/asset-list/asset-list.js
View File

@ -18,10 +18,10 @@ import { useCurrencyDisplay } from '../../../hooks/useCurrencyDisplay';
import Typography from '../../ui/typography/typography';
import Box from '../../ui/box/box';
import {
COLORS,
TYPOGRAPHY,
Color,
TypographyVariant,
FONT_WEIGHT,
JUSTIFY_CONTENT,
JustifyContent,
} from '../../../helpers/constants/design-system';
import { useI18nContext } from '../../../hooks/useI18nContext';
import { MetaMetricsContext } from '../../../contexts/metametrics';
@ -101,10 +101,10 @@ const AssetList = ({ onClickAsset }) => {
<DetectedTokensLink setShowDetectedTokens={setShowDetectedTokens} />
)}
<Box marginTop={detectedTokens.length > 0 ? 0 : 4}>
<Box justifyContent={JUSTIFY_CONTENT.CENTER}>
<Box justifyContent={JustifyContent.center}>
<Typography
color={COLORS.TEXT_ALTERNATIVE}
variant={TYPOGRAPHY.H6}
color={Color.textAlternative}
variant={TypographyVariant.H6}
fontWeight={FONT_WEIGHT.NORMAL}
>
{t('missingToken')}

10
ui/components/app/beta-header/index.js
View File

@ -4,8 +4,8 @@ import { useI18nContext } from '../../../hooks/useI18nContext';
import Box from '../../ui/box/box';
import Typography from '../../ui/typography/typography';
import {
TYPOGRAPHY,
COLORS,
TypographyVariant,
Color,
BLOCK_SIZES,
DISPLAY,
} from '../../../helpers/constants/design-system';
@ -20,16 +20,16 @@ const BetaHeader = () => {
<Box
display={DISPLAY.FLEX}
width={BLOCK_SIZES.FULL}
backgroundColor={COLORS.WARNING_DEFAULT}
backgroundColor={Color.warningDefault}
padding={2}
className="beta-header"
>
<Typography
variant={TYPOGRAPHY.H7}
variant={TypographyVariant.H7}
marginTop={0}
marginBottom={0}
className="beta-header__message"
color={COLORS.WARNING_INVERSE}
color={Color.warningInverse}
>
{t('betaHeaderText', [
<a

10
ui/components/app/cancel-speedup-popover/cancel-speedup-popover.js
View File

@ -3,10 +3,10 @@ import React, { useEffect } from 'react';
import { EditGasModes, PriorityLevels } from '../../../../shared/constants/gas';
import {
ALIGN_ITEMS,
AlignItems,
DISPLAY,
FLEX_DIRECTION,
TYPOGRAPHY,
TypographyVariant,
} from '../../../helpers/constants/design-system';
import { getAppIsLoading } from '../../../selectors';
import { gasEstimateGreaterThanGasUsedPlusTenPercent } from '../../../helpers/utils/gas';
@ -98,8 +98,8 @@ const CancelSpeedupPopover = () => {
<AppLoadingSpinner className="cancel-speedup-popover__spinner" />
<div className="cancel-speedup-popover__wrapper">
<Typography
boxProps={{ alignItems: ALIGN_ITEMS.CENTER, display: DISPLAY.FLEX }}
variant={TYPOGRAPHY.H6}
boxProps={{ alignItems: AlignItems.center, display: DISPLAY.FLEX }}
variant={TypographyVariant.H6}
marginTop={0}
marginBottom={2}
>
@ -131,7 +131,7 @@ const CancelSpeedupPopover = () => {
<div className="cancel-speedup-popover__separator" />
<Box
display={DISPLAY.FLEX}
alignItems={ALIGN_ITEMS.CENTER}
alignItems={AlignItems.center}
flexDirection={FLEX_DIRECTION.COLUMN}
marginTop={4}
>

7
ui/components/app/collectible-default-image/collectible-default-image.js
View File

@ -2,7 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import Typography from '../../ui/typography';
import { TYPOGRAPHY } from '../../../helpers/constants/design-system';
import { TypographyVariant } from '../../../helpers/constants/design-system';
import { useI18nContext } from '../../../hooks/useI18nContext';
export default function CollectibleDefaultImage({
@ -20,7 +20,10 @@ export default function CollectibleDefaultImage({
})}
onClick={handleImageClick}
>
<Typography variant={TYPOGRAPHY.H6} className="collectible-default__text">
<Typography
variant={TypographyVariant.H6}
className="collectible-default__text"
>
{name ?? t('unknownCollection')} <br /> #{tokenId}
</Typography>
</Tag>

79
ui/components/app/collectible-details/collectible-details.js
View File

@ -7,15 +7,15 @@ import Box from '../../ui/box';
import Card from '../../ui/card';
import Typography from '../../ui/typography/typography';
import {
COLORS,
TYPOGRAPHY,
TextColor,
IconColor,
TypographyVariant,
FONT_WEIGHT,
JUSTIFY_CONTENT,
JustifyContent,
FLEX_DIRECTION,
OVERFLOW_WRAP,
DISPLAY,
BLOCK_SIZES,
ICON_COLORS,
} from '../../../helpers/constants/design-system';
import { useI18nContext } from '../../../hooks/useI18nContext';
import {
@ -181,7 +181,7 @@ export default function CollectibleDetails({ collectible }) {
<div className="collectible-details__top-section">
<Card
padding={0}
justifyContent={JUSTIFY_CONTENT.CENTER}
justifyContent={JustifyContent.center}
className="collectible-details__card"
>
{image ? (
@ -197,20 +197,20 @@ export default function CollectibleDetails({ collectible }) {
<Box
flexDirection={FLEX_DIRECTION.COLUMN}
className="collectible-details__info"
justifyContent={JUSTIFY_CONTENT.SPACE_BETWEEN}
justifyContent={JustifyContent.spaceBetween}
>
<div>
<Typography
color={COLORS.TEXT_DEFAULT}
variant={TYPOGRAPHY.H4}
color={TextColor.textDefault}
variant={TypographyVariant.H4}
fontWeight={FONT_WEIGHT.BOLD}
boxProps={{ margin: 0, marginBottom: 2 }}
>
{name}
</Typography>
<Typography
color={COLORS.TEXT_MUTED}
variant={TYPOGRAPHY.H5}
color={TextColor.textMuted}
variant={TypographyVariant.H5}
boxProps={{ margin: 0, marginBottom: 4 }}
overflowWrap={OVERFLOW_WRAP.BREAK_WORD}
>
@ -220,8 +220,8 @@ export default function CollectibleDetails({ collectible }) {
{description ? (
<div>
<Typography
color={COLORS.TEXT_DEFAULT}
variant={TYPOGRAPHY.H6}
color={TextColor.textDefault}
variant={TypographyVariant.H6}
fontWeight={FONT_WEIGHT.BOLD}
className="collectible-details__description"
boxProps={{ margin: 0, marginBottom: 2 }}
@ -229,8 +229,8 @@ export default function CollectibleDetails({ collectible }) {
{t('description')}
</Typography>
<Typography
color={COLORS.TEXT_ALTERNATIVE}
variant={TYPOGRAPHY.H6}
color={TextColor.textAlternative}
variant={TypographyVariant.H6}
overflowWrap={OVERFLOW_WRAP.BREAK_WORD}
boxProps={{ margin: 0, marginBottom: 4 }}
>
@ -246,8 +246,8 @@ export default function CollectibleDetails({ collectible }) {
<>
<Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.ROW}>
<Typography
color={COLORS.TEXT_DEFAULT}
variant={TYPOGRAPHY.H6}
color={TextColor.textDefault}
variant={TypographyVariant.H6}
fontWeight={FONT_WEIGHT.BOLD}
boxProps={{
margin: 0,
@ -264,8 +264,8 @@ export default function CollectibleDetails({ collectible }) {
className="collectible-details__contract-wrapper"
>
<Typography
color={COLORS.TEXT_ALTERNATIVE}
variant={TYPOGRAPHY.H6}
color={TextColor.textAlternative}
variant={TypographyVariant.H6}
overflowWrap={OVERFLOW_WRAP.BREAK_WORD}
boxProps={{ margin: 0, marginBottom: 4 }}
>
@ -275,8 +275,8 @@ export default function CollectibleDetails({ collectible }) {
</Box>
<Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.ROW}>
<Typography
color={COLORS.TEXT_DEFAULT}
variant={TYPOGRAPHY.H6}
color={TextColor.textDefault}
variant={TypographyVariant.H6}
fontWeight={FONT_WEIGHT.BOLD}
boxProps={{
margin: 0,
@ -293,8 +293,8 @@ export default function CollectibleDetails({ collectible }) {
className="collectible-details__contract-wrapper"
>
<Typography
color={COLORS.TEXT_ALTERNATIVE}
variant={TYPOGRAPHY.H6}
color={TextColor.textAlternative}
variant={TypographyVariant.H6}
overflowWrap={OVERFLOW_WRAP.BREAK_WORD}
boxProps={{ margin: 0, marginBottom: 4 }}
>
@ -306,8 +306,8 @@ export default function CollectibleDetails({ collectible }) {
) : null}
<Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.ROW}>
<Typography
color={COLORS.TEXT_DEFAULT}
variant={TYPOGRAPHY.H6}
color={TextColor.textDefault}
variant={TypographyVariant.H6}
fontWeight={FONT_WEIGHT.BOLD}
boxProps={{
margin: 0,
@ -319,13 +319,15 @@ export default function CollectibleDetails({ collectible }) {
{t('source')}
</Typography>
<Typography
variant={TYPOGRAPHY.H6}
variant={TypographyVariant.H6}
boxProps={{
margin: 0,
marginBottom: 4,
}}
className="collectible-details__image-source"
color={isDataURI ? COLORS.TEXT_DEFAULT : COLORS.PRIMARY_DEFAULT}
color={
isDataURI ? TextColor.textDefault : TextColor.primaryDefault
}
>
{isDataURI ? (
<>{collectibleImageURL}</>
@ -343,8 +345,8 @@ export default function CollectibleDetails({ collectible }) {
</Box>
<Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.ROW}>
<Typography
color={COLORS.TEXT_DEFAULT}
variant={TYPOGRAPHY.H6}
color={TextColor.textDefault}
variant={TypographyVariant.H6}
fontWeight={FONT_WEIGHT.BOLD}
boxProps={{
margin: 0,
@ -356,13 +358,15 @@ export default function CollectibleDetails({ collectible }) {
{t('link')}
</Typography>
<Typography
variant={TYPOGRAPHY.H6}
variant={TypographyVariant.H6}
boxProps={{
margin: 0,
marginBottom: 4,
}}
className="collectible-details__image-source"
color={isDataURI ? COLORS.TEXT_DEFAULT : COLORS.PRIMARY_DEFAULT}
color={
isDataURI ? TextColor.textDefault : TextColor.primaryDefault
}
>
<a
target="_blank"
@ -376,8 +380,8 @@ export default function CollectibleDetails({ collectible }) {
</Box>
<Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.ROW}>
<Typography
color={COLORS.TEXT_DEFAULT}
variant={TYPOGRAPHY.H6}
color={TextColor.textDefault}
variant={TypographyVariant.H6}
fontWeight={FONT_WEIGHT.BOLD}
boxProps={{
margin: 0,
@ -394,8 +398,8 @@ export default function CollectibleDetails({ collectible }) {
className="collectible-details__contract-wrapper"
>
<Typography
color={COLORS.TEXT_ALTERNATIVE}
variant={TYPOGRAPHY.H6}
color={TextColor.textAlternative}
variant={TypographyVariant.H6}
overflowWrap={OVERFLOW_WRAP.BREAK_WORD}
boxProps={{ margin: 0, marginBottom: 4 }}
>
@ -410,7 +414,7 @@ export default function CollectibleDetails({ collectible }) {
>
<ButtonIcon
ariaLabel="copy"
color={ICON_COLORS.ICON_ALTERNATIVE}
color={IconColor.iconAlternative}
className="collectible-details__contract-copy-button"
onClick={() => {
handleAddressCopy(address);
@ -423,7 +427,10 @@ export default function CollectibleDetails({ collectible }) {
</Box>
</Box>
{inPopUp ? renderSendButton() : null}
<Typography color={COLORS.TEXT_ALTERNATIVE} variant={TYPOGRAPHY.H7}>
<Typography
color={TextColor.textAlternative}
variant={TypographyVariant.H7}
>
{t('nftDisclaimer')}
</Typography>
</Box>

12
ui/components/app/collectibles-detection-notice/collectibles-detection-notice.js
View File

@ -4,11 +4,11 @@ import Box from '../../ui/box';
import Dialog from '../../ui/dialog';
import Typography from '../../ui/typography/typography';
import {
COLORS,
TYPOGRAPHY,
TypographyVariant,
TEXT_ALIGN,
FONT_WEIGHT,
DISPLAY,
TextColor,
} from '../../../helpers/constants/design-system';
import { useI18nContext } from '../../../hooks/useI18nContext';
import Button from '../../ui/button';
@ -33,17 +33,17 @@ export default function CollectiblesDetectionNotice() {
</Box>
<Box paddingLeft={2}>
<Typography
color={COLORS.TEXT_DEFAULT}
color={TextColor.textDefault}
align={TEXT_ALIGN.LEFT}
variant={TYPOGRAPHY.H7}
variant={TypographyVariant.H7}
fontWeight={FONT_WEIGHT.BOLD}
>
{t('newNFTsDetected')}
</Typography>
<Typography
color={COLORS.TEXT_DEFAULT}
color={TextColor.textDefault}
align={TEXT_ALIGN.LEFT}
variant={TYPOGRAPHY.H7}
variant={TypographyVariant.H7}
boxProps={{ marginBottom: 4 }}
>
{t('newNFTDetectedMessage')}

22
ui/components/app/collectibles-items/collectibles-items.js
View File

@ -7,11 +7,11 @@ import Box from '../../ui/box';
import Typography from '../../ui/typography/typography';
import Card from '../../ui/card';
import {
COLORS,
TYPOGRAPHY,
JUSTIFY_CONTENT,
Color,
TypographyVariant,
JustifyContent,
FLEX_DIRECTION,
ALIGN_ITEMS,
AlignItems,
DISPLAY,
BLOCK_SIZES,
FLEX_WRAP,
@ -142,18 +142,18 @@ export default function CollectiblesItems({
<Box
marginBottom={2}
display={DISPLAY.FLEX}
alignItems={ALIGN_ITEMS.CENTER}
justifyContent={JUSTIFY_CONTENT.SPACE_BETWEEN}
alignItems={AlignItems.center}
justifyContent={JustifyContent.spaceBetween}
className="collectibles-items__collection-accordion-title"
>
<Box
alignItems={ALIGN_ITEMS.CENTER}
alignItems={AlignItems.center}
className="collectibles-items__collection-header"
>
{renderCollectionImage(collectionImage, collectionName)}
<Typography
color={COLORS.TEXT_DEFAULT}
variant={TYPOGRAPHY.H5}
color={Color.textDefault}
variant={TypographyVariant.H5}
margin={2}
>
{`${collectionName ?? t('unknownCollection')} (${
@ -161,7 +161,7 @@ export default function CollectiblesItems({
})`}
</Typography>
</Box>
<Box alignItems={ALIGN_ITEMS.FLEX_END}>
<Box alignItems={AlignItems.flexEnd}>
<i
className={`collectibles-items__collection__icon-chevron fa fa-chevron-${
isExpanded ? 'down' : 'right'
@ -189,7 +189,7 @@ export default function CollectiblesItems({
>
<Card
padding={0}
justifyContent={JUSTIFY_CONTENT.CENTER}
justifyContent={JustifyContent.center}
className="collectibles-items__item-wrapper__card"
>
{collectibleImage ? (

34
ui/components/app/collectibles-tab/collectibles-tab.js
View File

@ -8,13 +8,13 @@ import Typography from '../../ui/typography/typography';
import CollectiblesDetectionNotice from '../collectibles-detection-notice';
import CollectiblesItems from '../collectibles-items';
import {
COLORS,
TYPOGRAPHY,
TypographyVariant,
TEXT_ALIGN,
JUSTIFY_CONTENT,
JustifyContent,
FLEX_DIRECTION,
FONT_WEIGHT,
ALIGN_ITEMS,
AlignItems,
TextColor,
} from '../../../helpers/constants/design-system';
import { useI18nContext } from '../../../hooks/useI18nContext';
import { getIsMainnet, getUseNftDetection } from '../../../selectors';
@ -65,19 +65,19 @@ export default function CollectiblesTab({ onAddNFT }) {
<CollectiblesDetectionNotice />
) : null}
<Box padding={12}>
<Box justifyContent={JUSTIFY_CONTENT.CENTER}>
<Box justifyContent={JustifyContent.center}>
<img src="./images/no-nfts.svg" />
</Box>
<Box
marginTop={4}
marginBottom={12}
justifyContent={JUSTIFY_CONTENT.CENTER}
justifyContent={JustifyContent.center}
flexDirection={FLEX_DIRECTION.COLUMN}
className="collectibles-tab__link"
>
<Typography
color={COLORS.TEXT_MUTED}
variant={TYPOGRAPHY.H4}
color={TextColor.textMuted}
variant={TypographyVariant.H4}
align={TEXT_ALIGN.CENTER}
fontWeight={FONT_WEIGHT.BOLD}
>
@ -97,25 +97,25 @@ export default function CollectiblesTab({ onAddNFT }) {
)}
<Box
marginBottom={4}
justifyContent={JUSTIFY_CONTENT.CENTER}
justifyContent={JustifyContent.center}
flexDirection={FLEX_DIRECTION.COLUMN}
>
<Typography
color={COLORS.TEXT_MUTED}
variant={TYPOGRAPHY.H5}
color={TextColor.textMuted}
variant={TypographyVariant.H5}
align={TEXT_ALIGN.CENTER}
>
{t('missingNFT')}
</Typography>
<Box
alignItems={ALIGN_ITEMS.CENTER}
justifyContent={JUSTIFY_CONTENT.CENTER}
alignItems={AlignItems.center}
justifyContent={JustifyContent.center}
>
{!isMainnet && Object.keys(collections).length < 1 ? null : (
<>
<Box
className="collectibles-tab__link"
justifyContent={JUSTIFY_CONTENT.FLEX_END}
justifyContent={JustifyContent.flexEnd}
>
{isMainnet && !useNftDetection ? (
<Button type="link" onClick={onEnableAutoDetect}>
@ -128,8 +128,8 @@ export default function CollectiblesTab({ onAddNFT }) {
)}
</Box>
<Typography
color={COLORS.TEXT_MUTED}
variant={TYPOGRAPHY.H6}
color={TextColor.textMuted}
variant={TypographyVariant.H6}
align={TEXT_ALIGN.CENTER}
>
{t('or')}
@ -137,7 +137,7 @@ export default function CollectiblesTab({ onAddNFT }) {
</>
)}
<Box
justifyContent={JUSTIFY_CONTENT.FLEX_START}
justifyContent={JustifyContent.flexStart}
className="collectibles-tab__link"
>
<Button type="link" onClick={onAddNFT}>

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

@ -8,7 +8,7 @@ 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 { TYPOGRAPHY } from '../../../../helpers/constants/design-system';
import { TypographyVariant } from '../../../../helpers/constants/design-system';
import DepositPopover from '../../deposit-popover/deposit-popover';
import { ConfirmPageContainerSummary, ConfirmPageContainerWarning } from '.';
@ -217,7 +217,7 @@ export default class ConfirmPageContainerContent extends Component {
className="actionable-message--warning"
message={
isBuyableChain ? (
<Typography variant={TYPOGRAPHY.H7} align="left">
<Typography variant={TypographyVariant.H7} align="left">
{t('insufficientCurrencyBuyOrDeposit', [
nativeCurrency,
networkName,
@ -234,7 +234,7 @@ export default class ConfirmPageContainerContent extends Component {
])}
</Typography>
) : (
<Typography variant={TYPOGRAPHY.H7} align="left">
<Typography variant={TypographyVariant.H7} align="left">
{t('insufficientCurrencyDeposit', [
nativeCurrency,
networkName,

6
ui/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-summary/confirm-page-container-summary.component.js
View File

@ -15,7 +15,7 @@ import Identicon from '../../../../ui/identicon';
import InfoTooltip from '../../../../ui/info-tooltip';
import NicknamePopovers from '../../../modals/nickname-popovers';
import Typography from '../../../../ui/typography';
import { TYPOGRAPHY } from '../../../../../helpers/constants/design-system';
import { TypographyVariant } from '../../../../../helpers/constants/design-system';
import { ORIGIN_METAMASK } from '../../../../../../shared/constants/app';
import SiteOrigin from '../../../../ui/site-origin';
import { getAssetImageURL } from '../../../../../helpers/utils/util';
@ -134,7 +134,9 @@ const ConfirmPageContainerSummary = (props) => {
<Typography
className="confirm-page-container-summary__title-text"
variant={
title && title.length < 10 ? TYPOGRAPHY.H1 : TYPOGRAPHY.H3
title && title.length < 10
? TypographyVariant.H1
: TypographyVariant.H3
}
title={title}
>

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

@ -21,7 +21,7 @@ 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 { TYPOGRAPHY } from '../../../helpers/constants/design-system';
import { TypographyVariant } from '../../../helpers/constants/design-system';
import NetworkAccountBalanceHeader from '../network-account-balance-header/network-account-balance-header';
import DepositPopover from '../deposit-popover/deposit-popover';
@ -230,7 +230,7 @@ const ConfirmPageContainer = (props) => {
<ActionableMessage
message={
isBuyableChain ? (
<Typography variant={TYPOGRAPHY.H7} align="left">
<Typography variant={TypographyVariant.H7} align="left">
{t('insufficientCurrencyBuyOrDeposit', [
nativeCurrency,
networkName,
@ -245,7 +245,7 @@ const ConfirmPageContainer = (props) => {
])}
</Typography>
) : (
<Typography variant={TYPOGRAPHY.H7} align="left">
<Typography variant={TypographyVariant.H7} align="left">
{t('insufficientCurrencyDeposit', [
nativeCurrency,
networkName,

21
ui/components/app/confirm-page-container/flask/snap-insight.js
View File

@ -4,12 +4,12 @@ import PropTypes from 'prop-types';
import Preloader from '../../../ui/icon/preloader/preloader-icon.component';
import Typography from '../../../ui/typography/typography';
import {
ALIGN_ITEMS,
COLORS,
AlignItems,
FLEX_DIRECTION,
JUSTIFY_CONTENT,
JustifyContent,
TEXT_ALIGN,
TYPOGRAPHY,
TextColor,
TypographyVariant,
} from '../../../../helpers/constants/design-system';
import { useI18nContext } from '../../../../hooks/useI18nContext';
import { useTransactionInsightSnap } from '../../../../hooks/flask/useTransactionInsightSnap';
@ -40,8 +40,8 @@ export const SnapInsight = ({ transaction, origin, chainId, selectedSnap }) => {
height="full"
marginTop={hasNoData && 12}
marginBottom={hasNoData && 12}
alignItems={hasNoData && ALIGN_ITEMS.CENTER}
justifyContent={hasNoData && JUSTIFY_CONTENT.CENTER}
alignItems={hasNoData && AlignItems.center}
justifyContent={hasNoData && JustifyContent.center}
textAlign={hasNoData && TEXT_ALIGN.CENTER}
className="snap-insight"
>
@ -54,7 +54,10 @@ export const SnapInsight = ({ transaction, origin, chainId, selectedSnap }) => {
{data && Object.keys(data).length > 0 ? (
<SnapUIRenderer snapId={selectedSnap.id} data={data} />
) : (
<Typography color={COLORS.TEXT_ALTERNATIVE} variant={TYPOGRAPHY.H6}>
<Typography
color={TextColor.textAlternative}
variant={TypographyVariant.H6}
>
{t('snapsNoInsight')}
</Typography>
)}
@ -86,8 +89,8 @@ export const SnapInsight = ({ transaction, origin, chainId, selectedSnap }) => {
<Preloader size={40} />
<Typography
marginTop={3}
color={COLORS.TEXT_ALTERNATIVE}
variant={TYPOGRAPHY.H6}
color={TextColor.textAlternative}
variant={TypographyVariant.H6}
>
{t('snapsInsightLoading')}
</Typography>

25
ui/components/app/confirmation-warning-modal/confirmation-warning-modal.js
View File

@ -10,9 +10,9 @@ import {
DISPLAY,
FLEX_DIRECTION,
FONT_WEIGHT,
JUSTIFY_CONTENT,
TYPOGRAPHY,
ALIGN_ITEMS,
JustifyContent,
TypographyVariant,
AlignItems,
} from '../../../helpers/constants/design-system';
const ConfirmationWarningModal = ({ onSubmit, onCancel }) => {
@ -25,7 +25,7 @@ const ConfirmationWarningModal = ({ onSubmit, onCancel }) => {
<Box
display={DISPLAY.FLEX}
flexDirection={FLEX_DIRECTION.COLUMN}
justifyContent={JUSTIFY_CONTENT.SPACE_BETWEEN}
justifyContent={JustifyContent.spaceBetween}
className="confirmation-warning-modal__footer"
>
<Button
@ -48,40 +48,43 @@ const ConfirmationWarningModal = ({ onSubmit, onCancel }) => {
<Box
display={DISPLAY.FLEX}
flexDirection={FLEX_DIRECTION.ROW}
alignItems={ALIGN_ITEMS.CENTER}
alignItems={AlignItems.center}
padding={3}
margin={0}
className="confirmation-warning-modal__content__header"
>
<i className="fa fa-exclamation-triangle confirmation-warning-modal__content__header__warning-icon" />
<Typography variant={TYPOGRAPHY.H4} fontWeight={FONT_WEIGHT.BOLD}>
<Typography
variant={TypographyVariant.H4}
fontWeight={FONT_WEIGHT.BOLD}
>
{t('addEthereumChainWarningModalTitle')}
</Typography>
</Box>
<Box marginLeft={6} marginRight={6} marginTop={0} marginBottom={3}>
<Typography marginTop={4} variant={TYPOGRAPHY.H6}>
<Typography marginTop={4} variant={TypographyVariant.H6}>
{t('addEthereumChainWarningModalHeader', [
<strong key="part-2">
{t('addEthereumChainWarningModalHeaderPartTwo')}
</strong>,
])}
</Typography>
<Typography marginTop={4} variant={TYPOGRAPHY.H6}>
<Typography marginTop={4} variant={TypographyVariant.H6}>
{t('addEthereumChainWarningModalListHeader')}
</Typography>
<ul>
<li>
<Typography marginTop={2} variant={TYPOGRAPHY.H6}>
<Typography marginTop={2} variant={TypographyVariant.H6}>
{t('addEthereumChainWarningModalListPointOne')}
</Typography>
</li>
<li>
<Typography marginTop={2} variant={TYPOGRAPHY.H6}>
<Typography marginTop={2} variant={TypographyVariant.H6}>
{t('addEthereumChainWarningModalListPointTwo')}
</Typography>
</li>
<li>
<Typography marginTop={2} variant={TYPOGRAPHY.H6}>
<Typography marginTop={2} variant={TypographyVariant.H6}>
{t('addEthereumChainWarningModalListPointThree')}
</Typography>
</li>

8
ui/components/app/connected-status-indicator/connected-status-indicator.js
View File

@ -8,7 +8,7 @@ import {
STATUS_NOT_CONNECTED,
} from '../../../helpers/constants/connected-sites';
import ColorIndicator from '../../ui/color-indicator';
import { COLORS } from '../../../helpers/constants/design-system';
import { Color } from '../../../helpers/constants/design-system';
import { useI18nContext } from '../../../hooks/useI18nContext';
import {
getAddressConnectedSubjectMap,
@ -37,13 +37,13 @@ export default function ConnectedStatusIndicator({ onClick }) {
}
let indicatorType = ColorIndicator.TYPES.OUTLINE;
let indicatorColor = COLORS.ICON_DEFAULT;
let indicatorColor = Color.iconDefault;
if (status === STATUS_CONNECTED) {
indicatorColor = COLORS.SUCCESS_DEFAULT;
indicatorColor = Color.successDefault;
indicatorType = ColorIndicator.TYPES.PARTIAL;
} else if (status === STATUS_CONNECTED_TO_ANOTHER_ACCOUNT) {
indicatorColor = COLORS.ERROR_DEFAULT;
indicatorColor = Color.errorDefault;
}
const text =

8
ui/components/app/custom-spending-cap/custom-spending-cap-tooltip.js
View File

@ -4,9 +4,9 @@ import Box from '../../ui/box';
import Typography from '../../ui/typography';
import Tooltip from '../../ui/tooltip';
import {
COLORS,
TextColor,
DISPLAY,
TYPOGRAPHY,
TypographyVariant,
} from '../../../helpers/constants/design-system';
export const CustomSpendingCapTooltip = ({
@ -19,9 +19,9 @@ export const CustomSpendingCapTooltip = ({
position="top"
html={
<Typography
variant={TYPOGRAPHY.H7}
variant={TypographyVariant.H7}
margin={3}
color={COLORS.TEXT_ALTERNATIVE}
color={TextColor.textAlternative}
className="form-field__heading-title__tooltip"
>
{tooltipContentText}

33
ui/components/app/custom-spending-cap/custom-spending-cap.js
View File

@ -9,16 +9,17 @@ import FormField from '../../ui/form-field';
import Typography from '../../ui/typography';
import { ButtonLink } from '../../component-library';
import {
ALIGN_ITEMS,
COLORS,
AlignItems,
DISPLAY,
FLEX_DIRECTION,
TEXT_ALIGN,
FONT_WEIGHT,
TYPOGRAPHY,
JUSTIFY_CONTENT,
SIZES,
TypographyVariant,
JustifyContent,
Size,
BLOCK_SIZES,
BackgroundColor,
TextColor,
} from '../../../helpers/constants/design-system';
import { getCustomTokenAmount } from '../../../selectors';
import { setCustomTokenAmount } from '../../../ducks/app/app';
@ -72,7 +73,7 @@ export default function CustomSpendingCap({
description: t('inputLogicEqualOrSmallerNumber', [
<Typography
key="custom-spending-cap"
variant={TYPOGRAPHY.H6}
variant={TypographyVariant.H6}
fontWeight={FONT_WEIGHT.BOLD}
className="custom-spending-cap__input-value-and-token-name"
>
@ -146,9 +147,9 @@ export default function CustomSpendingCap({
? t('warningTooltipText', [
<Typography
key="tooltip-text"
variant={TYPOGRAPHY.H7}
variant={TypographyVariant.H7}
fontWeight={FONT_WEIGHT.BOLD}
color={COLORS.ERROR_DEFAULT}
color={TextColor.errorDefault}
>
<i className="fa fa-exclamation-circle" /> {t('beCareful')}
</Typography>,
@ -159,18 +160,18 @@ export default function CustomSpendingCap({
<>
<Box
className="custom-spending-cap"
borderRadius={SIZES.SM}
borderRadius={Size.SM}
paddingTop={2}
paddingRight={6}
paddingLeft={6}
display={DISPLAY.FLEX}
alignItems={ALIGN_ITEMS.FLEX_START}
alignItems={AlignItems.flexStart}
flexDirection={FLEX_DIRECTION.COLUMN}
backgroundColor={COLORS.BACKGROUND_ALTERNATIVE}
backgroundColor={BackgroundColor.backgroundAlternative}
gap={2}
>
<Box
justifyContent={JUSTIFY_CONTENT.CENTER}
justifyContent={JustifyContent.center}
display={DISPLAY.BLOCK}
className="custom-spending-cap__input"
>
@ -210,7 +211,7 @@ export default function CustomSpendingCap({
titleDetail={
showUseDefaultButton && (
<ButtonLink
size={SIZES.AUTO}
size={Size.auto}
onClick={(e) => {
e.preventDefault();
setShowUseDefaultButton(false);
@ -234,7 +235,7 @@ export default function CustomSpendingCap({
})}
>
<ButtonLink
size={SIZES.AUTO}
size={Size.auto}
onClick={(e) => {
e.preventDefault();
handleChange(currentTokenBalance);
@ -249,8 +250,8 @@ export default function CustomSpendingCap({
})}
>
<Typography
color={COLORS.TEXT_DEFAULT}
variant={TYPOGRAPHY.H7}
color={TextColor.textDefault}
variant={TypographyVariant.H7}
boxProps={{ paddingTop: 2, paddingBottom: 2 }}
>
{replaceCommaToDot(value)

12
ui/components/app/deposit-popover/on-ramp-item.js
View File

@ -5,11 +5,11 @@ import Button from '../../ui/button';
import Box from '../../ui/box';
import Typography from '../../ui/typography';
import {
ALIGN_ITEMS,
AlignItems,
DISPLAY,
FLEX_WRAP,
BLOCK_SIZES,
JUSTIFY_CONTENT,
JustifyContent,
} from '../../../helpers/constants/design-system';
const OnRampItem = ({
@ -35,16 +35,16 @@ const OnRampItem = ({
paddingTop={6}
paddingBottom={6}
display={DISPLAY.FLEX}
alignItems={ALIGN_ITEMS.CENTER}
alignItems={AlignItems.center}
flexWrap={FLEX_WRAP.WRAP}
>
<Box
width={[BLOCK_SIZES.HALF, BLOCK_SIZES.HALF, BLOCK_SIZES.ONE_FIFTH]}
display={DISPLAY.FLEX}
justifyContent={[
JUSTIFY_CONTENT.FLEX_START,
JUSTIFY_CONTENT.FLEX_START,
JUSTIFY_CONTENT.CENTER,
JustifyContent.flexStart,
JustifyContent.flexStart,
JustifyContent.center,
]}
paddingLeft={[0, 0, 4]}
paddingRight={[0, 0, 4]}

10
ui/components/app/detected-token/detected-token-address/detected-token-address.js
View File

@ -10,9 +10,9 @@ import Typography from '../../../ui/typography';
import Tooltip from '../../../ui/tooltip';
import {
COLORS,
DISPLAY,
TYPOGRAPHY,
TextColor,
TypographyVariant,
} from '../../../../helpers/constants/design-system';
import { shortenAddress } from '../../../../helpers/utils/util';
@ -23,12 +23,12 @@ const DetectedTokenAddress = ({ tokenAddress }) => {
return (
<Box display={DISPLAY.INLINE_FLEX} className="detected-token-address">
<Typography variant={TYPOGRAPHY.H7} color={COLORS.TEXT_DEFAULT}>
<Typography variant={TypographyVariant.H7} color={TextColor.textDefault}>
{`${t('tokenAddress')}:`}
</Typography>
<Typography
variant={TYPOGRAPHY.H7}
color={COLORS.PRIMARY_DEFAULT}
variant={TypographyVariant.H7}
color={TextColor.primaryDefault}
marginLeft={2}
marginRight={2}
>

11
ui/components/app/detected-token/detected-token-aggregators/detected-token-aggregators.js
View File

@ -9,7 +9,7 @@ import Typography from '../../../ui/typography/typography';
import {
DISPLAY,
FONT_WEIGHT,
TYPOGRAPHY,
TypographyVariant,
} from '../../../../helpers/constants/design-system';
const NUMBER_OF_AGGREGATORS_TO_DISPLAY = 2;
@ -22,11 +22,14 @@ const DetectedTokenAggregators = ({ aggregators }) => {
return (
<Box display={DISPLAY.INLINE_FLEX} className="detected-token-aggregators">
<Typography variant={TYPOGRAPHY.H7} fontWeight={FONT_WEIGHT.NORMAL}>
<Typography
variant={TypographyVariant.H7}
fontWeight={FONT_WEIGHT.NORMAL}
>
{t('fromTokenLists', [
numOfHiddenAggregators > 0 && !displayMore ? (
<Typography
variant={TYPOGRAPHY.H7}
variant={TypographyVariant.H7}
fontWeight={FONT_WEIGHT.NORMAL}
key="detected-token-aggrgators-with-more"
>
@ -44,7 +47,7 @@ const DetectedTokenAggregators = ({ aggregators }) => {
</Typography>
) : (
<Typography
variant={TYPOGRAPHY.H7}
variant={TypographyVariant.H7}
fontWeight={FONT_WEIGHT.NORMAL}
key="detected-token-aggrgators-without-more"
>

6
ui/components/app/detected-token/detected-token-ignored-popover/detected-token-ignored-popover.js
View File

@ -6,7 +6,7 @@ import { useI18nContext } from '../../../../hooks/useI18nContext';
import Popover from '../../../ui/popover';
import Button from '../../../ui/button';
import Typography from '../../../ui/typography/typography';
import { TYPOGRAPHY } from '../../../../helpers/constants/design-system';
import { TypographyVariant } from '../../../../helpers/constants/design-system';
const DetectedTokenIgnoredPopover = ({
partiallyIgnoreDetectedTokens,
@ -49,8 +49,8 @@ const DetectedTokenIgnoredPopover = ({
footer={footer}
>
<Typography
variant={TYPOGRAPHY.H6}
tag={TYPOGRAPHY.H6}
variant={TypographyVariant.H6}
tag={TypographyVariant.H6}
marginTop={0}
marginRight={5}
marginBottom={7}

11
ui/components/app/detected-token/detected-token-values/detected-token-values.js
View File

@ -7,9 +7,9 @@ import Typography from '../../../ui/typography';
import CheckBox from '../../../ui/check-box';
import {
COLORS,
DISPLAY,
TYPOGRAPHY,
TextColor,
TypographyVariant,
} from '../../../../helpers/constants/design-system';
import { useTokenTracker } from '../../../../hooks/useTokenTracker';
import { useTokenFiatAmount } from '../../../../hooks/useTokenFiatAmount';
@ -46,10 +46,13 @@ const DetectedTokenValues = ({
return (
<Box display={DISPLAY.INLINE_FLEX} className="detected-token-values">
<Box marginBottom={1}>
<Typography variant={TYPOGRAPHY.H4}>
<Typography variant={TypographyVariant.H4}>
{`${balanceString || '0'} ${token.symbol}`}
</Typography>
<Typography variant={TYPOGRAPHY.H7} color={COLORS.TEXT_ALTERNATIVE}>
<Typography
variant={TypographyVariant.H7}
color={TextColor.textAlternative}
>
{useCurrencyRateCheck
? formattedFiatBalance || '$0' // since formattedFiatBalance will be when teh conversion rate is not obtained, should be replace the `$0` with `N/A`
: formattedFiatBalance}

8
ui/components/app/dropdowns/network-dropdown.js
View File

@ -13,7 +13,7 @@ import {
import { isPrefixedFormattedHexString } from '../../../../shared/modules/network.utils';
import ColorIndicator from '../../ui/color-indicator';
import { COLORS, SIZES } from '../../../helpers/constants/design-system';
import { IconColor, Size } from '../../../helpers/constants/design-system';
import { getShowTestNetworks } from '../../../selectors';
import { getEnvironmentType } from '../../../../app/scripts/lib/util';
import { ENVIRONMENT_TYPE_POPUP } from '../../../../shared/constants/app';
@ -180,8 +180,8 @@ class NetworkDropdown extends Component {
<div className="network-check__transparent">✓</div>
)}
<ColorIndicator
color={opts.isLocalHost ? 'localhost' : COLORS.ICON_MUTED}
size={SIZES.LG}
color={opts.isLocalHost ? 'localhost' : IconColor.iconMuted}
size={Size.LG}
type={ColorIndicator.TYPES.FILLED}
/>
<span
@ -249,7 +249,7 @@ class NetworkDropdown extends Component {
)}
<ColorIndicator
color={network}
size={SIZES.LG}
size={Size.LG}
type={ColorIndicator.TYPES.FILLED}
/>
<span

12
ui/components/app/edit-gas-display/edit-gas-display.component.js
View File

@ -8,10 +8,10 @@ import Button from '../../ui/button';
import Typography from '../../ui/typography/typography';
import {
COLORS,
TEXT_ALIGN,
TYPOGRAPHY,
TypographyVariant,
FONT_WEIGHT,
TextColor,
} from '../../../helpers/constants/design-system';
import { areDappSuggestedAndTxParamGasFeesTheSame } from '../../../helpers/utils/confirm-tx.util';
@ -98,8 +98,8 @@ export default function EditGasDisplay({
{mode === EditGasModes.speedUp && (
<div className="edit-gas-display__top-tooltip">
<Typography
color={COLORS.TEXT_DEFAULT}
variant={TYPOGRAPHY.H8}
color={TextColor.textDefault}
variant={TypographyVariant.H8}
fontWeight={FONT_WEIGHT.BOLD}
>
{t('speedUpTooltipText')}{' '}
@ -111,8 +111,8 @@ export default function EditGasDisplay({
</div>
)}
<Typography
color={COLORS.TEXT_DEFAULT}
variant={TYPOGRAPHY.H1}
color={TextColor.textDefault}
variant={TypographyVariant.H1}
align={TEXT_ALIGN.CENTER}
>
{estimatedMinimumNative}

15
ui/components/app/edit-gas-fee-button/edit-gas-fee-button.js
View File

@ -2,7 +2,10 @@ import React from 'react';
import PropTypes from 'prop-types';
import { EditGasModes, PriorityLevels } from '../../../../shared/constants/gas';
import { COLORS, TYPOGRAPHY } from '../../../helpers/constants/design-system';
import {
TextColor,
TypographyVariant,
} from '../../../helpers/constants/design-system';
import { PRIORITY_LEVEL_ICON_MAP } from '../../../helpers/constants/gas';
import { useGasFeeContext } from '../../../contexts/gasFee';
import { useI18nContext } from '../../../hooks/useI18nContext';
@ -79,19 +82,19 @@ export default function EditGasFeeButton({ userAcknowledgedGasMissing }) {
<div className="edit-gas-fee-button__tooltip">
{transaction?.origin && (
<Typography
variant={TYPOGRAPHY.H7}
color={COLORS.TEXT_ALTERNATIVE}
variant={TypographyVariant.H7}
color={TextColor.textAlternative}
>
{t('dappSuggestedTooltip', [transaction.origin])}
</Typography>
)}
<Typography variant={TYPOGRAPHY.H7}>
<Typography variant={TypographyVariant.H7}>
<b>{t('maxBaseFee')}</b> {maxFeePerGas}
</Typography>
<Typography variant={TYPOGRAPHY.H7}>
<Typography variant={TypographyVariant.H7}>
<b>{t('maxPriorityFee')}</b> {maxPriorityFeePerGas}
</Typography>
<Typography variant={TYPOGRAPHY.H7}>
<Typography variant={TypographyVariant.H7}>
<b>{t('gasLimit')}</b> {gasLimit}
</Typography>
</div>

11
ui/components/app/edit-gas-fee-popover/edit-gas-fee-popover.js
View File

@ -8,7 +8,10 @@ import ErrorMessage from '../../ui/error-message';
import Popover from '../../ui/popover';
import Typography from '../../ui/typography/typography';
import { COLORS, TYPOGRAPHY } from '../../../helpers/constants/design-system';
import {
TextColor,
TypographyVariant,
} from '../../../helpers/constants/design-system';
import { INSUFFICIENT_FUNDS_ERROR_KEY } from '../../../helpers/constants/error-keys';
import { useGasFeeContext } from '../../../contexts/gasFee';
import AppLoadingSpinner from '../app-loading-spinner';
@ -84,9 +87,9 @@ const EditGasFeePopover = () => {
<Typography
className="edit-gas-fee-popover__know-more"
align="center"
color={COLORS.TEXT_ALTERNATIVE}
tag={TYPOGRAPHY.Paragraph}
variant={TYPOGRAPHY.H7}
color={TextColor.textAlternative}
tag={TypographyVariant.paragraph}
variant={TypographyVariant.H7}
>
{t('learnMoreAboutGas', [
<a

26
ui/components/app/edit-gas-fee-popover/edit-gas-tooltip/edit-gas-tooltip.js
View File

@ -5,9 +5,9 @@ import {
PriorityLevels,
} from '../../../../../shared/constants/gas';
import {
COLORS,
FONT_WEIGHT,
TYPOGRAPHY,
TextColor,
TypographyVariant,
} from '../../../../helpers/constants/design-system';
import { isMetamaskSuggestedGasEstimate } from '../../../../helpers/utils/gas';
import { roundToDecimalPlacesRemovingExtraZeroes } from '../../../../helpers/utils/util';
@ -107,7 +107,9 @@ const EditGasToolTip = ({
) : null}
{toolTipMessage && (
<div className="edit-gas-tooltip__container__message">
<Typography variant={TYPOGRAPHY.H7}>{toolTipMessage}</Typography>
<Typography variant={TypographyVariant.H7}>
{toolTipMessage}
</Typography>
</div>
)}
{priorityLevel === PriorityLevels.custom ||
@ -115,7 +117,7 @@ const EditGasToolTip = ({
<div className="edit-gas-tooltip__container__values">
<div>
<Typography
variant={TYPOGRAPHY.H7}
variant={TypographyVariant.H7}
fontWeight={FONT_WEIGHT.BOLD}
className="edit-gas-tooltip__container__label"
>
@ -123,8 +125,8 @@ const EditGasToolTip = ({
</Typography>
{maxFeePerGas && (
<Typography
variant={TYPOGRAPHY.H7}
color={COLORS.TEXT_ALTERNATIVE}
variant={TypographyVariant.H7}
color={TextColor.textAlternative}
className="edit-gas-tooltip__container__value"
>
{roundToDecimalPlacesRemovingExtraZeroes(maxFeePerGas, 4)}
@ -133,7 +135,7 @@ const EditGasToolTip = ({
</div>
<div>
<Typography
variant={TYPOGRAPHY.H7}
variant={TypographyVariant.H7}
fontWeight={FONT_WEIGHT.BOLD}
className="edit-gas-tooltip__container__label"
>
@ -141,8 +143,8 @@ const EditGasToolTip = ({
</Typography>
{maxPriorityFeePerGas && (
<Typography
variant={TYPOGRAPHY.H7}
color={COLORS.TEXT_ALTERNATIVE}
variant={TypographyVariant.H7}
color={TextColor.textAlternative}
className="edit-gas-tooltip__container__value"
>
{roundToDecimalPlacesRemovingExtraZeroes(
@ -154,7 +156,7 @@ const EditGasToolTip = ({
</div>
<div>
<Typography
variant={TYPOGRAPHY.H7}
variant={TypographyVariant.H7}
fontWeight={FONT_WEIGHT.BOLD}
className="edit-gas-tooltip__container__label"
>
@ -162,8 +164,8 @@ const EditGasToolTip = ({
</Typography>
{gasLimit && (
<Typography
variant={TYPOGRAPHY.H7}
color={COLORS.TEXT_ALTERNATIVE}
variant={TypographyVariant.H7}
color={TextColor.textAlternative}
className="edit-gas-tooltip__container__value"
>
{roundToDecimalPlacesRemovingExtraZeroes(gasLimit, 4)}

8
ui/components/app/edit-gas-fee-popover/network-statistics/network-statistics.js
View File

@ -1,8 +1,8 @@
import React, { useContext } from 'react';
import {
COLORS,
FONT_WEIGHT,
TYPOGRAPHY,
TextColor,
TypographyVariant,
} from '../../../../helpers/constants/design-system';
import { isNullish } from '../../../../helpers/utils/util';
import { formatGasFeeOrFeeRange } from '../../../../helpers/utils/gas';
@ -30,11 +30,11 @@ const NetworkStatistics = () => {
return (
<div className="network-statistics">
<Typography
color={COLORS.TEXT_ALTERNATIVE}
color={TextColor.textAlternative}
fontWeight={FONT_WEIGHT.BOLD}
marginTop={3}
marginBottom={3}
variant={TYPOGRAPHY.H8}
variant={TypographyVariant.H8}
>
{t('networkStatus')}
</Typography>

27
ui/components/app/flask/copyable/copyable.js
View File

@ -5,13 +5,14 @@ import IconCopied from '../../../ui/icon/icon-copied';
import IconCopy from '../../../ui/icon/icon-copy';
import Typography from '../../../ui/typography';
import {
ALIGN_ITEMS,
BORDER_RADIUS,
COLORS,
JUSTIFY_CONTENT,
AlignItems,
BorderRadius,
JustifyContent,
OVERFLOW_WRAP,
FLEX_DIRECTION,
TYPOGRAPHY,
TypographyVariant,
BackgroundColor,
TextColor,
} from '../../../../helpers/constants/design-system';
import { useCopyToClipboard } from '../../../../hooks/useCopyToClipboard';
@ -20,18 +21,18 @@ export const Copyable = ({ text }) => {
return (
<Box
className="copyable"
backgroundColor={COLORS.BACKGROUND_ALTERNATIVE}
alignItems={ALIGN_ITEMS.STRETCH}
justifyContent={JUSTIFY_CONTENT.SPACE_BETWEEN}
borderRadius={BORDER_RADIUS.SM}
backgroundColor={BackgroundColor.backgroundAlternative}
alignItems={AlignItems.stretch}
justifyContent={JustifyContent.spaceBetween}
borderRadius={BorderRadius.SM}
paddingLeft={4}
paddingRight={4}
paddingTop={2}
paddingBottom={2}
>
<Typography
variant={TYPOGRAPHY.H6}
color={COLORS.TEXT_ALTERNATIVE}
variant={TypographyVariant.H6}
color={TextColor.textAlternative}
marginRight={2}
overflowWrap={OVERFLOW_WRAP.ANYWHERE}
>
@ -39,8 +40,8 @@ export const Copyable = ({ text }) => {
</Typography>
<Box
flexDirection={FLEX_DIRECTION.COLUMN}
alignItems={ALIGN_ITEMS.CENTER}
justifyContent={JUSTIFY_CONTENT.FLEX_START}
alignItems={AlignItems.center}
justifyContent={JustifyContent.flexStart}
marginTop={2}
marginBottom={1}
>

14
ui/components/app/flask/snap-content-footer/snap-content-footer.js
View File

@ -7,10 +7,10 @@ import Typography from '../../../ui/typography/typography';
import { useI18nContext } from '../../../../hooks/useI18nContext';
import { SNAPS_VIEW_ROUTE } from '../../../../helpers/constants/routes';
import {
COLORS,
TYPOGRAPHY,
JUSTIFY_CONTENT,
ALIGN_ITEMS,
TypographyVariant,
JustifyContent,
AlignItems,
TextColor,
} from '../../../../helpers/constants/design-system';
import Button from '../../../ui/button';
import Box from '../../../ui/box/box';
@ -26,14 +26,14 @@ export default function SnapContentFooter({ snapName, snapId }) {
// TODO: add truncation to the snap name, need to pick a character length at which to cut off
return (
<Box
justifyContent={JUSTIFY_CONTENT.CENTER}
alignItems={ALIGN_ITEMS.CENTER}
justifyContent={JustifyContent.center}
alignItems={AlignItems.center}
paddingTop={4}
paddingBottom={4}
className="snap-content-footer"
>
<i className="fas fa-exclamation-circle fa-sm" />
<Typography color={COLORS.TEXT_MUTED} variant={TYPOGRAPHY.H7}>
<Typography color={TextColor.textMuted} variant={TypographyVariant.H7}>
{t('snapContent', [
<Button type="inline" onClick={handleNameClick} key="button">
{snapName}

31
ui/components/app/flask/snap-delineator/snap-delineator.js
View File

@ -2,12 +2,15 @@ import React from 'react';
import PropTypes from 'prop-types';
import { useI18nContext } from '../../../../hooks/useI18nContext';
import {
ALIGN_ITEMS,
BORDER_RADIUS,
BORDER_STYLE,
COLORS,
SIZES,
TEXT,
BorderStyle,
Size,
BorderColor,
BorderRadius,
AlignItems,
BackgroundColor,
IconColor,
TextVariant,
TextColor,
} from '../../../../helpers/constants/design-system';
import Box from '../../../ui/box';
import { Icon, Text } from '../../../component-library';
@ -18,23 +21,23 @@ export const SnapDelineator = ({ snapName, children }) => {
return (
<Box
className="snap-delineator__wrapper"
borderStyle={BORDER_STYLE.SOLID}
borderColor={COLORS.BORDER_MUTED}
borderRadius={BORDER_RADIUS.LG}
borderStyle={BorderStyle.solid}
borderColor={BorderColor.borderMuted}
borderRadius={BorderRadius.LG}
>
<Box
className="snap-delineator__header"
alignItems={ALIGN_ITEMS.CENTER}
backgroundColor={COLORS.INFO_MUTED}
alignItems={AlignItems.center}
backgroundColor={BackgroundColor.infoMuted}
paddingLeft={2}
paddingRight={2}
paddingTop={1}
paddingBottom={1}
>
<Icon name="snaps" color={COLORS.INFO_DEFAULT} size={SIZES.SM} />
<Icon name="snaps" color={IconColor.infoDefault} size={Size.SM} />
<Text
variant={TEXT.BODY_SM}
color={COLORS.INFO_DEFAULT}
variant={TextVariant.bodySm}
color={TextColor.infoDefault}
className="snap-delineator__header__text"
marginLeft={1}
marginTop={0}

7
ui/components/app/flask/snap-install-warning/snap-install-warning.js
View File

@ -5,7 +5,7 @@ import classnames from 'classnames';
import { useI18nContext } from '../../../../hooks/useI18nContext';
import CheckBox from '../../../ui/check-box/check-box.component';
import Typography from '../../../ui/typography/typography';
import { TYPOGRAPHY } from '../../../../helpers/constants/design-system';
import { TypographyVariant } from '../../../../helpers/constants/design-system';
import Popover from '../../../ui/popover';
import Button from '../../../ui/button';
@ -69,7 +69,10 @@ export default function SnapInstallWarning({ onCancel, onSubmit, warnings }) {
contentProps={{ padding: [6, 4] }}
footerProps={{ padding: [4, 6] }}
>
<Typography variant={TYPOGRAPHY.H6} boxProps={{ paddingBottom: 4 }}>
<Typography
variant={TypographyVariant.H6}
boxProps={{ paddingBottom: 4 }}
>
{warnings.length > 1
? t('snapInstallWarningCheckPlural')
: t('snapInstallWarningCheck')}

4
ui/components/app/flask/snap-remove-warning/snap-remove-warning.js
View File

@ -2,7 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types';
import { useI18nContext } from '../../../../hooks/useI18nContext';
import Typography from '../../../ui/typography/typography';
import { TYPOGRAPHY } from '../../../../helpers/constants/design-system';
import { TypographyVariant } from '../../../../helpers/constants/design-system';
import Box from '../../../ui/box/box';
import Popover from '../../../ui/popover';
import Button from '../../../ui/button';
@ -41,7 +41,7 @@ export default function SnapRemoveWarning({ onCancel, onSubmit, snapName }) {
headerProps={{ padding: [6, 4, 0, 6] }}
>
<Box paddingRight={4} paddingBottom={4} paddingLeft={6}>
<Typography variant={TYPOGRAPHY.H4}>
<Typography variant={TypographyVariant.H4}>
{t('removeSnapConfirmation', [snapName])}
</Typography>
</Box>

46
ui/components/app/flask/snap-settings-card/snap-settings-card.js
View File

@ -16,13 +16,15 @@ import Button from '../../../ui/button';
import Tooltip from '../../../ui/tooltip';
import {
COLORS,
TYPOGRAPHY,
Color,
TypographyVariant,
FONT_WEIGHT,
ALIGN_ITEMS,
JUSTIFY_CONTENT,
AlignItems,
JustifyContent,
DISPLAY,
TEXT_ALIGN,
TextColor,
BackgroundColor,
} from '../../../../helpers/constants/design-system';
const STATUSES = {
@ -33,10 +35,10 @@ const STATUSES = {
};
const STATUS_COLORS = {
[STATUSES.INSTALLING]: COLORS.WARNING_DEFAULT,
[STATUSES.RUNNING]: COLORS.SUCCESS_DEFAULT,
[STATUSES.STOPPED]: COLORS.ICON_MUTED,
[STATUSES.CRASHED]: COLORS.ERROR_DEFAULT,
[STATUSES.INSTALLING]: Color.warningDefault,
[STATUSES.RUNNING]: Color.successDefault,
[STATUSES.STOPPED]: Color.infoMuted,
[STATUSES.CRASHED]: Color.errorDefault,
};
const SnapSettingsCard = ({
@ -65,7 +67,7 @@ const SnapSettingsCard = ({
>
<Box
display={DISPLAY.FLEX}
alignItems={ALIGN_ITEMS.CENTER}
alignItems={AlignItems.center}
marginBottom={4}
>
{(icon || name) && (
@ -81,8 +83,8 @@ const SnapSettingsCard = ({
marginTop: 0,
marginBottom: 0,
}}
color={COLORS.TEXT_DEFAULT}
variant={TYPOGRAPHY.H4}
color={TextColor.textDefault}
variant={TypographyVariant.H4}
fontWeight={FONT_WEIGHT.BOLD}
className="snap-settings-card__title"
>
@ -100,8 +102,8 @@ const SnapSettingsCard = ({
</Box>
</Box>
<Typography
variant={TYPOGRAPHY.Paragraph}
color={COLORS.TEXT_ALTERNATIVE}
variant={TypographyVariant.paragraph}
color={TextColor.textAlternative}
fontWeight={FONT_WEIGHT.NORMAL}
className="snap-settings-card__body"
boxProps={{
@ -116,8 +118,8 @@ const SnapSettingsCard = ({
<Box marginBottom={4}>
<Box
display={DISPLAY.FLEX}
alignItems={ALIGN_ITEMS.CENTER}
justifyContent={JUSTIFY_CONTENT.SPACE_BETWEEN}
alignItems={AlignItems.center}
justifyContent={JustifyContent.spaceBetween}
marginBottom={4}
>
<Box>
@ -141,25 +143,25 @@ const SnapSettingsCard = ({
}
label={status}
labelProps={{
color: COLORS.TEXT_ALTERNATIVE,
color: Color.textAlternative,
margin: [0, 1],
}}
backgroundColor={COLORS.BACKGROUND_ALTERNATIVE}
backgroundColor={BackgroundColor.backgroundAlternative}
className="snap-settings-card__chip"
{...chipProps}
/>
</Tooltip>
</Box>
</Box>
<Box display={DISPLAY.FLEX} alignItems={ALIGN_ITEMS.CENTER}>
<Box display={DISPLAY.FLEX} alignItems={AlignItems.center}>
{(dateAdded || version) && (
<>
<Typography
boxProps={{
margin: [0, 0],
}}
color={COLORS.TEXT_MUTED}
variant={TYPOGRAPHY.H8}
color={TextColor.textMuted}
variant={TypographyVariant.H8}
fontWeight={FONT_WEIGHT.NORMAL}
as="span"
className="snap-settings-card__date-added"
@ -173,8 +175,8 @@ const SnapSettingsCard = ({
paddingLeft: 2,
margin: [0, 0],
}}
color={COLORS.TEXT_MUTED}
variant={TYPOGRAPHY.H7}
color={TextColor.textMuted}
variant={TypographyVariant.H7}
fontWeight={FONT_WEIGHT.NORMAL}
align={TEXT_ALIGN.CENTER}
as="span"

4
ui/components/app/flask/snap-ui-markdown/snap-ui-markdown.js
View File

@ -1,13 +1,13 @@
import React from 'react';
import PropTypes from 'prop-types';
import ReactMarkdown from 'react-markdown';
import { TYPOGRAPHY } from '../../../../helpers/constants/design-system';
import { TypographyVariant } from '../../../../helpers/constants/design-system';
import Typography from '../../../ui/typography/typography';
const Paragraph = (props) => (
<Typography
{...props}
variant={TYPOGRAPHY.H6}
variant={TypographyVariant.H6}
className="snap-ui-markdown__text"
/>
);

4
ui/components/app/flask/snap-ui-renderer/snap-ui-renderer.js
View File

@ -5,7 +5,7 @@ import nanoid from 'nanoid';
import { isComponent } from '@metamask/snaps-ui';
import MetaMaskTemplateRenderer from '../../metamask-template-renderer/metamask-template-renderer';
import {
TYPOGRAPHY,
TypographyVariant,
FONT_WEIGHT,
DISPLAY,
FLEX_DIRECTION,
@ -31,7 +31,7 @@ export const UI_MAPPING = {
element: 'Typography',
children: props.value,
props: {
variant: TYPOGRAPHY.H3,
variant: TypographyVariant.H3,
fontWeight: FONT_WEIGHT.BOLD,
},
}),

17
ui/components/app/flask/snaps-authorship-pill/snaps-authorship-pill.js
View File

@ -5,9 +5,10 @@ import Chip from '../../../ui/chip';
import Box from '../../../ui/box';
import Typography from '../../../ui/typography';
import {
COLORS,
TYPOGRAPHY,
TypographyVariant,
TEXT_ALIGN,
BackgroundColor,
TextColor,
} from '../../../../helpers/constants/design-system';
import { useI18nContext } from '../../../../hooks/useI18nContext';
@ -46,13 +47,13 @@ const SnapsAuthorshipPill = ({ snapId, version, className }) => {
version && (
<Box
className="snaps-authorship-version"
backgroundColor={COLORS.PRIMARY_DEFAULT}
backgroundColor={BackgroundColor.primaryDefault}
paddingLeft={2}
paddingRight={2}
>
<Typography
color={COLORS.PRIMARY_INVERSE}
variant={TYPOGRAPHY.H7}
color={TextColor.primaryInverse}
variant={TypographyVariant.H7}
align={TEXT_ALIGN.CENTER}
as="span"
className="version"
@ -62,13 +63,13 @@ const SnapsAuthorshipPill = ({ snapId, version, className }) => {
</Box>
)
}
backgroundColor={COLORS.BACKGROUND_DEFAULT}
backgroundColor={BackgroundColor.backgroundDefault}
>
<Typography
className="chip__label"
variant={TYPOGRAPHY.H7}
variant={TypographyVariant.H7}
as="span"
color={COLORS.TEXT_ALTERNATIVE}
color={TextColor.textAlternative}
title={packageName}
>
{packageName}

8
ui/components/app/flask/update-snap-permission-list/update-snap-permission-list.js
View File

@ -4,7 +4,7 @@ import { getPermissionDescription } from '../../../../helpers/utils/permission';
import { useI18nContext } from '../../../../hooks/useI18nContext';
import { formatDate } from '../../../../helpers/utils/util';
import Typography from '../../../ui/typography/typography';
import { COLORS } from '../../../../helpers/constants/design-system';
import { TextColor } from '../../../../helpers/constants/design-system';
export default function UpdateSnapPermissionList({
approvedPermissions,
@ -29,7 +29,7 @@ export default function UpdateSnapPermissionList({
<div className="permission-description">
{label}
<Typography
color={COLORS.TEXT_ALTERNATIVE}
color={TextColor.textAlternative}
className="permission-description-subtext"
boxProps={{ paddingTop: 1 }}
>
@ -57,7 +57,7 @@ export default function UpdateSnapPermissionList({
<div className="permission-description">
{label}
<Typography
color={COLORS.TEXT_ALTERNATIVE}
color={TextColor.textAlternative}
boxProps={{ paddingTop: 1 }}
className="permission-description-subtext"
>
@ -85,7 +85,7 @@ export default function UpdateSnapPermissionList({
<div className="permission-description">
{label}
<Typography
color={COLORS.TEXT_ALTERNATIVE}
color={TextColor.textAlternative}
boxProps={{ paddingTop: 1 }}
className="permission-description-subtext"
>

8
ui/components/app/gas-details-item/gas-details-item-title/gas-details-item-title.js
View File

@ -1,7 +1,7 @@
import React from 'react';
import { useSelector } from 'react-redux';
import { TYPOGRAPHY } from '../../../../helpers/constants/design-system';
import { TypographyVariant } from '../../../../helpers/constants/design-system';
import { useI18nContext } from '../../../../hooks/useI18nContext';
import { getIsMainnet } from '../../../../selectors';
import Box from '../../../ui/box';
@ -21,15 +21,15 @@ const GasDetailsItemTitle = () => {
<InfoTooltip
contentText={
<>
<Typography variant={TYPOGRAPHY.H7}>
<Typography variant={TypographyVariant.H7}>
{t('transactionDetailGasTooltipIntro', [
isMainnet ? t('networkNameEthereum') : '',
])}
</Typography>
<Typography variant={TYPOGRAPHY.H7}>
<Typography variant={TypographyVariant.H7}>
{t('transactionDetailGasTooltipExplanation')}
</Typography>
<Typography variant={TYPOGRAPHY.H7}>
<Typography variant={TypographyVariant.H7}>
<a
href="https://community.metamask.io/t/what-is-gas-why-do-transactions-take-so-long/3172"
target="_blank"

4
ui/components/app/gas-details-item/gas-details-item.js
View File

@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
import classNames from 'classnames';
import { useSelector } from 'react-redux';
import { COLORS } from '../../../helpers/constants/design-system';
import { TextColor } from '../../../helpers/constants/design-system';
import { PRIMARY, SECONDARY } from '../../../helpers/constants/common';
import { getPreferences, getUseCurrencyRateCheck } from '../../../selectors';
import { useGasFeeContext } from '../../../contexts/gasFee';
@ -39,7 +39,7 @@ const GasDetailsItem = ({ userAcknowledgedGasMissing = false }) => {
<TransactionDetailItem
key="gas-item"
detailTitle={<GasDetailsItemTitle />}
detailTitleColor={COLORS.TEXT_DEFAULT}
detailTitleColor={TextColor.textDefault}
detailText={
useCurrencyRateCheck && (
<div className="gas-details-item__currency-container">

6
ui/components/app/gas-timing/gas-timing.component.js
View File

@ -18,7 +18,7 @@ import {
import Typography from '../../ui/typography/typography';
import {
TYPOGRAPHY,
TypographyVariant,
FONT_WEIGHT,
} from '../../../helpers/constants/design-system';
@ -99,7 +99,7 @@ export default function GasTiming({
) {
return (
<Typography
variant={TYPOGRAPHY.H7}
variant={TypographyVariant.H7}
fontWeight={FONT_WEIGHT.BOLD}
className={classNames('gas-timing', 'gas-timing--negative')}
>
@ -165,7 +165,7 @@ export default function GasTiming({
return (
<Typography
variant={TYPOGRAPHY.H7}
variant={TypographyVariant.H7}
className={classNames('gas-timing', {
[`gas-timing--${attitude}`]: attitude,
})}

8
ui/components/app/hold-to-reveal-button/hold-to-reveal-button.js
View File

@ -4,9 +4,9 @@ import Button from '../../ui/button';
import { I18nContext } from '../../../contexts/i18n';
import Box from '../../ui/box/box';
import {
ALIGN_ITEMS,
AlignItems,
DISPLAY,
JUSTIFY_CONTENT,
JustifyContent,
} from '../../../helpers/constants/design-system';
const radius = 14;
@ -103,8 +103,8 @@ export default function HoldToRevealButton({ buttonText, onLongPressed }) {
</Box>
<Box
display={DISPLAY.FLEX}
alignItems={ALIGN_ITEMS.CENTER}
justifyContent={JUSTIFY_CONTENT.CENTER}
alignItems={AlignItems.center}
justifyContent={JustifyContent.center}
className="hold-to-reveal-button__lock-icon-container"
>
<img

10
ui/components/app/ledger-instruction-field/ledger-instruction-field.js
View File

@ -23,9 +23,9 @@ import Typography from '../../ui/typography/typography';
import Button from '../../ui/button';
import { useI18nContext } from '../../../hooks/useI18nContext';
import {
COLORS,
FONT_WEIGHT,
TYPOGRAPHY,
TextColor,
TypographyVariant,
} from '../../../helpers/constants/design-system';
import Dialog from '../../ui/dialog';
import {
@ -38,7 +38,7 @@ import { attemptLedgerTransportCreation } from '../../../store/actions';
const renderInstructionStep = (
text,
show = true,
color = COLORS.TEXT_DEFAULT,
color = TextColor.textDefault,
) => {
return (
show && (
@ -46,7 +46,7 @@ const renderInstructionStep = (
boxProps={{ margin: 0 }}
color={color}
fontWeight={FONT_WEIGHT.BOLD}
variant={TYPOGRAPHY.H7}
variant={TypographyVariant.H7}
>
{text}
</Typography>
@ -204,7 +204,7 @@ export default function LedgerInstructionField({ showDataInstruction }) {
</span>,
usingWebHID &&
webHidConnectedStatus === WebHIDConnectedStatuses.notConnected,
COLORS.WARNING_DEFAULT,
TextColor.WARNING_DEFAULT,
)}
</div>
</Dialog>

15
ui/components/app/metamask-template-renderer/metamask-template-renderer.stories.js
View File

@ -1,6 +1,9 @@
import React from 'react';
import { object } from '@storybook/addon-knobs';
import { COLORS, TYPOGRAPHY } from '../../../helpers/constants/design-system';
import {
TextColor,
TypographyVariant,
} from '../../../helpers/constants/design-system';
import MetaMaskTemplateRenderer from '.';
export default {
@ -12,7 +15,7 @@ const SECTIONS = {
props: {
margin: 4,
padding: 8,
borderColor: COLORS.PRIMARY_DEFAULT,
borderColor: TextColor.primaryDefault,
borderWidth: 2,
},
children: [
@ -21,8 +24,8 @@ const SECTIONS = {
key: 'A Test String',
children: 'A Test String',
props: {
color: COLORS.TEXT_MUTED,
variant: TYPOGRAPHY.H2,
color: TextColor.textMuted,
variant: TypographyVariant.H2,
},
},
{
@ -30,8 +33,8 @@ const SECTIONS = {
key: 'Some more text',
children: 'Some more text as a paragraph',
props: {
color: COLORS.TEXT_ALTERNATIVE,
variant: TYPOGRAPHY.Paragraph,
color: TextColor.textAlternative,
variant: TypographyVariant.paragraph,
},
},
{

49
ui/components/app/modals/contract-details-modal/contract-details-modal.js
View File

@ -15,12 +15,13 @@ import Popover from '../../../ui/popover';
import Typography from '../../../ui/typography';
import {
FONT_WEIGHT,
TYPOGRAPHY,
TypographyVariant,
DISPLAY,
COLORS,
JUSTIFY_CONTENT,
SIZES,
BORDER_STYLE,
JustifyContent,
Size,
BorderStyle,
BorderColor,
TextColor,
} from '../../../../helpers/constants/design-system';
import { useCopyToClipboard } from '../../../../hooks/useCopyToClipboard';
import UrlIcon from '../../../ui/url-icon/url-icon';
@ -67,16 +68,16 @@ export default function ContractDetailsModal({
>
<Typography
fontWeight={FONT_WEIGHT.BOLD}
variant={TYPOGRAPHY.H5}
variant={TypographyVariant.H5}
display={DISPLAY.FLEX}
boxProps={{ marginTop: 0, marginBottom: 0 }}
>
{t('contractTitle')}
</Typography>
<Typography
variant={TYPOGRAPHY.H7}
variant={TypographyVariant.H7}
display={DISPLAY.FLEX}
color={COLORS.TEXT_ALTERNATIVE}
color={TextColor.textAlternative}
boxProps={{ marginTop: 2, marginBottom: 0 }}
>
{t('contractDescription')}
@ -84,7 +85,7 @@ export default function ContractDetailsModal({
{!isContractRequestingSignature && (
<>
<Typography
variant={TYPOGRAPHY.H6}
variant={TypographyVariant.H6}
display={DISPLAY.FLEX}
marginTop={4}
marginBottom={2}
@ -93,9 +94,9 @@ export default function ContractDetailsModal({
</Typography>
<Box
display={DISPLAY.FLEX}
borderRadius={SIZES.SM}
borderStyle={BORDER_STYLE.SOLID}
borderColor={COLORS.BORDER_DEFAULT}
borderRadius={Size.SM}
borderStyle={BorderStyle.solid}
borderColor={BorderColor.borderDefault}
className="contract-details-modal__content__contract"
>
{nft ? (
@ -115,16 +116,16 @@ export default function ContractDetailsModal({
<Box data-testid="recipient">
<Typography
fontWeight={FONT_WEIGHT.BOLD}
variant={TYPOGRAPHY.H5}
variant={TypographyVariant.H5}
marginTop={4}
>
{tokenName || ellipsify(tokenAddress)}
</Typography>
{tokenName && (
<Typography
variant={TYPOGRAPHY.H6}
variant={TypographyVariant.H6}
display={DISPLAY.FLEX}
color={COLORS.TEXT_ALTERNATIVE}
color={TextColor.textAlternative}
marginTop={0}
marginBottom={4}
>
@ -133,7 +134,7 @@ export default function ContractDetailsModal({
)}
</Box>
<Box
justifyContent={JUSTIFY_CONTENT.FLEX_END}
justifyContent={JustifyContent.flexEnd}
className="contract-details-modal__content__contract__buttons"
>
<Box marginTop={4} marginRight={5}>
@ -188,7 +189,7 @@ export default function ContractDetailsModal({
</>
)}
<Typography
variant={TYPOGRAPHY.H6}
variant={TypographyVariant.H6}
display={DISPLAY.FLEX}
marginTop={4}
marginBottom={2}
@ -201,9 +202,9 @@ export default function ContractDetailsModal({
</Typography>
<Box
display={DISPLAY.FLEX}
borderRadius={SIZES.SM}
borderStyle={BORDER_STYLE.SOLID}
borderColor={COLORS.BORDER_DEFAULT}
borderRadius={Size.SM}
borderStyle={BorderStyle.solid}
borderColor={BorderColor.borderDefault}
className="contract-details-modal__content__contract"
>
{nft ? (
@ -233,16 +234,16 @@ export default function ContractDetailsModal({
<Box data-testid="recipient">
<Typography
fontWeight={FONT_WEIGHT.BOLD}
variant={TYPOGRAPHY.H5}
variant={TypographyVariant.H5}
marginTop={4}
>
{addressBookEntry?.data?.name || ellipsify(toAddress)}
</Typography>
{addressBookEntry?.data?.name && (
<Typography
variant={TYPOGRAPHY.H6}
variant={TypographyVariant.H6}
display={DISPLAY.FLEX}
color={COLORS.TEXT_ALTERNATIVE}
color={TextColor.textAlternative}
marginTop={0}
marginBottom={4}
>
@ -251,7 +252,7 @@ export default function ContractDetailsModal({
)}
</Box>
<Box
justifyContent={JUSTIFY_CONTENT.FLEX_END}
justifyContent={JustifyContent.flexEnd}
className="contract-details-modal__content__contract__buttons"
>
<Box marginTop={4} marginRight={5}>

4
ui/components/app/modals/convert-token-to-nft-modal/convert-token-to-nft-modal.js
View File

@ -4,7 +4,7 @@ import { useHistory } from 'react-router-dom';
import { useDispatch, useSelector } from 'react-redux';
import Modal from '../../modal';
import Typography from '../../../ui/typography';
import { TYPOGRAPHY } from '../../../../helpers/constants/design-system';
import { TypographyVariant } from '../../../../helpers/constants/design-system';
import withModalProps from '../../../../helpers/higher-order-components/with-modal-props';
import { useI18nContext } from '../../../../hooks/useI18nContext';
import {
@ -52,7 +52,7 @@ const ConvertTokenToNFTModal = ({ hideModal, tokenAddress }) => {
>
<div className="convert-token-to-nft-modal">
<Typography
variant={TYPOGRAPHY.H6}
variant={TypographyVariant.H6}
boxProps={{
marginTop: 2,
}}

17
ui/components/app/modals/customize-nonce/customize-nonce.component.js
View File

@ -5,9 +5,9 @@ import TextField from '../../../ui/text-field';
import Button from '../../../ui/button';
import Typography from '../../../ui/typography';
import {
TYPOGRAPHY,
TypographyVariant,
FONT_WEIGHT,
ALIGN_ITEMS,
AlignItems,
BLOCK_SIZES,
DISPLAY,
} from '../../../../helpers/constants/design-system';
@ -47,7 +47,7 @@ const CustomizeNonce = ({
<div className="customize-nonce-modal__main-header">
<Typography
className="customize-nonce-modal__main-title"
variant={TYPOGRAPHY.H4}
variant={TypographyVariant.H4}
fontWeight={FONT_WEIGHT.BOLD}
>
{t('editNonceField')}
@ -61,9 +61,12 @@ const CustomizeNonce = ({
<Box
marginTop={2}
display={DISPLAY.INLINE_FLEX}
alignItems={ALIGN_ITEMS.CENTER}
alignItems={AlignItems.center}
>
<Typography variant={TYPOGRAPHY.H6} fontWeight={FONT_WEIGHT.NORMAL}>
<Typography
variant={TypographyVariant.H6}
fontWeight={FONT_WEIGHT.NORMAL}
>
{t('editNonceMessage')}
<Button
type="link"
@ -77,9 +80,9 @@ const CustomizeNonce = ({
</Typography>
</Box>
<Box marginTop={3}>
<Box alignItems={ALIGN_ITEMS.CENTER} display={DISPLAY.FLEX}>
<Box alignItems={AlignItems.center} display={DISPLAY.FLEX}>
<Typography
variant={TYPOGRAPHY.H6}
variant={TypographyVariant.H6}
fontWeight={FONT_WEIGHT.BOLD}
boxProps={{ width: BLOCK_SIZES.FIVE_SIXTHS }}
>

36
ui/components/app/network-account-balance-header/network-account-balance-header.js
View File

@ -5,12 +5,12 @@ import Identicon from '../../ui/identicon';
import {
DISPLAY,
FLEX_DIRECTION,
TYPOGRAPHY,
COLORS,
TypographyVariant,
FONT_WEIGHT,
ALIGN_ITEMS,
JUSTIFY_CONTENT,
AlignItems,
JustifyContent,
TEXT_ALIGN,
TextColor,
} from '../../../helpers/constants/design-system';
import Box from '../../ui/box/box';
import { I18nContext } from '../../../contexts/i18n';
@ -37,19 +37,19 @@ export default function NetworkAccountBalanceHeader({
flexDirection={FLEX_DIRECTION.ROW}
padding={4}
className="network-account-balance-header"
alignItems={ALIGN_ITEMS.CENTER}
justifyContent={JUSTIFY_CONTENT.SPACE_BETWEEN}
alignItems={AlignItems.center}
justifyContent={JustifyContent.spaceBetween}
>
<Box
display={DISPLAY.FLEX}
flexDirection={FLEX_DIRECTION.ROW}
alignItems={ALIGN_ITEMS.CENTER}
alignItems={AlignItems.center}
gap={2}
>
<Box
display={DISPLAY.FLEX}
flexDirection={FLEX_DIRECTION.ROW}
alignItems={ALIGN_ITEMS.CENTER}
alignItems={AlignItems.center}
>
<Identicon address={accountAddress} diameter={32} />
<IconWithFallback
@ -61,20 +61,20 @@ export default function NetworkAccountBalanceHeader({
</Box>
<Box
display={DISPLAY.FLEX}
alignItems={ALIGN_ITEMS.FLEX_START}
alignItems={AlignItems.flexStart}
flexDirection={FLEX_DIRECTION.COLUMN}
>
<Typography
variant={TYPOGRAPHY.H6}
color={COLORS.TEXT_ALTERNATIVE}
variant={TypographyVariant.H6}
color={TextColor.textAlternative}
marginBottom={0}
>
{networkName}
</Typography>
<Typography
variant={TYPOGRAPHY.H6}
color={COLORS.TEXT_DEFAULT}
variant={TypographyVariant.H6}
color={TextColor.textDefault}
fontWeight={FONT_WEIGHT.BOLD}
marginTop={0}
>
@ -84,20 +84,20 @@ export default function NetworkAccountBalanceHeader({
</Box>
<Box
display={DISPLAY.FLEX}
alignItems={ALIGN_ITEMS.FLEX_END}
alignItems={AlignItems.flexEnd}
flexDirection={FLEX_DIRECTION.COLUMN}
>
<Typography
variant={TYPOGRAPHY.H6}
color={COLORS.TEXT_ALTERNATIVE}
variant={TypographyVariant.H6}
color={TextColor.textAlternative}
marginBottom={0}
>
{t('balance')}
</Typography>
<Typography
variant={TYPOGRAPHY.H6}
color={COLORS.TEXT_DEFAULT}
variant={TypographyVariant.H6}
color={TextColor.textDefault}
fontWeight={FONT_WEIGHT.BOLD}
marginTop={0}
align={TEXT_ALIGN.END}

21
ui/components/app/network-display/network-display.js
View File

@ -10,9 +10,10 @@ import {
import LoadingIndicator from '../../ui/loading-indicator';
import ColorIndicator from '../../ui/color-indicator';
import {
COLORS,
SIZES,
TYPOGRAPHY,
BorderColor,
IconColor,
Size,
TypographyVariant,
} from '../../../helpers/constants/design-system';
import Chip from '../../ui/chip/chip';
import IconCaretDown from '../../ui/icon/icon-caret-down';
@ -39,7 +40,9 @@ export default function NetworkDisplay({
return (
<Chip
dataTestId="network-display"
borderColor={onClick ? COLORS.BORDER_DEFAULT : COLORS.BORDER_MUTED}
borderColor={
onClick ? BorderColor.borderDefault : BorderColor.borderMuted
}
onClick={onClick}
leftIcon={
<LoadingIndicator
@ -50,13 +53,13 @@ export default function NetworkDisplay({
<ColorIndicator
color={
networkType === NETWORK_TYPES.RPC
? COLORS.ICON_MUTED
? IconColor.iconMuted
: networkType
}
size={indicatorSize}
type={ColorIndicator.TYPES.FILLED}
iconClassName={
networkType === NETWORK_TYPES.RPC && indicatorSize !== SIZES.XS
networkType === NETWORK_TYPES.RPC && indicatorSize !== Size.XS
? 'fa fa-question'
: undefined
}
@ -78,7 +81,7 @@ export default function NetworkDisplay({
'network-display--clickable': typeof onClick === 'function',
})}
labelProps={{
variant: TYPOGRAPHY.H7,
variant: TypographyVariant.H7,
...labelProps,
}}
/>
@ -88,7 +91,7 @@ NetworkDisplay.propTypes = {
/**
* The size of the indicator
*/
indicatorSize: PropTypes.oneOf(Object.values(SIZES)),
indicatorSize: PropTypes.oneOf(Object.values(Size)),
/**
* The label props of the label can use most of the Typography props
*/
@ -117,5 +120,5 @@ NetworkDisplay.propTypes = {
};
NetworkDisplay.defaultProps = {
indicatorSize: SIZES.LG,
indicatorSize: Size.LG,
};

4
ui/components/app/network-display/network-display.stories.js
View File

@ -4,7 +4,7 @@ import {
BUILT_IN_NETWORKS,
NETWORK_TYPES,
} from '../../../../shared/constants/network';
import { SIZES } from '../../../helpers/constants/design-system';
import { Size } from '../../../helpers/constants/design-system';
import NetworkDisplay from '.';
@ -14,7 +14,7 @@ export default {
argTypes: {
indicatorSize: {
control: 'select',
options: Object.values(SIZES),
options: Object.values(Size),
},
labelProps: {
control: 'object',

4
ui/components/app/permissions-connect-header/permissions-connect-header.component.js
View File

@ -5,7 +5,7 @@ import SiteOrigin from '../../ui/site-origin';
import Box from '../../ui/box';
import {
FLEX_DIRECTION,
JUSTIFY_CONTENT,
JustifyContent,
} from '../../../helpers/constants/design-system';
///: BEGIN:ONLY_INCLUDE_IN(flask)
import SnapsAuthorshipPill from '../flask/snaps-authorship-pill';
@ -89,7 +89,7 @@ export default class PermissionsConnectHeader extends Component {
<Box
className={classnames('permissions-connect-header', className)}
flexDirection={FLEX_DIRECTION.COLUMN}
justifyContent={JUSTIFY_CONTENT.CENTER}
justifyContent={JustifyContent.center}
{...boxProps}
>
{this.renderHeaderIcon()}

4
ui/components/app/qr-hardware-popover/qr-hardware-sign-request/player.js
View File

@ -6,7 +6,7 @@ import Typography from '../../../ui/typography';
import Box from '../../../ui/box';
import { useI18nContext } from '../../../../hooks/useI18nContext';
import {
ALIGN_ITEMS,
AlignItems,
DISPLAY,
FLEX_DIRECTION,
TEXT_ALIGN,
@ -40,7 +40,7 @@ const Player = ({ type, cbor, cancelQRHardwareSignRequest, toRead }) => {
paddingTop={4}
paddingBottom={4}
display={DISPLAY.FLEX}
alignItems={ALIGN_ITEMS.CENTER}
alignItems={AlignItems.center}
flexDirection={FLEX_DIRECTION.COLUMN}
>
<div

14
ui/components/app/recovery-phrase-reminder/recovery-phrase-reminder.js
View File

@ -9,13 +9,13 @@ import Popover from '../../ui/popover';
import Typography from '../../ui/typography';
// Helpers
import {
COLORS,
DISPLAY,
TEXT_ALIGN,
TYPOGRAPHY,
TypographyVariant,
BLOCK_SIZES,
FONT_WEIGHT,
JUSTIFY_CONTENT,
JustifyContent,
TextColor,
} from '../../../helpers/constants/design-system';
import { ONBOARDING_UNLOCK_ROUTE } from '../../../helpers/constants/routes';
@ -36,9 +36,9 @@ export default function RecoveryPhraseReminder({ onConfirm, hasBackedUp }) {
className="recovery-phrase-reminder"
>
<Typography
color={COLORS.TEXT_DEFAULT}
color={TextColor.textDefault}
align={TEXT_ALIGN.CENTER}
variant={TYPOGRAPHY.Paragraph}
variant={TypographyVariant.paragraph}
boxProps={{ marginTop: 0, marginBottom: 4 }}
>
{t('recoveryPhraseReminderSubText')}
@ -48,7 +48,7 @@ export default function RecoveryPhraseReminder({ onConfirm, hasBackedUp }) {
<li>
<Typography
as="span"
color={COLORS.TEXT_DEFAULT}
color={TextColor.textDefault}
fontWeight={FONT_WEIGHT.BOLD}
>
{t('recoveryPhraseReminderItemOne')}
@ -78,7 +78,7 @@ export default function RecoveryPhraseReminder({ onConfirm, hasBackedUp }) {
</li>
</ul>
</Box>
<Box justifyContent={JUSTIFY_CONTENT.CENTER}>
<Box justifyContent={JustifyContent.center}>
<Box width={BLOCK_SIZES.TWO_FIFTHS}>
<Button type="primary" onClick={onConfirm}>
{t('recoveryPhraseReminderConfirm')}

4
ui/components/app/selected-account/selected-account.component.js
View File

@ -7,7 +7,7 @@ import Tooltip from '../../ui/tooltip';
import { toChecksumHexAddress } from '../../../../shared/modules/hexstring-utils';
import { SECOND } from '../../../../shared/constants/time';
import { Icon, ICON_NAMES, ICON_SIZES } from '../../component-library';
import { COLORS } from '../../../helpers/constants/design-system';
import { IconColor } from '../../../helpers/constants/design-system';
class SelectedAccount extends Component {
state = {
@ -72,7 +72,7 @@ class SelectedAccount extends Component {
: ICON_NAMES.COPY
}
size={ICON_SIZES.SM}
color={COLORS.ICON_ALTERNATIVE}
color={IconColor.iconAlternative}
/>
</div>
</div>

21
ui/components/app/set-approval-for-all-warning/set-approval-for-all-warning.js
View File

@ -10,9 +10,9 @@ import {
DISPLAY,
FLEX_DIRECTION,
FONT_WEIGHT,
JUSTIFY_CONTENT,
TYPOGRAPHY,
COLORS,
JustifyContent,
TextColor,
TypographyVariant,
} from '../../../helpers/constants/design-system';
import Identicon from '../../ui/identicon';
import { shortenAddress } from '../../../helpers/utils/util';
@ -32,7 +32,7 @@ const SetApproveForAllWarning = ({
<Box
display={DISPLAY.FLEX}
flexDirection={FLEX_DIRECTION.COLUMN}
justifyContent={JUSTIFY_CONTENT.SPACE_BETWEEN}
justifyContent={JustifyContent.SPACE_BETWEEN}
className="set-approval-for-all-warning__footer"
>
<Button
@ -61,20 +61,23 @@ const SetApproveForAllWarning = ({
className="set-approval-for-all-warning__content__header"
>
<i className="fa fa-exclamation-triangle set-approval-for-all-warning__content__header__warning-icon" />
<Typography variant={TYPOGRAPHY.H4} fontWeight={FONT_WEIGHT.BOLD}>
<Typography
variant={TypographyVariant.H4}
fontWeight={FONT_WEIGHT.BOLD}
>
{t('yourNFTmayBeAtRisk')}
</Typography>
</Box>
<Box
display={DISPLAY.FLEX}
padding={4}
justifyContent={JUSTIFY_CONTENT.SPACE_BETWEEN}
justifyContent={JustifyContent.spaceBetween}
className="set-approval-for-all-warning__content__account"
>
<Box display={DISPLAY.FLEX}>
<Identicon address={senderAddress} diameter={32} />
<Typography
variant={TYPOGRAPHY.H5}
variant={TypographyVariant.H5}
marginLeft={2}
className="set-approval-for-all-warning__content__account-name"
>
@ -87,11 +90,11 @@ const SetApproveForAllWarning = ({
</Box>
<Typography
color={COLORS.TEXT_ALTERNATIVE}
color={TextColor.textAlternative}
margin={4}
marginTop={4}
marginBottom={4}
variant={TYPOGRAPHY.H6}
variant={TypographyVariant.H6}
>
{t('nftWarningContent', [
<strong

21
ui/components/app/signature-request-original/signature-request-original-warning/signature-request-original-warning.js
View File

@ -10,9 +10,9 @@ import {
DISPLAY,
FLEX_DIRECTION,
FONT_WEIGHT,
JUSTIFY_CONTENT,
TYPOGRAPHY,
COLORS,
JustifyContent,
TextColor,
TypographyVariant,
} from '../../../../helpers/constants/design-system';
import Identicon from '../../../ui/identicon';
import { shortenAddress } from '../../../../helpers/utils/util';
@ -34,20 +34,23 @@ const SignatureRequestOriginalWarning = ({
className="signature-request-warning__content__header"
>
<i className="fa fa-exclamation-triangle signature-request-warning__content__header__warning-icon" />
<Typography variant={TYPOGRAPHY.H4} fontWeight={FONT_WEIGHT.BOLD}>
<Typography
variant={TypographyVariant.H4}
fontWeight={FONT_WEIGHT.BOLD}
>
{t('yourFundsMayBeAtRisk')}
</Typography>
</Box>
<Box
display={DISPLAY.FLEX}
padding={4}
justifyContent={JUSTIFY_CONTENT.SPACE_BETWEEN}
justifyContent={JustifyContent.spaceBetween}
className="signature-request-warning__content__account"
>
<Box display={DISPLAY.FLEX}>
<Identicon address={senderAddress} diameter={32} />
<Typography
variant={TYPOGRAPHY.H5}
variant={TypographyVariant.H5}
marginLeft={2}
className="signature-request-warning__content__account-name"
>
@ -57,11 +60,11 @@ const SignatureRequestOriginalWarning = ({
</Box>
<Typography
color={COLORS.TEXT_ALTERNATIVE}
color={TextColor.textAlternative}
margin={4}
marginTop={4}
marginBottom={4}
variant={TYPOGRAPHY.H6}
variant={TypographyVariant.H6}
>
{t('signatureRequestWarning', [
<a
@ -80,7 +83,7 @@ const SignatureRequestOriginalWarning = ({
<Box
display={DISPLAY.FLEX}
flexDirection={FLEX_DIRECTION.COLUMN}
justifyContent={JUSTIFY_CONTENT.SPACE_BETWEEN}
justifyContent={JustifyContent.spaceBetween}
padding={4}
className="signature-request-warning__footer"
>

10
ui/components/app/signature-request-original/signature-request-original.component.js
View File

@ -13,10 +13,10 @@ import NetworkAccountBalanceHeader from '../network-account-balance-header';
import Typography from '../../ui/typography/typography';
import { PageContainerFooter } from '../../ui/page-container';
import {
TYPOGRAPHY,
TypographyVariant,
FONT_WEIGHT,
COLORS,
TEXT_ALIGN,
TextColor,
} from '../../../helpers/constants/design-system';
import { NETWORK_TYPES } from '../../../../shared/constants/network';
import { Numeric } from '../../../../shared/modules/Numeric';
@ -149,15 +149,15 @@ export default class SignatureRequestOriginal extends Component {
<Typography
className="request-signature__content__title"
variant={TYPOGRAPHY.H3}
variant={TypographyVariant.H3}
fontWeight={FONT_WEIGHT.BOLD}
>
{this.context.t('sigRequest')}
</Typography>
<Typography
className="request-signature__content__subtitle"
variant={TYPOGRAPHY.H7}
color={COLORS.TEXT_ALTERNATIVE}
variant={TypographyVariant.H7}
color={TextColor.textAlternative}
align={TEXT_ALIGN.CENTER}
margin={12}
marginTop={3}

16
ui/components/app/signature-request-siwe/signature-request-siwe-icon/index.js
View File

@ -1,23 +1,23 @@
import React from 'react';
import {
DISPLAY,
ALIGN_ITEMS,
COLORS,
JUSTIFY_CONTENT,
AlignItems,
Color,
JustifyContent,
} from '../../../../helpers/constants/design-system';
import Box from '../../../ui/box';
import { Icon, ICON_NAMES } from '../../../component-library/icon';
import { Icon, ICON_NAMES } from '../../../component-library';
const SignatureRequestSIWEIcon = () => {
return (
<Box
className="signature-request-siwe-icon"
display={DISPLAY.INLINE_FLEX}
alignItems={ALIGN_ITEMS.CENTER}
backgroundColor={COLORS.ERROR_DEFAULT}
justifyContent={JUSTIFY_CONTENT.CENTER}
alignItems={AlignItems.center}
backgroundColor={Color.errorDefault}
justifyContent={JustifyContent.center}
>
<Icon name={ICON_NAMES.DANGER} color={COLORS.ERROR_INVERSE} />
<Icon name={ICON_NAMES.DANGER} color={Color.errorInverse} />
</Box>
);
};

10
ui/components/app/signature-request-siwe/signature-request-siwe-message/signature-request-siwe-message.js
View File

@ -5,7 +5,7 @@ import Typography from '../../../ui/typography';
import {
FLEX_DIRECTION,
TYPOGRAPHY,
TypographyVariant,
} from '../../../../helpers/constants/design-system';
const SignatureRequestSIWEMessage = ({ data }) => {
@ -14,12 +14,16 @@ const SignatureRequestSIWEMessage = ({ data }) => {
<Box flexDirection={FLEX_DIRECTION.COLUMN}>
{data.map(({ label, value }, i) => (
<Box key={i.toString()} marginTop={2} marginBottom={2}>
<Typography variant={TYPOGRAPHY.H4} marginTop={2} marginBottom={2}>
<Typography
variant={TypographyVariant.H4}
marginTop={2}
marginBottom={2}
>
{label}
</Typography>
<Typography
className="signature-request-siwe-message__sub-text"
variant={TYPOGRAPHY.H6}
variant={TypographyVariant.H6}
marginTop={2}
marginBottom={2}
>

19
ui/components/app/signature-request-siwe/signature-request-siwe-tag/index.js
View File

@ -1,12 +1,13 @@
import React from 'react';
import PropTypes from 'prop-types';
import {
TYPOGRAPHY,
SIZES,
TypographyVariant,
Size,
DISPLAY,
ALIGN_ITEMS,
COLORS,
AlignItems,
FONT_WEIGHT,
BackgroundColor,
TextColor,
} from '../../../../helpers/constants/design-system';
import Box from '../../../ui/box';
import Typography from '../../../ui/typography/typography';
@ -17,17 +18,17 @@ const SignatureRequestSIWETag = ({ text }) => {
className="signature-request-siwe-tag"
marginRight={1}
display={DISPLAY.INLINE_FLEX}
alignItems={ALIGN_ITEMS.CENTER}
backgroundColor={COLORS.ERROR_DEFAULT}
borderRadius={SIZES.XL}
alignItems={AlignItems.center}
backgroundColor={BackgroundColor.errorDefault}
borderRadius={Size.XL}
paddingLeft={4}
paddingRight={4}
>
<Typography
fontWeight={FONT_WEIGHT.BOLD}
margin={0}
variant={TYPOGRAPHY.H7}
color={COLORS.ERROR_INVERSE}
variant={TypographyVariant.H7}
color={TextColor.errorInverse}
>
{text}
</Typography>

6
ui/components/app/signature-request-siwe/signature-request-siwe.js
View File

@ -14,7 +14,7 @@ import {
import { getAccountByAddress } from '../../../helpers/utils/util';
import { formatMessageParams } from '../../../../shared/modules/siwe';
import { Icon } from '../../component-library/icon/icon';
import { COLORS } from '../../../helpers/constants/design-system';
import { IconColor } from '../../../helpers/constants/design-system';
import Header from './signature-request-siwe-header';
import Message from './signature-request-siwe-message';
@ -100,7 +100,7 @@ export default function SignatureRequestSIWE({
iconFillColor="var(--color-warning-default)"
useIcon
withRightButton
icon={<Icon name="danger" color={COLORS.WARNING_DEFAULT} />}
icon={<Icon name="danger" color={IconColor.warningDefault} />}
/>
)}
{!isSIWEDomainValid && (
@ -121,7 +121,7 @@ export default function SignatureRequestSIWE({
iconFillColor="var(--color-error-default)"
useIcon
withRightButton
icon={<Icon name="danger" color={COLORS.ERROR_DEFAULT} />}
icon={<Icon name="danger" color={IconColor.errorDefault} />}
/>
)}
<PageContainerFooter

12
ui/components/app/signature-request/signature-request-data/signature-request-data.js
View File

@ -15,9 +15,9 @@ import Box from '../../../ui/box';
import Typography from '../../../ui/typography';
import {
DISPLAY,
COLORS,
FONT_WEIGHT,
TYPOGRAPHY,
TypographyVariant,
TextColor,
} from '../../../../helpers/constants/design-system';
function SignatureRequestData({ data }) {
@ -36,7 +36,7 @@ function SignatureRequestData({ data }) {
>
<Typography
as="span"
color={COLORS.TEXT_DEFAULT}
color={TextColor.textDefault}
marginLeft={4}
fontWeight={
typeof value === 'object' ? FONT_WEIGHT.BOLD : FONT_WEIGHT.NORMAL
@ -49,7 +49,7 @@ function SignatureRequestData({ data }) {
) : (
<Typography
as="span"
color={COLORS.TEXT_DEFAULT}
color={TextColor.textDefault}
marginLeft={4}
className="signature-request-data__node__value"
>
@ -57,8 +57,8 @@ function SignatureRequestData({ data }) {
mixedCaseUseChecksum: true,
}) ? (
<Typography
variant={TYPOGRAPHY.H7}
color={COLORS.INFO_DEFAULT}
variant={TypographyVariant.H7}
color={TextColor.infoDefault}
className="signature-request-data__node__value__address"
>
<Address

29
ui/components/app/signature-request/signature-request-message/signature-request-message.js
View File

@ -6,12 +6,15 @@ import Box from '../../../ui/box';
import Typography from '../../../ui/typography';
import {
DISPLAY,
ALIGN_ITEMS,
JUSTIFY_CONTENT,
COLORS,
FONT_WEIGHT,
FLEX_DIRECTION,
SIZES,
AlignItems,
JustifyContent,
Color,
BackgroundColor,
BorderColor,
BorderRadius,
TextColor,
} from '../../../../helpers/constants/design-system';
import SignatureRequestData from '../signature-request-data';
@ -49,11 +52,11 @@ export default function SignatureRequestMessage({
{messageIsScrollable ? (
<Box
display={DISPLAY.FLEX}
alignItems={ALIGN_ITEMS.CENTER}
justifyContent={JUSTIFY_CONTENT.CENTER}
borderColor={COLORS.BORDER_DEFAULT}
backgroundColor={COLORS.BACKGROUND_DEFAULT}
color={COLORS.ICON_DEFAULT}
alignItems={AlignItems.center}
justifyContent={JustifyContent.center}
borderColor={BorderColor.borderDefault}
backgroundColor={BackgroundColor.backgroundDefault}
color={Color.iconDefault}
onClick={() => {
setMessageIsScrolled(true);
onMessageScrolled();
@ -66,19 +69,19 @@ export default function SignatureRequestMessage({
</Box>
) : null}
<Box
backgroundColor={COLORS.BACKGROUND_DEFAULT}
backgroundColor={BackgroundColor.backgroundDefault}
paddingBottom={3}
paddingTop={3}
paddingRight={3}
margin={2}
borderRadius={SIZES.XL}
borderColor={COLORS.BORDER_MUTED}
borderRadius={BorderRadius.XL}
borderColor={BorderColor.borderMuted}
className="signature-request-message__root"
ref={setMessageRootRef}
>
<Typography
fontWeight={FONT_WEIGHT.BOLD}
color={COLORS.TEXT_DEFAULT}
color={TextColor.textDefault}
marginLeft={4}
className="signature-request-message__title"
>

14
ui/components/app/signature-request/signature-request.component.js
View File

@ -9,10 +9,10 @@ import Button from '../../ui/button';
import Typography from '../../ui/typography/typography';
import ContractDetailsModal from '../modals/contract-details-modal/contract-details-modal';
import {
TYPOGRAPHY,
TypographyVariant,
FONT_WEIGHT,
COLORS,
TEXT_ALIGN,
TextColor,
} from '../../../helpers/constants/design-system';
import NetworkAccountBalanceHeader from '../network-account-balance-header';
import { NETWORK_TYPES } from '../../../../shared/constants/network';
@ -236,7 +236,7 @@ export default class SignatureRequest extends PureComponent {
<Typography
className="signature-request__content__title"
variant={TYPOGRAPHY.H3}
variant={TypographyVariant.H3}
fontWeight={FONT_WEIGHT.BOLD}
boxProps={{
marginTop: 4,
@ -246,8 +246,8 @@ export default class SignatureRequest extends PureComponent {
</Typography>
<Typography
className="request-signature__content__subtitle"
variant={TYPOGRAPHY.H7}
color={COLORS.TEXT_ALTERNATIVE}
variant={TypographyVariant.H7}
color={TextColor.textAlternative}
align={TEXT_ALIGN.CENTER}
margin={12}
marginTop={3}
@ -263,8 +263,8 @@ export default class SignatureRequest extends PureComponent {
data-testid="verify-contract-details"
>
<Typography
variant={TYPOGRAPHY.H7}
color={COLORS.PRIMARY_DEFAULT}
variant={TypographyVariant.H7}
color={TextColor.primaryDefault}
>
{this.context.t('verifyContractDetails')}
</Typography>

4
ui/components/app/srp-input/srp-input.js
View File

@ -11,7 +11,7 @@ import ShowHideToggle from '../../ui/show-hide-toggle';
import {
FONT_WEIGHT,
TEXT_ALIGN,
TYPOGRAPHY,
TypographyVariant,
} from '../../../helpers/constants/design-system';
import { parseSecretRecoveryPhrase } from './parse-secret-recovery-phrase';
@ -131,7 +131,7 @@ export default function SrpInput({ onChange, srpText }) {
<label className="import-srp__srp-label">
<Typography
align={TEXT_ALIGN.LEFT}
variant={TYPOGRAPHY.H4}
variant={TypographyVariant.H4}
fontWeight={FONT_WEIGHT.BOLD}
>
{srpText}

14
ui/components/app/transaction-alerts/transaction-alerts.js
View File

@ -9,7 +9,7 @@ import { useI18nContext } from '../../../hooks/useI18nContext';
import ActionableMessage from '../../ui/actionable-message/actionable-message';
import SimulationErrorMessage from '../../ui/simulation-error-message';
import Typography from '../../ui/typography';
import { TYPOGRAPHY } from '../../../helpers/constants/design-system';
import { TypographyVariant } from '../../../helpers/constants/design-system';
import ZENDESK_URLS from '../../../helpers/constants/zendesk-url';
const TransactionAlerts = ({
@ -36,8 +36,8 @@ const TransactionAlerts = ({
align="left"
className="transaction-alerts__pending-transactions"
margin={0}
tag={TYPOGRAPHY.Paragraph}
variant={TYPOGRAPHY.H7}
tag={TypographyVariant.paragraph}
variant={TypographyVariant.H7}
>
<strong>
{pendingTransactions?.length === 1
@ -71,8 +71,8 @@ const TransactionAlerts = ({
<Typography
align="left"
margin={0}
tag={TYPOGRAPHY.Paragraph}
variant={TYPOGRAPHY.H7}
tag={TypographyVariant.paragraph}
variant={TypographyVariant.H7}
>
{t('lowPriorityMessage')}
</Typography>
@ -88,8 +88,8 @@ const TransactionAlerts = ({
<Typography
align="left"
margin={0}
tag={TYPOGRAPHY.Paragraph}
variant={TYPOGRAPHY.H7}
tag={TypographyVariant.paragraph}
variant={TypographyVariant.H7}
>
{t('networkIsBusy')}
</Typography>

6
ui/components/app/transaction-decoding/components/ui/accreditation/accreditation.component.js
View File

@ -8,7 +8,7 @@ import {
} from '../../../../../../selectors';
import { I18nContext } from '../../../../../../contexts/i18n';
import { TYPOGRAPHY } from '../../../../../../helpers/constants/design-system';
import { TypographyVariant } from '../../../../../../helpers/constants/design-system';
import Button from '../../../../../ui/button';
import Typography from '../../../../../ui/typography';
@ -23,7 +23,7 @@ const Accreditation = ({ fetchVia, address }) => {
return (
<>
<Typography
variant={TYPOGRAPHY.H7}
variant={TypographyVariant.H7}
className="accreditation__prefix"
boxProps={{ margin: 0 }}
>
@ -45,7 +45,7 @@ const Accreditation = ({ fetchVia, address }) => {
</Button>,
])}
</Typography>
<Typography variant={TYPOGRAPHY.H7} boxProps={{ margin: 0 }}>
<Typography variant={TypographyVariant.H7} boxProps={{ margin: 0 }}>
{t('transactionDecodingAccreditationDecoded')}
</Typography>
</>

4
ui/components/app/transaction-decoding/components/ui/copy-raw-data/copy-raw-data.component.js
View File

@ -5,7 +5,7 @@ import { I18nContext } from '../../../../../../contexts/i18n';
import { useCopyToClipboard } from '../../../../../../hooks/useCopyToClipboard';
import { Icon, ICON_NAMES } from '../../../../../component-library';
import { COLORS } from '../../../../../../helpers/constants/design-system';
import { IconColor } from '../../../../../../helpers/constants/design-system';
const CopyRawData = ({ data }) => {
const t = useContext(I18nContext);
@ -23,7 +23,7 @@ const CopyRawData = ({ data }) => {
<div className="copy-raw-data__icon">
<Icon
name={copied ? ICON_NAMES.COPY_SUCCESS : ICON_NAMES.COPY}
color={COLORS.ICON_DEFAULT}
color={IconColor.iconDefault}
/>
</div>
<div className="copy-raw-data__label">

30
ui/components/app/transaction-detail-item/transaction-detail-item.component.js
View File

@ -4,19 +4,19 @@ import classnames from 'classnames';
import Typography from '../../ui/typography/typography';
import {
COLORS,
Color,
FONT_WEIGHT,
TYPOGRAPHY,
TypographyVariant,
DISPLAY,
FLEX_WRAP,
ALIGN_ITEMS,
AlignItems,
TEXT_ALIGN,
} from '../../../helpers/constants/design-system';
export default function TransactionDetailItem({
detailTitle = '',
detailText = '',
detailTitleColor = COLORS.TEXT_DEFAULT,
detailTitleColor = Color.textDefault,
detailTotal = '',
subTitle = '',
subText = '',
@ -29,11 +29,11 @@ export default function TransactionDetailItem({
<Typography
color={detailTitleColor}
fontWeight={boldHeadings ? FONT_WEIGHT.BOLD : FONT_WEIGHT.NORMAL}
variant={TYPOGRAPHY.H6}
variant={TypographyVariant.H6}
boxProps={{
display: DISPLAY.FLEX,
flexWrap: FLEX_WRAP.NO_WRAP,
alignItems: ALIGN_ITEMS.CENTER,
alignItems: AlignItems.center,
}}
>
{detailTitle}
@ -45,14 +45,17 @@ export default function TransactionDetailItem({
})}
>
{detailText && (
<Typography variant={TYPOGRAPHY.H6} color={COLORS.TEXT_ALTERNATIVE}>
<Typography
variant={TypographyVariant.H6}
color={Color.textAlternative}
>
{detailText}
</Typography>
)}
<Typography
color={COLORS.TEXT_DEFAULT}
color={Color.textDefault}
fontWeight={boldHeadings ? FONT_WEIGHT.BOLD : FONT_WEIGHT.NORMAL}
variant={TYPOGRAPHY.H6}
variant={TypographyVariant.H6}
marginTop={1}
marginBottom={1}
marginLeft={1}
@ -66,14 +69,17 @@ export default function TransactionDetailItem({
{React.isValidElement(subTitle) ? (
<div>{subTitle}</div>
) : (
<Typography variant={TYPOGRAPHY.H7} color={COLORS.TEXT_ALTERNATIVE}>
<Typography
variant={TypographyVariant.H7}
color={Color.textAlternative}
>
{subTitle}
</Typography>
)}
<Typography
variant={TYPOGRAPHY.H7}
color={COLORS.TEXT_ALTERNATIVE}
variant={TypographyVariant.H7}
color={Color.textAlternative}
align="end"
className="transaction-detail-item__row-subText"
>

4
ui/components/app/transaction-detail-item/transaction-detail-item.stories.js
View File

@ -1,7 +1,7 @@
import React from 'react';
import InfoTooltip from '../../ui/info-tooltip/info-tooltip';
import { COLORS } from '../../../helpers/constants/design-system';
import { TextColor } from '../../../helpers/constants/design-system';
import README from './README.mdx';
import TransactionDetailItem from '.';
@ -21,7 +21,7 @@ export default {
control: {
type: 'select',
},
options: Object.values(COLORS),
options: Object.values(TextColor),
},
detailText: { control: 'text' },
detailTotal: { control: 'text' },

13
ui/components/app/wallet-overview/eth-overview.js
View File

@ -22,7 +22,7 @@ import {
getIsBuyableChain,
getNativeCurrencyImage,
getSelectedAccountCachedBalance,
} from '../../../selectors/selectors';
} from '../../../selectors';
import { setSwapsFromToken } from '../../../ducks/swaps/swaps';
import IconButton from '../../ui/icon-button';
import { isHardwareKeyring } from '../../../helpers/utils/hardware';
@ -33,7 +33,7 @@ import { startNewDraftTransaction } from '../../../ducks/send';
import { AssetType } from '../../../../shared/constants/transaction';
import DepositPopover from '../deposit-popover';
import { Icon, ICON_NAMES } from '../../component-library';
import { COLORS } from '../../../helpers/constants/design-system';
import { IconColor } from '../../../helpers/constants/design-system';
import WalletOverview from './wallet-overview';
const EthOverview = ({ className }) => {
@ -109,7 +109,7 @@ const EthOverview = ({ className }) => {
<IconButton
className="eth-overview__button"
Icon={
<Icon name={ICON_NAMES.CARD} color={COLORS.PRIMARY_INVERSE} />
<Icon name={ICON_NAMES.CARD} color={IconColor.primaryInverse} />
}
disabled={!isBuyableChain}
label={t('buy')}
@ -129,7 +129,10 @@ const EthOverview = ({ className }) => {
className="eth-overview__button"
data-testid="eth-overview-send"
Icon={
<Icon name={ICON_NAMES.SEND_1} color={COLORS.PRIMARY_INVERSE} />
<Icon
name={ICON_NAMES.SEND_1}
color={IconColor.primaryInverse}
/>
}
label={t('send')}
onClick={() => {
@ -155,7 +158,7 @@ const EthOverview = ({ className }) => {
Icon={
<Icon
name={ICON_NAMES.SWAP_HORIZONTAL}
color={COLORS.PRIMARY_INVERSE}
color={IconColor.primaryInverse}
/>
}
onClick={() => {

16
ui/components/app/wallet-overview/token-overview.js
View File

@ -23,7 +23,7 @@ import {
getIsBuyableTransakToken,
getIsBuyableMoonpayToken,
getIsBuyableWyreToken,
} from '../../../selectors/selectors';
} from '../../../selectors';
import IconButton from '../../ui/icon-button';
import { INVALID_ASSET_TYPE } from '../../../helpers/constants/error-keys';
@ -34,7 +34,7 @@ import { AssetType } from '../../../../shared/constants/transaction';
import DepositPopover from '../deposit-popover';
import { Icon, ICON_NAMES } from '../../component-library';
import { COLORS } from '../../../helpers/constants/design-system';
import { IconColor } from '../../../helpers/constants/design-system';
import WalletOverview from './wallet-overview';
const TokenOverview = ({ className, token }) => {
@ -115,7 +115,10 @@ const TokenOverview = ({ className, token }) => {
<IconButton
className="token-overview__button"
Icon={
<Icon name={ICON_NAMES.CARD} color={COLORS.PRIMARY_INVERSE} />
<Icon
name={ICON_NAMES.CARD}
color={IconColor.primaryInverse}
/>
}
label={t('buy')}
onClick={() => {
@ -159,7 +162,10 @@ const TokenOverview = ({ className, token }) => {
}
}}
Icon={
<Icon name={ICON_NAMES.SEND_1} color={COLORS.PRIMARY_INVERSE} />
<Icon
name={ICON_NAMES.SEND_1}
color={IconColor.primaryInverse}
/>
}
label={t('send')}
data-testid="eth-overview-send"
@ -171,7 +177,7 @@ const TokenOverview = ({ className, token }) => {
Icon={
<Icon
name={ICON_NAMES.SWAP_HORIZONTAL}
color={COLORS.PRIMARY_INVERSE}
color={IconColor.primaryInverse}
/>
}
onClick={() => {

8
ui/components/app/whats-new-popup/whats-new-popup.js
View File

@ -18,7 +18,7 @@ import {
EXPERIMENTAL_ROUTE,
SECURITY_ROUTE,
} from '../../../helpers/constants/routes';
import { TYPOGRAPHY } from '../../../helpers/constants/design-system';
import { TypographyVariant } from '../../../helpers/constants/design-system';
import ZENDESK_URLS from '../../../helpers/constants/zendesk-url';
function getActionFunctionById(id, history) {
@ -71,7 +71,9 @@ function getActionFunctionById(id, history) {
const renderDescription = (description) => {
if (!Array.isArray(description)) {
return (
<Typography variant={TYPOGRAPHY.Paragraph}>{description}</Typography>
<Typography variant={TypographyVariant.paragraph}>
{description}
</Typography>
);
}
@ -82,7 +84,7 @@ const renderDescription = (description) => {
return (
<Typography
key={`item-${index}`}
variant={TYPOGRAPHY.Paragraph}
variant={TypographyVariant.paragraph}
boxProps={{ marginBottom: isLast ? 0 : 2 }}
>
{piece}

24
ui/components/component-library/avatar-account/README.mdx
View File

@ -24,17 +24,17 @@ component props
### Size
Use the `size` prop and the `SIZES` object from `./ui/helpers/constants/design-system.js` to change the size of `AvatarAccount`
Use the `size` prop and the `Size` object from `./ui/helpers/constants/design-system.js` to change the size of `AvatarAccount`
Optional: `AVATAR_ACCOUNT_SIZES` from `./ui/components/component-library` object can be used instead of `SIZES`
Possible sizes include:
- `SIZES.XS` 16px
- `SIZES.SM` 24px
- `SIZES.MD` 32px
- `SIZES.LG` 40px
- `SIZES.XL` 48px
- `Size.XS` 16px
- `Size.SM` 24px
- `Size.MD` 32px
- `Size.LG` 40px
- `Size.XL` 48px
Defaults to `SIZES.MD`
@ -43,14 +43,14 @@ Defaults to `SIZES.MD`
</Canvas>
```jsx
import { SIZES } from '../../../helpers/constants/design-system';
import { Size } from '../../../helpers/constants/design-system';
import { AvatarAccount } from '../ui/component-library';
<AvatarAccount size={SIZES.XS} />
<AvatarAccount size={SIZES.SM} />
<AvatarAccount size={SIZES.MD} />
<AvatarAccount size={SIZES.LG} />
<AvatarAccount size={SIZES.XL} />
<AvatarAccount size={Size.XS} />
<AvatarAccount size={Size.SM} />
<AvatarAccount size={Size.MD} />
<AvatarAccount size={Size.LG} />
<AvatarAccount size={Size.XL} />
```
### Type

12
ui/components/component-library/avatar-account/avatar-account.constants.js
View File

@ -1,4 +1,4 @@
import { SIZES } from '../../../helpers/constants/design-system';
import { Size } from '../../../helpers/constants/design-system';
export const AVATAR_ACCOUNT_DIAMETERS = {
xs: '16',
@ -14,9 +14,9 @@ export const AVATAR_ACCOUNT_TYPES = {
};
export const AVATAR_ACCOUNT_SIZES = {
XS: SIZES.XS,
SM: SIZES.SM,
MD: SIZES.MD,
LG: SIZES.LG,
XL: SIZES.XL,
XS: Size.XS,
SM: Size.SM,
MD: Size.MD,
LG: Size.LG,
XL: Size.XL,
};

4
ui/components/component-library/avatar-account/avatar-account.js
View File

@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
import Jazzicon from '../../ui/jazzicon/jazzicon.component';
import BlockieIdenticon from '../../ui/identicon/blockieIdenticon/blockieIdenticon.component';
import { AvatarBase } from '../avatar-base';
import { SIZES } from '../../../helpers/constants/design-system';
import { Size } from '../../../helpers/constants/design-system';
import Box from '../../ui/box/box';
import {
@ -14,7 +14,7 @@ import {
} from './avatar-account.constants';
export const AvatarAccount = ({
size = SIZES.MD,
size = Size.MD,
address,
className,
type,

25
ui/components/component-library/avatar-account/avatar-account.stories.js
View File

@ -1,9 +1,9 @@
import React from 'react';
import Box from '../../ui/box/box';
import {
ALIGN_ITEMS,
AlignItems,
DISPLAY,
SIZES,
Size,
} from '../../../helpers/constants/design-system';
import { AvatarAccount } from './avatar-account';
import {
@ -35,7 +35,7 @@ export default {
},
args: {
address: '0x5CfE73b6021E818B776b421B1c4Db2474086a7e1',
size: SIZES.MD,
size: Size.MD,
type: AVATAR_ACCOUNT_TYPES.JAZZICON,
},
};
@ -44,25 +44,26 @@ export const DefaultStory = (args) => <AvatarAccount {...args} />;
DefaultStory.storyName = 'Default';
export const Size = (args) => (
<Box display={DISPLAY.FLEX} alignItems={ALIGN_ITEMS.BASELINE} gap={1}>
<AvatarAccount {...args} size={SIZES.XS} />
<AvatarAccount {...args} size={SIZES.SM} />
<AvatarAccount {...args} size={SIZES.MD} />
<AvatarAccount {...args} size={SIZES.LG} />
<AvatarAccount {...args} size={SIZES.XL} />
export const SizeStory = (args) => (
<Box display={DISPLAY.FLEX} alignItems={AlignItems.baseline} gap={1}>
<AvatarAccount {...args} size={Size.XS} />
<AvatarAccount {...args} size={Size.SM} />
<AvatarAccount {...args} size={Size.MD} />
<AvatarAccount {...args} size={Size.LG} />
<AvatarAccount {...args} size={Size.XL} />
</Box>
);
SizeStory.storyName = 'Size';
export const Type = (args) => (
<Box display={DISPLAY.FLEX} alignItems={ALIGN_ITEMS.BASELINE} gap={1}>
<Box display={DISPLAY.FLEX} alignItems={AlignItems.baseline} gap={1}>
<AvatarAccount {...args} type={AVATAR_ACCOUNT_TYPES.JAZZICON} />
<AvatarAccount {...args} type={AVATAR_ACCOUNT_TYPES.BLOCKIES} />
</Box>
);
export const Address = (args) => (
<Box display={DISPLAY.FLEX} alignItems={ALIGN_ITEMS.BASELINE} gap={1}>
<Box display={DISPLAY.FLEX} alignItems={AlignItems.BASELINE} gap={1}>
<AvatarAccount
{...args}
type={AVATAR_ACCOUNT_TYPES.JAZZICON}

16
ui/components/component-library/avatar-base/README.mdx
View File

@ -77,20 +77,22 @@ Use the `color`, `backgroundColor` and `borderColor` props to set the text color
</Canvas>
```jsx
import { COLORS } from '../../../helpers/constants/design-system';
import { TextColor,
BackgroundColor,
BorderColor } from '../../../helpers/constants/design-system';
import { AvatarBase } from '../../component-library';
<AvatarBase>B</AvatarBase>
<AvatarBase
backgroundColor={COLORS.GOERLI}
borderColor={COLORS.GOERLI}
color={COLORS.PRIMARY_INVERSE}
backgroundColor={BackgroundColor.goerli}
borderColor={BorderColor.goerli}
color={TextColor.primaryInverse}
>
G
</AvatarBase>
<AvatarBase
backgroundColor={COLORS.SEPOLIA}
borderColor={COLORS.SEPOLIA}
color={COLORS.PRIMARY_INVERSE}
backgroundColor={BackgroundColor.sepolia}
borderColor={BorderColor.sepolia}
color={TextColor.primaryInverse}
>
S
</AvatarBase>

12
ui/components/component-library/avatar-base/avatar-base.constants.js
View File

@ -1,9 +1,9 @@
import { SIZES } from '../../../helpers/constants/design-system';
import { Size } from '../../../helpers/constants/design-system';
export const AVATAR_BASE_SIZES = {
XS: SIZES.XS,
SM: SIZES.SM,
MD: SIZES.MD,
LG: SIZES.LG,
XL: SIZES.XL,
XS: Size.XS,
SM: Size.SM,
MD: Size.MD,
LG: Size.LG,
XL: Size.XL,
};

14
ui/components/component-library/avatar-base/avatar-base.js
View File

@ -3,15 +3,19 @@ import PropTypes from 'prop-types';
import classnames from 'classnames';
import Box from '../../ui/box/box';
import { COLORS } from '../../../helpers/constants/design-system';
import {
BackgroundColor,
BorderColor,
TextColor,
} from '../../../helpers/constants/design-system';
import { AVATAR_BASE_SIZES } from './avatar-base.constants';
export const AvatarBase = ({
size = AVATAR_BASE_SIZES.MD,
children,
backgroundColor = COLORS.BACKGROUND_ALTERNATIVE,
borderColor = COLORS.BORDER_DEFAULT,
color = COLORS.TEXT_DEFAULT,
backgroundColor = BackgroundColor.backgroundAlternative,
borderColor = BorderColor.borderDefault,
color = TextColor.textDefault,
className,
...props
}) => (
@ -50,7 +54,7 @@ AvatarBase.propTypes = {
borderColor: Box.propTypes.borderColor,
/**
* The color of the text inside the AvatarBase
* Defaults to COLORS.TEXT_DEFAULT
* Defaults to TextColor.textDefault
*/
color: Box.propTypes.color,
/**

39
ui/components/component-library/avatar-base/avatar-base.stories.js
View File

@ -1,11 +1,10 @@
import React from 'react';
import {
ALIGN_ITEMS,
COLORS,
AlignItems,
DISPLAY,
TEXT_COLORS,
BACKGROUND_COLORS,
BORDER_COLORS,
TextColor,
BackgroundColor,
BorderColor,
} from '../../../helpers/constants/design-system';
import Box from '../../ui/box/box';
@ -46,15 +45,15 @@ export default {
options: Object.values(AVATAR_BASE_SIZES),
},
color: {
options: Object.values(TEXT_COLORS),
options: Object.values(TextColor),
control: 'select',
},
backgroundColor: {
options: Object.values(BACKGROUND_COLORS),
options: Object.values(BackgroundColor),
control: 'select',
},
borderColor: {
options: Object.values(BORDER_COLORS),
options: Object.values(BorderColor),
control: 'select',
},
display: {
@ -85,9 +84,9 @@ export default {
},
args: {
size: AVATAR_BASE_SIZES.MD,
color: COLORS.TEXT_DEFAULT,
backgroundColor: COLORS.BACKGROUND_ALTERNATIVE,
borderColor: COLORS.BORDER_DEFAULT,
color: TextColor.textDefault,
backgroundColor: BackgroundColor.backgroundAlternative,
borderColor: BorderColor.borderDefault,
},
};
@ -96,7 +95,7 @@ export const DefaultStory = (args) => <AvatarBase {...args}>B</AvatarBase>;
DefaultStory.storyName = 'Default';
export const Size = (args) => (
<Box display={DISPLAY.FLEX} alignItems={ALIGN_ITEMS.BASELINE} gap={1}>
<Box display={DISPLAY.FLEX} alignItems={AlignItems.baseline} gap={1}>
<AvatarBase {...args} size={AVATAR_BASE_SIZES.XS} />
<AvatarBase {...args} size={AVATAR_BASE_SIZES.SM} />
<AvatarBase {...args} size={AVATAR_BASE_SIZES.MD} />
@ -119,8 +118,8 @@ export const Children = (args) => (
<AvatarBase {...args}>A</AvatarBase>
<AvatarBase
{...args}
backgroundColor={COLORS.INFO_MUTED}
borderColor={COLORS.INFO_MUTED}
backgroundColor={BackgroundColor.infoMuted}
borderColor={BorderColor.infoMuted}
>
<i
className="fa fa-user"
@ -135,17 +134,17 @@ export const ColorBackgroundColorAndBorderColor = (args) => (
<AvatarBase {...args}>B</AvatarBase>
<AvatarBase
{...args}
backgroundColor={COLORS.GOERLI}
borderColor={COLORS.GOERLI}
color={COLORS.PRIMARY_INVERSE}
backgroundColor={BackgroundColor.goerli}
borderColor={BorderColor.goerli}
color={TextColor.primaryInverse}
>
G
</AvatarBase>
<AvatarBase
{...args}
backgroundColor={COLORS.SEPOLIA}
borderColor={COLORS.SEPOLIA}
color={COLORS.PRIMARY_INVERSE}
backgroundColor={BackgroundColor.sepolia}
borderColor={BorderColor.sepolia}
color={TextColor.primaryInverse}
>
S
</AvatarBase>

50
ui/components/component-library/avatar-base/avatar-base.test.js
View File

@ -2,7 +2,7 @@
import { render, screen } from '@testing-library/react';
import React from 'react';
import { COLORS } from '../../../helpers/constants/design-system';
import { Color } from '../../../helpers/constants/design-system';
import { AvatarBase } from './avatar-base';
@ -63,20 +63,20 @@ describe('AvatarBase', () => {
const { getByTestId } = render(
<>
<AvatarBase
color={COLORS.SUCCESS_DEFAULT}
data-testid={COLORS.SUCCESS_DEFAULT}
color={Color.successDefault}
data-testid={Color.successDefault}
/>
<AvatarBase
color={COLORS.ERROR_DEFAULT}
data-testid={COLORS.ERROR_DEFAULT}
color={Color.errorDefault}
data-testid={Color.errorDefault}
/>
</>,
);
expect(getByTestId(COLORS.SUCCESS_DEFAULT)).toHaveClass(
`box--color-${COLORS.SUCCESS_DEFAULT}`,
expect(getByTestId(Color.successDefault)).toHaveClass(
`box--color-${Color.successDefault}`,
);
expect(getByTestId(COLORS.ERROR_DEFAULT)).toHaveClass(
`box--color-${COLORS.ERROR_DEFAULT}`,
expect(getByTestId(Color.errorDefault)).toHaveClass(
`box--color-${Color.errorDefault}`,
);
});
// background color
@ -84,20 +84,20 @@ describe('AvatarBase', () => {
const { getByTestId } = render(
<>
<AvatarBase
backgroundColor={COLORS.SUCCESS_DEFAULT}
data-testid={COLORS.SUCCESS_DEFAULT}
backgroundColor={Color.successDefault}
data-testid={Color.successDefault}
/>
<AvatarBase
backgroundColor={COLORS.ERROR_DEFAULT}
data-testid={COLORS.ERROR_DEFAULT}
backgroundColor={Color.errorDefault}
data-testid={Color.errorDefault}
/>
</>,
);
expect(getByTestId(COLORS.SUCCESS_DEFAULT)).toHaveClass(
`box--background-color-${COLORS.SUCCESS_DEFAULT}`,
expect(getByTestId(Color.successDefault)).toHaveClass(
`box--background-color-${Color.successDefault}`,
);
expect(getByTestId(COLORS.ERROR_DEFAULT)).toHaveClass(
`box--background-color-${COLORS.ERROR_DEFAULT}`,
expect(getByTestId(Color.errorDefault)).toHaveClass(
`box--background-color-${Color.errorDefault}`,
);
});
// border color
@ -105,20 +105,20 @@ describe('AvatarBase', () => {
const { getByTestId } = render(
<>
<AvatarBase
borderColor={COLORS.SUCCESS_DEFAULT}
data-testid={COLORS.SUCCESS_DEFAULT}
borderColor={Color.successDefault}
data-testid={Color.successDefault}
/>
<AvatarBase
borderColor={COLORS.ERROR_DEFAULT}
data-testid={COLORS.ERROR_DEFAULT}
borderColor={Color.errorDefault}
data-testid={Color.errorDefault}
/>
</>,
);
expect(getByTestId(COLORS.SUCCESS_DEFAULT)).toHaveClass(
`box--border-color-${COLORS.SUCCESS_DEFAULT}`,
expect(getByTestId(Color.successDefault)).toHaveClass(
`box--border-color-${Color.successDefault}`,
);
expect(getByTestId(COLORS.ERROR_DEFAULT)).toHaveClass(
`box--border-color-${COLORS.ERROR_DEFAULT}`,
expect(getByTestId(Color.errorDefault)).toHaveClass(
`box--border-color-${Color.errorDefault}`,
);
});
});

25
ui/components/component-library/avatar-favicon/README.mdx
View File

@ -27,15 +27,15 @@ component props
Use the `size` prop to set the size of the `AvatarFavicon`.
Optional: `AVATAR_FAVICON_SIZES` from `./ui/components/component-library` object can be used instead of `SIZES`
Optional: `AVATAR_FAVICON_SIZES` from `./ui/components/component-library` object can be used instead of `Size`
Possible sizes include:
- `SIZES.XS` 16px
- `SIZES.SM` 24px
- `SIZES.MD` 32px
- `SIZES.LG` 40px
- `SIZES.XL` 48px
- `Size.XS` 16px
- `Size.SM` 24px
- `Size.MD` 32px
- `Size.LG` 40px
- `Size.XL` 48px
Defaults to `SIZES.MD`
@ -44,14 +44,14 @@ Defaults to `SIZES.MD`
</Canvas>
```jsx
import { SIZES } from '../../../helpers/constants/design-system';
import { Size } from '../../../helpers/constants/design-system';
import { AvatarFavicon } from '../ui/component-library';
<AvatarFavicon size={SIZES.XS} />
<AvatarFavicon size={SIZES.SM} />
<AvatarFavicon size={SIZES.MD} />
<AvatarFavicon size={SIZES.LG} />
<AvatarFavicon size={SIZES.XL} />
<AvatarFavicon size={Size.XS} />
<AvatarFavicon size={Size.SM} />
<AvatarFavicon size={Size.MD} />
<AvatarFavicon size={Size.LG} />
<AvatarFavicon size={Size.XL} />
```
### Src
@ -72,4 +72,3 @@ import { AvatarFavicon } from '../ui/component-library';
### Fallback Icon Props
If there is no `src` then in that case an [icon](/docs/components-componentlibrary-icon--default-story) will be used as the fallback display and it can be customised via `fallbackIconProps`.

12
ui/components/component-library/avatar-favicon/avatar-favicon.constants.js
View File

@ -1,9 +1,9 @@
import { SIZES } from '../../../helpers/constants/design-system';
import { Size } from '../../../helpers/constants/design-system';
export const AVATAR_FAVICON_SIZES = {
XS: SIZES.XS,
SM: SIZES.SM,
MD: SIZES.MD,
LG: SIZES.LG,
XL: SIZES.XL,
XS: Size.XS,
SM: Size.SM,
MD: Size.MD,
LG: Size.LG,
XL: Size.XL,
};

24
ui/components/component-library/avatar-favicon/avatar-favicon.js
View File

@ -5,30 +5,30 @@ import { AvatarBase } from '../avatar-base';
import Box from '../../ui/box/box';
import { ICON_NAMES, Icon } from '../icon';
import {
COLORS,
BORDER_COLORS,
SIZES,
BorderColor,
Size,
DISPLAY,
ALIGN_ITEMS,
JUSTIFY_CONTENT,
AlignItems,
JustifyContent,
IconColor,
} from '../../../helpers/constants/design-system';
import { AVATAR_FAVICON_SIZES } from './avatar-favicon.constants';
export const AvatarFavicon = ({
size = SIZES.MD,
size = Size.MD,
src,
name = 'avatar-favicon',
className,
fallbackIconProps,
borderColor = BORDER_COLORS.TRANSPARENT,
borderColor = BorderColor.transparent,
...props
}) => {
return (
<AvatarBase
size={size}
display={DISPLAY.FLEX}
alignItems={ALIGN_ITEMS.CENTER}
justifyContent={JUSTIFY_CONTENT.CENTER}
alignItems={AlignItems.center}
justifyContent={JustifyContent.center}
className={classnames('mm-avatar-favicon', className)}
{...{ borderColor, ...props }}
>
@ -41,7 +41,7 @@ export const AvatarFavicon = ({
) : (
<Icon
name={ICON_NAMES.GLOBAL}
color={COLORS.ICON_DEFAULT}
color={IconColor.iconDefault}
size={size}
{...fallbackIconProps}
/>
@ -65,8 +65,8 @@ AvatarFavicon.propTypes = {
fallbackIconProps: PropTypes.shape(Icon.PropTypes),
/**
* The size of the AvatarFavicon
* Possible values could be 'SIZES.XS' 16px, 'SIZES.SM' 24px, 'SIZES.MD' 32px, 'SIZES.LG' 40px, 'SIZES.XL' 48px
* Defaults to SIZES.MD
* Possible values could be 'Size.XS' 16px, 'Size.SM' 24px, 'Size.MD' 32px, 'Size.LG' 40px, 'Size.XL' 48px
* Defaults to Size.MD
*/
size: PropTypes.oneOf(Object.values(AVATAR_FAVICON_SIZES)),
/**

27
ui/components/component-library/avatar-favicon/avatar-favicon.stories.js
View File

@ -1,9 +1,9 @@
import React from 'react';
import {
SIZES,
DISPLAY,
ALIGN_ITEMS,
BORDER_COLORS,
AlignItems,
BorderColor,
Size,
} from '../../../helpers/constants/design-system';
import Box from '../../ui/box/box';
@ -29,13 +29,13 @@ export default {
control: 'text',
},
borderColor: {
options: Object.values(BORDER_COLORS),
options: Object.values(BorderColor),
control: 'select',
},
},
args: {
src: 'https://uniswap.org/favicon.ico',
size: SIZES.MD,
size: Size.MD,
},
};
@ -46,18 +46,19 @@ const Template = (args) => {
export const DefaultStory = Template.bind({});
DefaultStory.storyName = 'Default';
export const Size = (args) => (
<Box display={DISPLAY.FLEX} alignItems={ALIGN_ITEMS.BASELINE} gap={1}>
<AvatarFavicon {...args} size={SIZES.XS} />
<AvatarFavicon {...args} size={SIZES.SM} />
<AvatarFavicon {...args} size={SIZES.MD} />
<AvatarFavicon {...args} size={SIZES.LG} />
<AvatarFavicon {...args} size={SIZES.XL} />
export const SizeStory = (args) => (
<Box display={DISPLAY.FLEX} alignItems={AlignItems.baseline} gap={1}>
<AvatarFavicon {...args} size={Size.XS} />
<AvatarFavicon {...args} size={Size.SM} />
<AvatarFavicon {...args} size={Size.MD} />
<AvatarFavicon {...args} size={Size.LG} />
<AvatarFavicon {...args} size={Size.XL} />
</Box>
);
SizeStory.storyName = 'Size';
export const Src = (args) => (
<Box display={DISPLAY.FLEX} alignItems={ALIGN_ITEMS.FLEX} gap={1}>
<Box display={DISPLAY.FLEX} alignItems={AlignItems.flexStart} gap={1}>
<AvatarFavicon {...args} src="https://uniswap.org/favicon.ico" />
<AvatarFavicon
{...args}

44
ui/components/component-library/avatar-icon/README.mdx
View File

@ -26,15 +26,15 @@ component props
Use the `size` prop and the `SIZES` object from `./ui/helpers/constants/design-system.js` to change the size of `AvatarIcon`
Optional: `AVATAR_ICON_SIZES` from `./ui/components/component-library` object can be used instead of `SIZES`
Optional: `AVATAR_ICON_SIZES` from `./ui/components/component-library` object can be used instead of `Size`
Possible sizes include:
- `SIZES.XS` 16px
- `SIZES.SM` 24px
- `SIZES.MD` 32px
- `SIZES.LG` 40px
- `SIZES.XL` 48px
- `Size.XS` 16px
- `Size.SM` 24px
- `Size.MD` 32px
- `Size.LG` 40px
- `Size.XL` 48px
Defaults to `SIZES.MD`
@ -43,14 +43,14 @@ Defaults to `SIZES.MD`
</Canvas>
```jsx
import { SIZES } from '../../../helpers/constants/design-system';
import { Size } from '../../../helpers/constants/design-system';
import { AvatarIcon, ICON_NAMES } from '../ui/component-library';
<AvatarIcon size={SIZES.XS} />
<AvatarIcon size={SIZES.SM} />
<AvatarIcon size={SIZES.MD} />
<AvatarIcon size={SIZES.LG} />
<AvatarIcon size={SIZES.XL} />
<AvatarIcon {...args} size={Size.XS} />
<AvatarIcon {...args} size={Size.SM} />
<AvatarIcon {...args} size={Size.MD} />
<AvatarIcon {...args} size={Size.LG} />
<AvatarIcon {...args} size={Size.XL} />
```
### Icon Name<span style={{ color: 'red' }}>\*</span>
@ -75,23 +75,23 @@ import { AvatarIcon, ICON_NAMES } from '../ui/component-library';
### Color and Background Color
Use the `color` and `backgroundColor` props with the `COLORS` object from `./ui/helpers/constants/design-system.js` to change the icon color and background color of `AvatarIcon`
Use the `color` and `backgroundColor` props with the `IconColor` and `BackgroundColor` object from `./ui/helpers/constants/design-system.js` to change the icon color and background color of `AvatarIcon`
`color` default: `COLORS.COLORS.PRIMARY_DEFAULT`
`backgroundColor` default: `COLORS.COLORS.PRIMARY_MUTED`
`color` default: `IconColor.primaryDefault`
`backgroundColor` default: `BackgroundColor.primaryMuted`
<Canvas>
<Story id="components-componentlibrary-avataricon--color-and-background-color" />
</Canvas>
```jsx
import { COLORS } from '../../../helpers/constants/design-system';
import { BackgroundColor, IconColor } from '../../../helpers/constants/design-system';
import { AvatarIcon } from '../ui/component-library';
<AvatarIcon color={COLORS.PRIMARY_DEFAULT} backgroundColor={BACKGROUND_COLORS.PRIMARY_MUTED} />
<AvatarIcon color={COLORS.PRIMARY_INVERSE} backgroundColor={BACKGROUND_COLORS.PRIMARY_DEFAULT} />
<AvatarIcon color={COLORS.SUCCESS_DEFAULT} backgroundColor={BACKGROUND_COLORS.SUCCESS_MUTED} />
<AvatarIcon color={COLORS.INFO_DEFAULT} backgroundColor={BACKGROUND_COLORS.INFO_MUTED} />
<AvatarIcon color={COLORS.WARNING_DEFAULT} backgroundColor={BACKGROUND_COLORS.WARNING_MUTED} />
<AvatarIcon color={COLORS.ERROR_DEFAULT} backgroundColor={BACKGROUND_COLORS.ERROR_MUTED} />
<AvatarIcon color={IconColor.primaryDefault} backgroundColor={BackgroundColor.primaryMuted} />
<AvatarIcon color={IconColor.primaryInverse} backgroundColor={BackgroundColor.primaryDefault} />
<AvatarIcon color={IconColor.successDefault} backgroundColor={BackgroundColor.successMuted} />
<AvatarIcon color={IconColor.infoDefault} backgroundColor={BackgroundColor.infoMuted} />
<AvatarIcon color={IconColor.warningDefault} backgroundColor={BackgroundColor.warningMuted} />
<AvatarIcon color={IconColor.errorDefault} backgroundColor={BackgroundColor.errorMuted} />
```

12
ui/components/component-library/avatar-icon/avatar-icon.constants.js
View File

@ -1,9 +1,9 @@
import { SIZES } from '../../../helpers/constants/design-system';
import { Size } from '../../../helpers/constants/design-system';
export const AVATAR_ICON_SIZES = {
XS: SIZES.XS,
SM: SIZES.SM,
MD: SIZES.MD,
LG: SIZES.LG,
XL: SIZES.XL,
XS: Size.XS,
SM: Size.SM,
MD: Size.MD,
LG: Size.LG,
XL: Size.XL,
};

35
ui/components/component-library/avatar-icon/avatar-icon.js
View File

@ -2,12 +2,14 @@ import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import {
COLORS,
BORDER_COLORS,
SIZES,
BorderColor,
Size,
DISPLAY,
ALIGN_ITEMS,
JUSTIFY_CONTENT,
AlignItems,
JustifyContent,
BackgroundColor,
IconColor,
TextColor,
} from '../../../helpers/constants/design-system';
import Box from '../../ui/box/box';
@ -18,9 +20,9 @@ import { AvatarBase } from '../avatar-base';
import { AVATAR_ICON_SIZES } from './avatar-icon.constants';
export const AvatarIcon = ({
size = SIZES.MD,
color = COLORS.PRIMARY_DEFAULT,
backgroundColor = COLORS.PRIMARY_MUTED,
size = Size.MD,
color = TextColor.primaryDefault,
backgroundColor = BackgroundColor.primaryMuted,
className,
iconProps,
iconName,
@ -30,15 +32,20 @@ export const AvatarIcon = ({
<AvatarBase
size={size}
display={DISPLAY.FLEX}
alignItems={ALIGN_ITEMS.CENTER}
justifyContent={JUSTIFY_CONTENT.CENTER}
alignItems={AlignItems.center}
justifyContent={JustifyContent.center}
color={color}
backgroundColor={backgroundColor}
borderColor={BORDER_COLORS.TRANSPARENT}
borderColor={BorderColor.transparent}
className={classnames('mm-avatar-icon', className)}
{...props}
>
<Icon color={COLORS.INHERIT} name={iconName} size={size} {...iconProps} />
<Icon
color={IconColor.inherit}
name={iconName}
size={size}
{...iconProps}
/>
</AvatarBase>
);
};
@ -61,12 +68,12 @@ AvatarIcon.propTypes = {
size: PropTypes.oneOf(Object.values(AVATAR_ICON_SIZES)),
/**
* The background color of the AvatarIcon
* Defaults to COLORS.PRIMARY_MUTED
* Defaults to BackgroundColor.primaryMuted
*/
backgroundColor: Box.propTypes.backgroundColor,
/**
* The color of the text inside the AvatarIcon
* Defaults to COLORS.PRIMARY_DEFAULT
* Defaults to TextColor.primaryDefault
*/
color: Box.propTypes.color,
/**

74
ui/components/component-library/avatar-icon/avatar-icon.stories.js
View File

@ -1,10 +1,11 @@
import React from 'react';
import {
SIZES,
Size,
DISPLAY,
ALIGN_ITEMS,
COLORS,
BACKGROUND_COLORS,
AlignItems,
BackgroundColor,
IconColor,
Color,
} from '../../../helpers/constants/design-system';
import Box from '../../ui/box/box';
@ -52,11 +53,11 @@ export default {
},
backgroundColor: {
control: 'select',
options: Object.values(BACKGROUND_COLORS),
options: Object.values(BackgroundColor),
},
color: {
control: 'select',
options: Object.values(COLORS),
options: Object.values(Color),
},
className: {
control: 'text',
@ -83,7 +84,7 @@ export default {
},
},
args: {
size: SIZES.MD,
size: Size.MD,
},
};
@ -94,15 +95,16 @@ const Template = (args) => {
export const DefaultStory = Template.bind({});
DefaultStory.storyName = 'Default';
export const Size = (args) => (
<Box display={DISPLAY.FLEX} alignItems={ALIGN_ITEMS.BASELINE} gap={1}>
<AvatarIcon {...args} size={SIZES.XS} />
<AvatarIcon {...args} size={SIZES.SM} />
<AvatarIcon {...args} size={SIZES.MD} />
<AvatarIcon {...args} size={SIZES.LG} />
<AvatarIcon {...args} size={SIZES.XL} />
export const SizeStory = (args) => (
<Box display={DISPLAY.FLEX} alignItems={AlignItems.baseline} gap={1}>
<AvatarIcon {...args} size={Size.XS} />
<AvatarIcon {...args} size={Size.SM} />
<AvatarIcon {...args} size={Size.MD} />
<AvatarIcon {...args} size={Size.LG} />
<AvatarIcon {...args} size={Size.XL} />
</Box>
);
SizeStory.storyName = 'Size';
Size.args = {
iconName: ICON_NAMES.CONFIRMATION,
@ -111,32 +113,32 @@ Size.args = {
export const IconName = (args) => (
<Box display={DISPLAY.FLEX} gap={1}>
<AvatarIcon
color={COLORS.PRIMARY_DEFAULT}
backgroundColor={BACKGROUND_COLORS.PRIMARY_MUTED}
color={IconColor.primaryDefault}
backgroundColor={BackgroundColor.primaryMuted}
iconName={ICON_NAMES.SWAP_HORIZONTAL}
{...args}
/>
<AvatarIcon
color={COLORS.SUCCESS_DEFAULT}
backgroundColor={BACKGROUND_COLORS.SUCCESS_MUTED}
color={IconColor.successDefault}
backgroundColor={BackgroundColor.successMuted}
iconName={ICON_NAMES.CONFIRMATION}
{...args}
/>
<AvatarIcon
color={COLORS.INFO_DEFAULT}
backgroundColor={BACKGROUND_COLORS.INFO_MUTED}
color={IconColor.infoDefault}
backgroundColor={BackgroundColor.infoMuted}
iconName={ICON_NAMES.INFO}
{...args}
/>
<AvatarIcon
color={COLORS.WARNING_DEFAULT}
backgroundColor={BACKGROUND_COLORS.WARNING_MUTED}
color={IconColor.warningDefault}
backgroundColor={BackgroundColor.warningMuted}
iconName={ICON_NAMES.WARNING}
{...args}
/>
<AvatarIcon
color={COLORS.ERROR_DEFAULT}
backgroundColor={BACKGROUND_COLORS.ERROR_MUTED}
color={IconColor.errorDefault}
backgroundColor={BackgroundColor.errorMuted}
iconName={ICON_NAMES.DANGER}
{...args}
/>
@ -146,38 +148,38 @@ export const IconName = (args) => (
export const ColorAndBackgroundColor = (args) => (
<Box display={DISPLAY.FLEX} gap={1}>
<AvatarIcon
color={COLORS.PRIMARY_DEFAULT}
backgroundColor={BACKGROUND_COLORS.PRIMARY_MUTED}
color={IconColor.primaryDefault}
backgroundColor={BackgroundColor.primaryMuted}
iconName={ICON_NAMES.SWAP_HORIZONTAL}
{...args}
/>
<AvatarIcon
color={COLORS.PRIMARY_INVERSE}
backgroundColor={BACKGROUND_COLORS.PRIMARY_DEFAULT}
color={IconColor.primaryInverse}
backgroundColor={BackgroundColor.primaryDefault}
iconName={ICON_NAMES.SWAP_HORIZONTAL}
{...args}
/>
<AvatarIcon
color={COLORS.SUCCESS_DEFAULT}
backgroundColor={BACKGROUND_COLORS.SUCCESS_MUTED}
color={IconColor.successDefault}
backgroundColor={BackgroundColor.successMuted}
iconName={ICON_NAMES.CONFIRMATION}
{...args}
/>
<AvatarIcon
color={COLORS.INFO_DEFAULT}
backgroundColor={BACKGROUND_COLORS.INFO_MUTED}
color={IconColor.infoDefault}
backgroundColor={BackgroundColor.infoMuted}
iconName={ICON_NAMES.INFO}
{...args}
/>
<AvatarIcon
color={COLORS.WARNING_DEFAULT}
backgroundColor={BACKGROUND_COLORS.WARNING_MUTED}
color={IconColor.warningDefault}
backgroundColor={BackgroundColor.warningMuted}
iconName={ICON_NAMES.WARNING}
{...args}
/>
<AvatarIcon
color={COLORS.ERROR_DEFAULT}
backgroundColor={BACKGROUND_COLORS.ERROR_MUTED}
color={IconColor.errorDefault}
backgroundColor={BackgroundColor.errorMuted}
iconName={ICON_NAMES.DANGER}
{...args}
/>

9
ui/components/component-library/avatar-icon/avatar-icon.test.js
View File

@ -3,7 +3,10 @@ import { render } from '@testing-library/react';
import React from 'react';
import { ICON_NAMES } from '..';
import { COLORS } from '../../../helpers/constants/design-system';
import {
BackgroundColor,
IconColor,
} from '../../../helpers/constants/design-system';
import { AvatarIcon, AVATAR_ICON_SIZES } from '.';
describe('AvatarIcon', () => {
@ -91,8 +94,8 @@ describe('AvatarIcon', () => {
const { getByTestId } = render(
<AvatarIcon
iconName={ICON_NAMES.SWAP_HORIZONTAL}
color={COLORS.SUCCESS_DEFAULT}
backgroundColor={COLORS.SUCCESS_MUTED}
color={IconColor.successDefault}
backgroundColor={BackgroundColor.successMuted}
data-testid="success"
/>,
);

42
ui/components/component-library/avatar-network/README.mdx
View File

@ -35,16 +35,16 @@ Defaults to `md`
</Canvas>
```jsx
import { SIZES } from '../../../helpers/constants/design-system';
import { Size } from '../../../helpers/constants/design-system';
import { AvatarNetwork } from '../../component-library';
<AvatarNetwork size={SIZES.XS} />
<AvatarNetwork size={SIZES.SM} />
<AvatarNetwork size={SIZES.MD} />
<AvatarNetwork size={SIZES.LG} />
<AvatarNetwork size={SIZES.XL} />
<AvatarNetwork size={Size.XS} />
<AvatarNetwork size={Size.SM} />
<AvatarNetwork size={Size.MD} />
<AvatarNetwork size={Size.LG} />
<AvatarNetwork size={Size.XL} />
```
### Name
### Name
Use the `name` prop to set the initial letter of the `AvatarNetwork`. This will be used as the fallback display if no image url is passed to the `src` prop.
@ -54,10 +54,10 @@ Use the `name` prop to set the initial letter of the `AvatarNetwork`. This will
```jsx
import { AvatarNetwork } from '../../component-library';
<AvatarNetwork name="Arbitrum One" />
<AvatarNetwork name="Arbitrum One" />;
```
### Src
### Src
Use the `src` prop to set the image to be rendered of the `AvatarNetwork`.
@ -88,7 +88,7 @@ Use the `showHalo` prop to display the component with halo effect. Only works if
```jsx
import { AvatarNetwork } from '../../component-library';
<AvatarNetwork src="./images/arbitrum.svg" showHalo/>
<AvatarNetwork src="./images/arbitrum.svg" showHalo />;
```
### Color, Background Color And Border Color
@ -100,22 +100,24 @@ Use the `color`, `backgroundColor` and `borderColor` props to set the text color
</Canvas>
```jsx
import { COLORS } from '../../../helpers/constants/design-system';
import { TextColor,
BackgroundColor,
BorderColor } from '../../../helpers/constants/design-system';
import { AvatarNetwork } from '../../component-library';
<AvatarNetwork
backgroundColor={COLORS.GOERLI}
borderColor={COLORS.GOERLI}
name="G"
color={COLORS.PRIMARY_INVERSE}
backgroundColor={BackgroundColor.goerli}
borderColor={BorderColor.goerli}
name="G"
color={Color.goerliInverse}
>
G
</AvatarNetwork>
<AvatarNetwork
backgroundColor={COLORS.SEPOLIA}
borderColor={COLORS.SEPOLIA}
name="S"
color={COLORS.PRIMARY_INVERSE}
backgroundColor={BackgroundColor.sepolia}
borderColor={BorderColor.sepolia}
name="S"
color={Color.goerliInverse}
>
S
</AvatarNetwork>
```
```

12
ui/components/component-library/avatar-network/avatar-network.constants.js
View File

@ -1,9 +1,9 @@
import { SIZES } from '../../../helpers/constants/design-system';
import { Size } from '../../../helpers/constants/design-system';
export const AVATAR_NETWORK_SIZES = {
XS: SIZES.XS,
SM: SIZES.SM,
MD: SIZES.MD,
LG: SIZES.LG,
XL: SIZES.XL,
XS: Size.XS,
SM: Size.SM,
MD: Size.MD,
LG: Size.LG,
XL: Size.XL,
};

32
ui/components/component-library/avatar-network/avatar-network.js
View File

@ -4,22 +4,24 @@ import classnames from 'classnames';
import { AvatarBase } from '../avatar-base';
import Box from '../../ui/box/box';
import {
COLORS,
SIZES,
Size,
DISPLAY,
ALIGN_ITEMS,
JUSTIFY_CONTENT,
AlignItems,
JustifyContent,
TextColor,
BackgroundColor,
BorderColor,
} from '../../../helpers/constants/design-system';
import { AVATAR_NETWORK_SIZES } from './avatar-network.constants';
export const AvatarNetwork = ({
size = SIZES.MD,
size = Size.MD,
name,
src,
showHalo,
color = COLORS.TEXT_DEFAULT,
backgroundColor = COLORS.BACKGROUND_ALTERNATIVE,
borderColor = COLORS.TRANSPARENT,
color = TextColor.textDefault,
backgroundColor = BackgroundColor.backgroundAlternative,
borderColor = BorderColor.transparent,
className,
...props
}) => {
@ -39,8 +41,8 @@ export const AvatarNetwork = ({
<AvatarBase
size={size}
display={DISPLAY.FLEX}
alignItems={ALIGN_ITEMS.CENTER}
justifyContent={JUSTIFY_CONTENT.CENTER}
alignItems={AlignItems.center}
justifyContent={JustifyContent.center}
className={classnames(
'mm-avatar-network',
showHalo && 'mm-avatar-network--with-halo',
@ -92,23 +94,23 @@ AvatarNetwork.propTypes = {
showHalo: PropTypes.bool,
/**
* The size of the AvatarNetwork
* Possible values could be SIZES.XS(16px), SIZES.SM(24px), SIZES.MD(32px), SIZES.LG(40px), SIZES.XL(48px)
* Defaults to SIZES.MD
* Possible values could be Size.XS(16px), Size.SM(24px), Size.MD(32px), Size.LG(40px), Size.XL(48px)
* Defaults to Size.MD
*/
size: PropTypes.oneOf(Object.values(AVATAR_NETWORK_SIZES)),
/**
* The background color of the AvatarNetwork
* Defaults to COLORS.BACKGROUND_ALTERNATIVE
* Defaults to BackgroundColor.backgroundAlternative
*/
backgroundColor: Box.propTypes.backgroundColor,
/**
* The background color of the AvatarNetwork
* Defaults to COLORS.BORDER_DEFAULT
* Defaults to BorderColor.borderDefault
*/
borderColor: Box.propTypes.borderColor,
/**
* The color of the text inside the AvatarNetwork
* Defaults to COLORS.TEXT_DEFAULT
* Defaults to TextColor.textDefault
*/
color: Box.propTypes.color,
/**

47
ui/components/component-library/avatar-network/avatar-network.stories.js
View File

@ -1,12 +1,12 @@
import React from 'react';
import {
COLORS,
SIZES,
Size,
DISPLAY,
ALIGN_ITEMS,
TEXT_COLORS,
BACKGROUND_COLORS,
BORDER_COLORS,
TextColor,
BackgroundColor,
BorderColor,
Color,
AlignItems,
} from '../../../helpers/constants/design-system';
import Box from '../../ui/box/box';
@ -30,15 +30,15 @@ export default {
options: Object.values(AVATAR_NETWORK_SIZES),
},
color: {
options: Object.values(TEXT_COLORS),
options: Object.values(TextColor),
control: 'select',
},
backgroundColor: {
options: Object.values(BACKGROUND_COLORS),
options: Object.values(BackgroundColor),
control: 'select',
},
borderColor: {
options: Object.values(BORDER_COLORS),
options: Object.values(BorderColor),
control: 'select',
},
name: {
@ -54,7 +54,7 @@ export default {
args: {
name: 'Arbitrum One',
src: './images/arbitrum.svg',
size: SIZES.MD,
size: Size.MD,
showHalo: false,
},
};
@ -66,15 +66,16 @@ const Template = (args) => {
export const DefaultStory = Template.bind({});
DefaultStory.storyName = 'Default';
export const Size = (args) => (
<Box display={DISPLAY.FLEX} alignItems={ALIGN_ITEMS.BASELINE} gap={1}>
<AvatarNetwork {...args} size={SIZES.XS} />
<AvatarNetwork {...args} size={SIZES.SM} />
<AvatarNetwork {...args} size={SIZES.MD} />
<AvatarNetwork {...args} size={SIZES.LG} />
<AvatarNetwork {...args} size={SIZES.XL} />
export const SizeStory = (args) => (
<Box display={DISPLAY.FLEX} alignItems={AlignItems.baseline} gap={1}>
<AvatarNetwork {...args} size={Size.XS} />
<AvatarNetwork {...args} size={Size.SM} />
<AvatarNetwork {...args} size={Size.MD} />
<AvatarNetwork {...args} size={Size.LG} />
<AvatarNetwork {...args} size={Size.XL} />
</Box>
);
SizeStory.storyName = 'Size';
export const Name = Template.bind({});
Name.args = {
@ -104,17 +105,17 @@ export const ColorBackgroundColorAndBorderColor = (args) => (
<Box display={DISPLAY.FLEX} gap={1}>
<AvatarNetwork
{...args}
backgroundColor={COLORS.GOERLI}
borderColor={COLORS.GOERLI}
backgroundColor={BackgroundColor.goerli}
borderColor={BorderColor.goerli}
name="G"
color={COLORS.PRIMARY_INVERSE} // TODO: update it to COLORS.GOERLI_INVERSE
color={Color.goerliInverse}
/>
<AvatarNetwork
{...args}
backgroundColor={COLORS.SEPOLIA}
borderColor={COLORS.SEPOLIA}
backgroundColor={BackgroundColor.sepolia}
borderColor={BorderColor.sepolia}
name="S"
color={COLORS.PRIMARY_INVERSE} // TODO: update it to COLORS.GOERLI_INVERSE
color={Color.goerliInverse}
/>
</Box>
);

54
ui/components/component-library/avatar-network/avatar-network.test.js
View File

@ -2,7 +2,11 @@
import { render, screen } from '@testing-library/react';
import React from 'react';
import { COLORS } from '../../../helpers/constants/design-system';
import {
BackgroundColor,
BorderColor,
TextColor,
} from '../../../helpers/constants/design-system';
import { AvatarNetwork } from './avatar-network';
@ -61,20 +65,20 @@ describe('AvatarNetwork', () => {
const { getByTestId } = render(
<>
<AvatarNetwork
color={COLORS.SUCCESS_DEFAULT}
data-testid={COLORS.SUCCESS_DEFAULT}
color={TextColor.successDefault}
data-testid={TextColor.successDefault}
/>
<AvatarNetwork
color={COLORS.ERROR_DEFAULT}
data-testid={COLORS.ERROR_DEFAULT}
color={TextColor.errorDefault}
data-testid={TextColor.errorDefault}
/>
</>,
);
expect(getByTestId(COLORS.SUCCESS_DEFAULT)).toHaveClass(
`box--color-${COLORS.SUCCESS_DEFAULT}`,
expect(getByTestId(TextColor.successDefault)).toHaveClass(
`box--color-${TextColor.successDefault}`,
);
expect(getByTestId(COLORS.ERROR_DEFAULT)).toHaveClass(
`box--color-${COLORS.ERROR_DEFAULT}`,
expect(getByTestId(TextColor.errorDefault)).toHaveClass(
`box--color-${TextColor.errorDefault}`,
);
});
// background color
@ -82,20 +86,20 @@ describe('AvatarNetwork', () => {
const { getByTestId } = render(
<>
<AvatarNetwork
backgroundColor={COLORS.SUCCESS_DEFAULT}
data-testid={COLORS.SUCCESS_DEFAULT}
backgroundColor={BackgroundColor.successDefault}
data-testid={BackgroundColor.successDefault}
/>
<AvatarNetwork
backgroundColor={COLORS.ERROR_DEFAULT}
data-testid={COLORS.ERROR_DEFAULT}
backgroundColor={BackgroundColor.errorDefault}
data-testid={BackgroundColor.errorDefault}
/>
</>,
);
expect(getByTestId(COLORS.SUCCESS_DEFAULT)).toHaveClass(
`box--background-color-${COLORS.SUCCESS_DEFAULT}`,
expect(getByTestId(BackgroundColor.successDefault)).toHaveClass(
`box--background-color-${BackgroundColor.successDefault}`,
);
expect(getByTestId(COLORS.ERROR_DEFAULT)).toHaveClass(
`box--background-color-${COLORS.ERROR_DEFAULT}`,
expect(getByTestId(BackgroundColor.errorDefault)).toHaveClass(
`box--background-color-${BackgroundColor.errorDefault}`,
);
});
// border color
@ -103,20 +107,20 @@ describe('AvatarNetwork', () => {
const { getByTestId } = render(
<>
<AvatarNetwork
borderColor={COLORS.SUCCESS_DEFAULT}
data-testid={COLORS.SUCCESS_DEFAULT}
borderColor={BorderColor.successDefault}
data-testid={BorderColor.successDefault}
/>
<AvatarNetwork
borderColor={COLORS.ERROR_DEFAULT}
data-testid={COLORS.ERROR_DEFAULT}
borderColor={BorderColor.errorDefault}
data-testid={BorderColor.errorDefault}
/>
</>,
);
expect(getByTestId(COLORS.SUCCESS_DEFAULT)).toHaveClass(
`box--border-color-${COLORS.SUCCESS_DEFAULT}`,
expect(getByTestId(BorderColor.successDefault)).toHaveClass(
`box--border-color-${BorderColor.successDefault}`,
);
expect(getByTestId(COLORS.ERROR_DEFAULT)).toHaveClass(
`box--border-color-${COLORS.ERROR_DEFAULT}`,
expect(getByTestId(BorderColor.errorDefault)).toHaveClass(
`box--border-color-${BorderColor.errorDefault}`,
);
});
});

35
ui/components/component-library/avatar-token/README.mdx
View File

@ -37,11 +37,11 @@ Defaults to `md`
```jsx
import { AvatarToken } from '../../component-library';
<AvatarToken size={SIZES.XS} />
<AvatarToken size={SIZES.SM} />
<AvatarToken size={SIZES.MD} />
<AvatarToken size={SIZES.LG} />
<AvatarToken size={SIZES.XL} />
<AvatarToken size={Size.XS} />
<AvatarToken size={Size.SM} />
<AvatarToken size={Size.MD} />
<AvatarToken size={Size.LG} />
<AvatarToken size={Size.XL} />
```
### Name
@ -54,7 +54,7 @@ Use the `name` prop to set the initial letter of the `AvatarToken`. This will be
```jsx
import { AvatarToken } from '../../component-library';
<AvatarToken name="eth" />
<AvatarToken name="eth" />;
```
### Src
@ -88,8 +88,7 @@ Use the `showHalo` prop to display the component with halo effect. Only works if
```jsx
import { AvatarToken } from '../../component-library';
<AvatarToken src="./images/eth_logo.svg" showHalo/>
<AvatarToken src="./images/eth_logo.svg" showHalo />;
```
### Color, Background Color And Border Color
@ -101,22 +100,24 @@ Use the `color`, `backgroundColor` and `borderColor` props to set the text color
</Canvas>
```jsx
import { COLORS } from '../../../helpers/constants/design-system';
import { TextColor,
BackgroundColor,
BorderColor, } from '../../../helpers/constants/design-system';
import { AvatarToken } from '../../component-library';
<AvatarToken
backgroundColor={COLORS.GOERLI}
borderColor={COLORS.GOERLI}
name="G"
color={COLORS.PRIMARY_INVERSE}
backgroundColor={BackgroundColor.goerli}
borderColor={BorderColor.goerli}
name="G"
color={Color.primaryInverse}
>
G
</AvatarToken>
<AvatarToken
backgroundColor={COLORS.SEPOLIA}
borderColor={COLORS.SEPOLIA}
name="S"
color={COLORS.PRIMARY_INVERSE}
backgroundColor={BackgroundColor.sepolia}
borderColor={BorderColor.sepolia}
name="S"
color={Color.primaryInverse}
>
S
</AvatarToken>

Some files were not shown because too many files have changed in this diff Show More