m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 01:39:44 +01:00
Code

Find and replace of all typography colors to design tokens (#13885)

Browse Source
This commit is contained in:
George Marshall 2022-03-09 07:24:53 -08:00 committed by GitHub
parent 9d26bd762f
commit fa4d884a87
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
38 changed files with 144 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -42,7 +42,7 @@ const AddNetwork = ({
onClick={onBackClick}
className="add-network__header__back-icon"
/>
<Typography variant={TYPOGRAPHY.H3} color={COLORS.BLACK}>
<Typography variant={TYPOGRAPHY.H3} color={COLORS.TEXT_DEFAULT}>
{t('addNetwork')}
</Typography>
</Box>
@ -53,14 +53,14 @@ const AddNetwork = ({
>
<Typography
variant={TYPOGRAPHY.H6}
color={COLORS.UI4}
color={COLORS.TEXT_ALTERNATIVE}
margin={[4, 0, 0, 0]}
>
{t('addFromAListOfPopularNetworks')}
</Typography>
<Typography
variant={TYPOGRAPHY.H7}
color={COLORS.UI3}
color={COLORS.TEXT_MUTED}
margin={[4, 0, 3, 0]}
>
{t('customNetworks')}
@ -77,7 +77,7 @@ const AddNetwork = ({
src={item?.rpcPrefs?.imageUrl}
alt={t('logo', [item.ticker])}
/>
<Typography variant={TYPOGRAPHY.H7} color={COLORS.BLACK}>
<Typography variant={TYPOGRAPHY.H7} color={COLORS.TEXT_DEFAULT}>
{item.ticker}
</Typography>
<img
@ -95,7 +95,7 @@ const AddNetwork = ({
className="add-network__footer"
>
<Button type="link" onClick={onAddNetworkManuallyClick}>
<Typography variant={TYPOGRAPHY.H6} color={COLORS.PRIMARY1}>
<Typography variant={TYPOGRAPHY.H6} color={COLORS.PRIMARY_DEFAULT}>
{t('addANetworkManually')}
</Typography>
</Button>

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

@ -88,7 +88,11 @@ const AdvancedGasFeeDefaults = () => {
onClick={handleUpdateDefaultSettings}
disabled={gasErrors.maxFeePerGas || gasErrors.maxPriorityFeePerGas}
/>
<Typography variant={TYPOGRAPHY.H7} color={COLORS.UI4} margin={0}>
<Typography
variant={TYPOGRAPHY.H7}
color={COLORS.TEXT_ALTERNATIVE}
margin={0}
>
{isDefaultSettingsSelected
? t('advancedGasFeeDefaultOptOut')
: t('advancedGasFeeDefaultOptIn', [

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

@ -100,7 +100,7 @@ const AssetList = ({ onClickAsset }) => {
<Box marginTop={4}>
<Box justifyContent={JUSTIFY_CONTENT.CENTER}>
<Typography
color={COLORS.UI4}
color={COLORS.TEXT_ALTERNATIVE}
variant={TYPOGRAPHY.H6}
fontWeight={FONT_WEIGHT.NORMAL}
>

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

@ -184,7 +184,7 @@ export default function CollectibleDetails({ collectible }) {
>
<div>
<Typography
color={COLORS.BLACK}
color={COLORS.TEXT_DEFAULT}
variant={TYPOGRAPHY.H4}
fontWeight={FONT_WEIGHT.BOLD}
boxProps={{ margin: 0, marginBottom: 2 }}
@ -192,7 +192,7 @@ export default function CollectibleDetails({ collectible }) {
{name}
</Typography>
<Typography
color={COLORS.UI3}
color={COLORS.TEXT_MUTED}
variant={TYPOGRAPHY.H5}
boxProps={{ margin: 0, marginBottom: 4 }}
overflowWrap={OVERFLOW_WRAP.BREAK_WORD}
@ -203,7 +203,7 @@ export default function CollectibleDetails({ collectible }) {
{description ? (
<div>
<Typography
color={COLORS.BLACK}
color={COLORS.TEXT_DEFAULT}
variant={TYPOGRAPHY.H6}
fontWeight={FONT_WEIGHT.BOLD}
className="collectible-details__description"
@ -212,7 +212,7 @@ export default function CollectibleDetails({ collectible }) {
{t('description')}
</Typography>
<Typography
color={COLORS.UI4}
color={COLORS.TEXT_ALTERNATIVE}
variant={TYPOGRAPHY.H6}
boxProps={{ margin: 0, marginBottom: 4 }}
>
@ -226,7 +226,7 @@ export default function CollectibleDetails({ collectible }) {
<Box marginBottom={2}>
<Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.ROW}>
<Typography
color={COLORS.BLACK}
color={COLORS.TEXT_DEFAULT}
variant={TYPOGRAPHY.H6}
fontWeight={FONT_WEIGHT.BOLD}
boxProps={{
@ -239,7 +239,7 @@ export default function CollectibleDetails({ collectible }) {
{t('source')}
</Typography>
<Typography
color={COLORS.PRIMARY1}
color={COLORS.PRIMARY_DEFAULT}
variant={TYPOGRAPHY.H6}
boxProps={{
margin: 0,
@ -259,7 +259,7 @@ export default function CollectibleDetails({ collectible }) {
</Box>
<Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.ROW}>
<Typography
color={COLORS.BLACK}
color={COLORS.TEXT_DEFAULT}
variant={TYPOGRAPHY.H6}
fontWeight={FONT_WEIGHT.BOLD}
boxProps={{
@ -277,7 +277,7 @@ export default function CollectibleDetails({ collectible }) {
className="collectible-details__contract-wrapper"
>
<Typography
color={COLORS.PRIMARY1}
color={COLORS.PRIMARY_DEFAULT}
variant={TYPOGRAPHY.H6}
overflowWrap={OVERFLOW_WRAP.BREAK_WORD}
boxProps={{

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

@ -33,7 +33,7 @@ export default function CollectiblesDetectionNotice() {
</Box>
<Box paddingLeft={4}>
<Typography
color={COLORS.BLACK}
color={COLORS.TEXT_DEFAULT}
align={TEXT_ALIGN.LEFT}
variant={TYPOGRAPHY.H6}
fontWeight={FONT_WEIGHT.BOLD}
@ -41,7 +41,7 @@ export default function CollectiblesDetectionNotice() {
{t('newNFTsDetected')}
</Typography>
<Typography
color={COLORS.BLACK}
color={COLORS.TEXT_DEFAULT}
align={TEXT_ALIGN.LEFT}
variant={TYPOGRAPHY.H6}
boxProps={{ marginBottom: 4 }}

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

@ -160,7 +160,7 @@ export default function CollectiblesItems({
collectionName,
)}
<Typography
color={COLORS.BLACK}
color={COLORS.TEXT_DEFAULT}
variant={TYPOGRAPHY.H5}
margin={[0, 0, 0, 2]}
>

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

@ -83,7 +83,7 @@ export default function CollectiblesTab({ onAddNFT }) {
className="collectibles-tab__link"
>
<Typography
color={COLORS.UI3}
color={COLORS.TEXT_MUTED}
variant={TYPOGRAPHY.H4}
align={TEXT_ALIGN.CENTER}
fontWeight={FONT_WEIGHT.BOLD}
@ -107,7 +107,7 @@ export default function CollectiblesTab({ onAddNFT }) {
flexDirection={FLEX_DIRECTION.COLUMN}
>
<Typography
color={COLORS.UI3}
color={COLORS.TEXT_MUTED}
variant={TYPOGRAPHY.H5}
align={TEXT_ALIGN.CENTER}
>
@ -134,7 +134,7 @@ export default function CollectiblesTab({ onAddNFT }) {
)}
</Box>
<Typography
color={COLORS.UI3}
color={COLORS.TEXT_MUTED}
variant={TYPOGRAPHY.H6}
align={TEXT_ALIGN.CENTER}
>

4
ui/components/app/confirm-page-container/enableEIP1559V2-notice/enableEIP1559V2-notice.js
View File

@ -50,7 +50,7 @@ export default function EnableEIP1559V2Notice({ isFirstAlert }) {
</Box>
<Box paddingLeft={4}>
<Typography
color={COLORS.BLACK}
color={COLORS.TEXT_DEFAULT}
align={TEXT_ALIGN.LEFT}
variant={TYPOGRAPHY.H7}
fontWeight={FONT_WEIGHT.BOLD}
@ -58,7 +58,7 @@ export default function EnableEIP1559V2Notice({ isFirstAlert }) {
{t('enableEIP1559V2Header')}
</Typography>
<Typography
color={COLORS.BLACK}
color={COLORS.TEXT_DEFAULT}
align={TEXT_ALIGN.LEFT}
variant={TYPOGRAPHY.H7}
boxProps={{ marginBottom: 2 }}

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

@ -14,37 +14,53 @@ export default function EditGasDisplayEducation() {
return (
<div className="edit-gas-display-education">
<Typography tag="p" color={COLORS.UI4} variant={TYPOGRAPHY.H6}>
<Typography
tag="p"
color={COLORS.TEXT_ALTERNATIVE}
variant={TYPOGRAPHY.H6}
>
{t('editGasEducationModalIntro')}
</Typography>
<Typography
color={COLORS.BLACK}
color={COLORS.TEXT_DEFAULT}
variant={TYPOGRAPHY.h6}
fontWeight={FONT_WEIGHT.BOLD}
>
{t('editGasHigh')}
</Typography>
<Typography tag="p" color={COLORS.UI4} variant={TYPOGRAPHY.H6}>
<Typography
tag="p"
color={COLORS.TEXT_ALTERNATIVE}
variant={TYPOGRAPHY.H6}
>
{t('editGasEducationHighExplanation')}
</Typography>
<Typography
color={COLORS.BLACK}
color={COLORS.TEXT_DEFAULT}
variant={TYPOGRAPHY.h6}
fontWeight={FONT_WEIGHT.BOLD}
>
{t('editGasMedium')}
</Typography>
<Typography tag="p" color={COLORS.UI4} variant={TYPOGRAPHY.H6}>
<Typography
tag="p"
color={COLORS.TEXT_ALTERNATIVE}
variant={TYPOGRAPHY.H6}
>
{t('editGasEducationMediumExplanation')}
</Typography>
<Typography
color={COLORS.BLACK}
color={COLORS.TEXT_DEFAULT}
variant={TYPOGRAPHY.h6}
fontWeight={FONT_WEIGHT.BOLD}
>
{t('editGasLow')}
</Typography>
<Typography tag="p" color={COLORS.UI4} variant={TYPOGRAPHY.H6}>
<Typography
tag="p"
color={COLORS.TEXT_ALTERNATIVE}
variant={TYPOGRAPHY.H6}
>
{t('editGasEducationLowExplanation')}
</Typography>
</div>

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

@ -182,7 +182,7 @@ export default function EditGasDisplay({
{mode === EDIT_GAS_MODES.SPEED_UP && (
<div className="edit-gas-display__top-tooltip">
<Typography
color={COLORS.BLACK}
color={COLORS.TEXT_DEFAULT}
variant={TYPOGRAPHY.H8}
fontWeight={FONT_WEIGHT.BOLD}
>

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

@ -80,7 +80,10 @@ export default function EditGasFeeButton({ userAcknowledgedGasMissing }) {
<InfoTooltip
contentText={
<div className="edit-gas-fee-button__tooltip">
<Typography variant={TYPOGRAPHY.H7} color={COLORS.NEUTRAL_GREY}>
<Typography
variant={TYPOGRAPHY.H7}
color={COLORS.TEXT_ALTERNATIVE}
>
{t('dappSuggestedTooltip', [transaction.origin])}
</Typography>
<Typography variant={TYPOGRAPHY.H7}>

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

@ -91,7 +91,7 @@ const EditGasFeePopover = () => {
<Typography
className="edit-gas-fee-popover__know-more"
align="center"
color={COLORS.UI4}
color={COLORS.TEXT_ALTERNATIVE}
tag={TYPOGRAPHY.Paragraph}
variant={TYPOGRAPHY.H7}
>

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

@ -124,7 +124,7 @@ const EditGasToolTip = ({
{maxFeePerGas && (
<Typography
variant={TYPOGRAPHY.H7}
color={COLORS.NEUTRAL_GREY}
color={COLORS.TEXT_ALTERNATIVE}
className="edit-gas-tooltip__container__value"
>
{roundToDecimalPlacesRemovingExtraZeroes(maxFeePerGas, 4)}
@ -142,7 +142,7 @@ const EditGasToolTip = ({
{maxPriorityFeePerGas && (
<Typography
variant={TYPOGRAPHY.H7}
color={COLORS.NEUTRAL_GREY}
color={COLORS.TEXT_ALTERNATIVE}
className="edit-gas-tooltip__container__value"
>
{roundToDecimalPlacesRemovingExtraZeroes(
@ -163,7 +163,7 @@ const EditGasToolTip = ({
{gasLimit && (
<Typography
variant={TYPOGRAPHY.H7}
color={COLORS.NEUTRAL_GREY}
color={COLORS.TEXT_ALTERNATIVE}
className="edit-gas-tooltip__container__value"
>
{roundToDecimalPlacesRemovingExtraZeroes(gasLimit, 4)}

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

@ -20,7 +20,7 @@ const NetworkStatistics = () => {
return (
<div className="network-statistics">
<Typography
color={COLORS.UI4}
color={COLORS.TEXT_ALTERNATIVE}
fontWeight={FONT_WEIGHT.BOLD}
margin={[3, 0]}
variant={TYPOGRAPHY.H8}

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

@ -31,7 +31,7 @@ export default function RecoveryPhraseReminder({ onConfirm, hasBackedUp }) {
<Popover centerTitle title={t('recoveryPhraseReminderTitle')}>
<Box padding={[0, 4, 6, 4]} className="recovery-phrase-reminder">
<Typography
color={COLORS.BLACK}
color={COLORS.TEXT_DEFAULT}
align={TEXT_ALIGN.CENTER}
variant={TYPOGRAPHY.Paragraph}
boxProps={{ marginTop: 0, marginBottom: 4 }}
@ -43,7 +43,7 @@ export default function RecoveryPhraseReminder({ onConfirm, hasBackedUp }) {
<li>
<Typography
tag="span"
color={COLORS.BLACK}
color={COLORS.TEXT_DEFAULT}
fontWeight={FONT_WEIGHT.BOLD}
>
{t('recoveryPhraseReminderItemOne')}

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

@ -72,7 +72,7 @@ export default function SrpInput({ onChange }) {
)}
{srpError ? (
<Typography
color={COLORS.ERROR1}
color={COLORS.ERROR_DEFAULT}
tag="span"
className="import-srp__srp-error"
>

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

@ -44,12 +44,12 @@ export default function TransactionDetailItem({
})}
>
{detailText && (
<Typography variant={TYPOGRAPHY.H6} color={COLORS.UI4}>
<Typography variant={TYPOGRAPHY.H6} color={COLORS.TEXT_ALTERNATIVE}>
{detailText}
</Typography>
)}
<Typography
color={COLORS.BLACK}
color={COLORS.TEXT_DEFAULT}
fontWeight={boldHeadings ? FONT_WEIGHT.BOLD : FONT_WEIGHT.NORMAL}
variant={TYPOGRAPHY.H6}
margin={[1, 0, 1, 1]}
@ -63,14 +63,14 @@ export default function TransactionDetailItem({
{React.isValidElement(subTitle) ? (
<div>{subTitle}</div>
) : (
<Typography variant={TYPOGRAPHY.H7} color={COLORS.UI4}>
<Typography variant={TYPOGRAPHY.H7} color={COLORS.TEXT_ALTERNATIVE}>
{subTitle}
</Typography>
)}
<Typography
variant={TYPOGRAPHY.H7}
color={COLORS.UI4}
color={COLORS.TEXT_ALTERNATIVE}
align="end"
className="transaction-detail-item__row-subText"
>

4
ui/components/app/transaction-total-banner/transaction-total-banner.component.js
View File

@ -11,12 +11,12 @@ export default function TransactionTotalBanner({
}) {
return (
<div className="transaction-total-banner">
<Typography color={COLORS.BLACK} variant={TYPOGRAPHY.H1}>
<Typography color={COLORS.TEXT_DEFAULT} variant={TYPOGRAPHY.H1}>
{total}
</Typography>
{detail && (
<Typography
color={COLORS.BLACK}
color={COLORS.TEXT_DEFAULT}
variant={TYPOGRAPHY.H6}
className="transaction-total-banner__detail"
>

2
ui/components/ui/definition-list/definition-list.js
View File

@ -53,7 +53,7 @@ export default function DefinitionList({
</Typography>
<Typography
variant={TYPOGRAPHY.H6}
color={COLORS.UI4}
color={COLORS.TEXT_ALTERNATIVE}
{...definitionTypography}
boxProps={{
marginTop: 0,

10
ui/components/ui/form-field/form-field.js
View File

@ -58,7 +58,7 @@ export default function FormField({
<Typography
tag={TYPOGRAPHY.H6}
variant={TYPOGRAPHY.H6}
color={COLORS.UI4}
color={COLORS.TEXT_ALTERNATIVE}
boxProps={{ display: DISPLAY.INLINE_BLOCK }}
>
{titleUnit}
@ -108,7 +108,7 @@ export default function FormField({
)}
{error && (
<Typography
color={COLORS.ERROR1}
color={COLORS.ERROR_DEFAULT}
variant={TYPOGRAPHY.H7}
className="form-field__error"
>
@ -117,7 +117,7 @@ export default function FormField({
)}
{warning && (
<Typography
color={COLORS.UI4}
color={COLORS.TEXT_ALTERNATIVE}
variant={TYPOGRAPHY.H7}
className="form-field__warning"
>
@ -126,7 +126,7 @@ export default function FormField({
)}
{passwordStrength && (
<Typography
color={COLORS.BLACK}
color={COLORS.TEXT_DEFAULT}
variant={TYPOGRAPHY.H7}
className="form-field__password-strength"
>
@ -135,7 +135,7 @@ export default function FormField({
)}
{passwordStrengthText && (
<Typography
color={COLORS.UI4}
color={COLORS.TEXT_ALTERNATIVE}
variant={TYPOGRAPHY.H8}
className="form-field__password-strength-text"
>

6
ui/components/ui/numeric-input/numeric-input.component.js
View File

@ -44,7 +44,11 @@ export default function NumericInput({
placeholder={placeholder}
/>
{detailText && (
<Typography color={COLORS.UI4} variant={TYPOGRAPHY.H7} tag="span">
<Typography
color={COLORS.TEXT_ALTERNATIVE}
variant={TYPOGRAPHY.H7}
tag="span"
>
{detailText}
</Typography>
)}

2
ui/components/ui/radio-group/radio-group.component.js
View File

@ -48,7 +48,7 @@ export default function RadioGroup({ options, name, selectedValue, onChange }) {
<label className="radio-group__column-inner">
{hasRecommendation && (
<Typography
color={COLORS.SUCCESS3}
color={COLORS.SUCCESS_DEFAULT}
className="radio-group__column-recommended"
variant={TYPOGRAPHY.H7}
>

15
ui/components/ui/slider/slider.component.js
View File

@ -80,14 +80,20 @@ const Slider = ({
<InfoTooltip position="top" contentText={tooltipText} />
)}
{valueText && (
<Typography tag={TYPOGRAPHY.Paragraph} color={COLORS.UI4}>
<Typography
tag={TYPOGRAPHY.Paragraph}
color={COLORS.TEXT_ALTERNATIVE}
>
{valueText}
</Typography>
)}
</div>
{titleDetail && (
<div className="slider__heading-detail">
<Typography tag={TYPOGRAPHY.Paragraph} color={COLORS.UI4}>
<Typography
tag={TYPOGRAPHY.Paragraph}
color={COLORS.TEXT_ALTERNATIVE}
>
{titleDetail}
</Typography>
</div>
@ -97,7 +103,10 @@ const Slider = ({
<div className="slider__footer">
<div className="slider__footer-info">
{infoText && (
<Typography tag={TYPOGRAPHY.Paragraph} color={COLORS.UI4}>
<Typography
tag={TYPOGRAPHY.Paragraph}
color={COLORS.TEXT_ALTERNATIVE}
>
{infoText}
</Typography>
)}

4
ui/pages/confirm-approve/confirm-approve-content/confirm-approve-content.component.js
View File

@ -488,7 +488,7 @@ export default class ConfirmApproveContent extends Component {
<Typography
variant={TYPOGRAPHY.H6}
fontWeight={FONT_WEIGHT.NORMAL}
color={COLORS.UI4}
color={COLORS.TEXT_ALTERNATIVE}
boxProps={{ marginLeft: 1, marginTop: 2 }}
>
{getURLHostName(origin)}
@ -519,7 +519,7 @@ export default class ConfirmApproveContent extends Component {
<Typography
variant={TYPOGRAPHY.H6}
fontWeight={FONT_WEIGHT.NORMAL}
color={COLORS.UI4}
color={COLORS.TEXT_ALTERNATIVE}
boxProps={{ marginBottom: 0 }}
>
{ellipsify(toAddress)}

2
ui/pages/confirm-transaction-base/confirm-transaction-base.component.js
View File

@ -541,7 +541,7 @@ export default class ConfirmTransactionBase extends Component {
<Typography
variant={TYPOGRAPHY.H7}
fontStyle={FONT_STYLE.ITALIC}
color={COLORS.UI4}
color={COLORS.TEXT_ALTERNATIVE}
>
{t('transactionDetailDappGasMoreInfo')}
</Typography>

10
ui/pages/first-time-flow/seed-phrase/seed-phrase-intro/seed-phrase-intro.component.js
View File

@ -42,14 +42,14 @@ export default function SeedPhraseIntro() {
<div className="seed-phrase-intro__sections">
<div className="seed-phrase-intro__left">
<Typography
color={COLORS.BLACK}
color={COLORS.TEXT_DEFAULT}
variant={TYPOGRAPHY.H1}
boxProps={{ marginTop: 0, marginBottom: 4 }}
>
{t('seedPhraseIntroTitle')}
</Typography>
<Typography
color={COLORS.BLACK}
color={COLORS.TEXT_DEFAULT}
boxProps={{ marginBottom: 4 }}
variant={TYPOGRAPHY.Paragraph}
className="seed-phrase-intro__copy"
@ -93,7 +93,7 @@ export default function SeedPhraseIntro() {
<Box marginBottom={4}>
<Typography
tag="span"
color={COLORS.BLACK}
color={COLORS.TEXT_DEFAULT}
fontWeight={FONT_WEIGHT.BOLD}
boxProps={{ display: 'block' }}
>
@ -104,7 +104,7 @@ export default function SeedPhraseIntro() {
<Box marginBottom={4}>
<Typography
tag="span"
color={COLORS.BLACK}
color={COLORS.TEXT_DEFAULT}
fontWeight={FONT_WEIGHT.BOLD}
boxProps={{ display: 'block' }}
>
@ -120,7 +120,7 @@ export default function SeedPhraseIntro() {
<Box marginBottom={4}>
<Typography
tag="span"
color={COLORS.BLACK}
color={COLORS.TEXT_DEFAULT}
fontWeight={FONT_WEIGHT.BOLD}
boxProps={{ display: 'block' }}
>

4
ui/pages/home/home.component.js
View File

@ -277,14 +277,14 @@ export default class Home extends PureComponent {
descriptionText={
<>
<Typography
color={COLORS.UI1}
color={COLORS.TEXT_MUTED}
variant={TYPOGRAPHY.H5}
fontWeight={FONT_WEIGHT.NORMAL}
>
{t('somethingWentWrong')}
</Typography>
<Typography
color={COLORS.UI1}
color={COLORS.TEXT_MUTED}
variant={TYPOGRAPHY.H7}
fontWeight={FONT_WEIGHT.NORMAL}
>

8
ui/pages/keychains/restore-vault.js
View File

@ -70,13 +70,13 @@ class RestoreVaultPage extends Component {
>
{`< ${t('back')}`}
</a>
<Typography variant={TYPOGRAPHY.H1} color={COLORS.BLACK}>
<Typography variant={TYPOGRAPHY.H1} color={COLORS.TEXT_DEFAULT}>
{t('resetWallet')}
</Typography>
<Typography color={COLORS.BLACK}>
<Typography color={COLORS.TEXT_DEFAULT}>
{t('resetWalletSubHeader')}
</Typography>
<Typography color={COLORS.BLACK} margin={[4, 0]}>
<Typography color={COLORS.TEXT_DEFAULT} margin={[4, 0]}>
{t('resetWalletUsingSRP', [
<Button
type="link"
@ -110,7 +110,7 @@ class RestoreVaultPage extends Component {
</Button>,
])}
</Typography>
<Typography color={COLORS.BLACK} margin={[0, 0, 4]}>
<Typography color={COLORS.TEXT_DEFAULT} margin={[0, 0, 4]}>
{t('resetWalletWarning')}
</Typography>
<CreateNewVault

2
ui/pages/onboarding-flow/metametrics/metametrics.js
View File

@ -123,7 +123,7 @@ export default function OnboardingMetametrics() {
</li>
</ul>
<Typography
color={COLORS.UI4}
color={COLORS.TEXT_ALTERNATIVE}
align={TEXT_ALIGN.CENTER}
variant={TYPOGRAPHY.H6}
className="onboarding-metametrics__terms"

2
ui/pages/onboarding-flow/recovery-phrase/recovery-phrase-chips.js
View File

@ -89,7 +89,7 @@ export default function RecoveryPhraseChips({
<i className="far fa-eye" color="white" />
<Typography
variant={TYPOGRAPHY.H6}
color={COLORS.WHITE}
color={COLORS.OVERLAY_INVERSE}
className="recovery-phrase__secret-blocker--text"
>
{t('makeSureNoOneWatching')}

4
ui/pages/settings/flask/snaps-list-tab/snap-list-tab.js
View File

@ -45,7 +45,7 @@ const SnapListTab = () => {
</Typography>
<Typography
variant={TYPOGRAPHY.H6}
color={COLORS.UI4}
color={COLORS.TEXT_ALTERNATIVE}
marginBottom={2}
>
{t('manageSnaps')}
@ -82,7 +82,7 @@ const SnapListTab = () => {
justifyContent={JUSTIFY_CONTENT.CENTER}
alignItems={ALIGN_ITEMS.CENTER}
>
<Typography variant={TYPOGRAPHY.H4} color={COLORS.UI4}>
<Typography variant={TYPOGRAPHY.H4} color={COLORS.TEXT_ALTERNATIVE}>
<span>{t('noSnaps')}</span>
</Typography>
</Box>

11
ui/pages/settings/flask/view-snap/view-snap.js
View File

@ -104,7 +104,7 @@ function ViewSnap() {
<div className="view-snap__section">
<Typography
variant={TYPOGRAPHY.H6}
color={COLORS.UI4}
color={COLORS.TEXT_ALTERNATIVE}
boxProps={{ marginTop: 5 }}
>
{snap.manifest.description}
@ -112,7 +112,7 @@ function ViewSnap() {
</div>
<div className="view-snap__section view-snap__permission-list">
<Typography variant={TYPOGRAPHY.H4}>{t('permissions')}</Typography>
<Typography variant={TYPOGRAPHY.H6} color={COLORS.UI4}>
<Typography variant={TYPOGRAPHY.H6} color={COLORS.TEXT_ALTERNATIVE}>
{t('snapAccess', [snap.manifest.proposedName])}
</Typography>
<Box width={FRACTIONS.TEN_TWELFTHS}>
@ -126,7 +126,10 @@ function ViewSnap() {
<Typography variant={TYPOGRAPHY.H4}>
{t('connectedSites')}
</Typography>
<Typography variant={TYPOGRAPHY.H6} color={COLORS.UI4}>
<Typography
variant={TYPOGRAPHY.H6}
color={COLORS.TEXT_ALTERNATIVE}
>
{t('connectedSnapSites', [snap.manifest.proposedName])}
</Typography>
<ConnectedSitesList
@ -141,7 +144,7 @@ function ViewSnap() {
<Typography variant={TYPOGRAPHY.H4}>{t('removeSnap')}</Typography>
<Typography
variant={TYPOGRAPHY.H6}
color={COLORS.UI4}
color={COLORS.TEXT_ALTERNATIVE}
boxProps={{ paddingBottom: 3 }}
>
{t('removeSnapDescription')}

6
ui/pages/settings/settings-tab/settings-tab.component.js
View File

@ -193,7 +193,7 @@ export default class SettingsTab extends PureComponent {
id="blockie-optin"
>
<div className="settings-page__content-item">
<Typography variant={TYPOGRAPHY.H5} color={COLORS.BLACK}>
<Typography variant={TYPOGRAPHY.H5} color={COLORS.TEXT_DEFAULT}>
{t('accountIdenticon')}
</Typography>
<span className="settings-page__content-item__description">
@ -221,7 +221,7 @@ export default class SettingsTab extends PureComponent {
/>
</div>
<Typography
color={COLORS.BLACK}
color={COLORS.TEXT_DEFAULT}
variant={TYPOGRAPHY.H7}
margin={[0, 12, 0, 3]}
>
@ -247,7 +247,7 @@ export default class SettingsTab extends PureComponent {
/>
</div>
<Typography
color={COLORS.BLACK}
color={COLORS.TEXT_DEFAULT}
variant={TYPOGRAPHY.H7}
margin={[0, 0, 0, 3]}
>

2
ui/pages/swaps/awaiting-signatures/awaiting-signatures.js
View File

@ -89,7 +89,7 @@ export default function AwaitingSignatures() {
<Box marginTop={3} marginBottom={4}>
<PulseLoader />
</Box>
<Typography color={COLORS.BLACK} variant={TYPOGRAPHY.H3}>
<Typography color={COLORS.TEXT_DEFAULT} variant={TYPOGRAPHY.H3}>
{headerText}
</Typography>
{needsTwoConfirmations && (

4
ui/pages/swaps/build-quote/build-quote.js
View File

@ -622,7 +622,7 @@ export default function BuildQuote({
</Typography>
<Typography
variant={TYPOGRAPHY.H8}
color={COLORS.UI4}
color={COLORS.TEXT_ALTERNATIVE}
boxProps={{ marginTop: 3 }}
>
{t('stxSubDescription')}&nbsp;
@ -630,7 +630,7 @@ export default function BuildQuote({
tag="span"
fontWeight={FONT_WEIGHT.BOLD}
variant={TYPOGRAPHY.H8}
color={COLORS.UI4}
color={COLORS.TEXT_ALTERNATIVE}
>
{t('stxYouCanOptOut')}&nbsp;
</Typography>

2
ui/pages/swaps/fee-card/fee-card.js
View File

@ -133,7 +133,7 @@ export default function FeeCard({
<Typography
tag="span"
fontWeight={FONT_WEIGHT.BOLD}
color={COLORS.UI4}
color={COLORS.TEXT_ALTERNATIVE}
variant={TYPOGRAPHY.H7}
>
{t('maxFee')}

18
ui/pages/swaps/smart-transaction-status/smart-transaction-status.js
View File

@ -263,11 +263,11 @@ export default function SmartTransactionStatus() {
justifyContent={JUSTIFY_CONTENT.CENTER}
alignItems={ALIGN_ITEMS.CENTER}
>
<Typography color={COLORS.UI4} variant={TYPOGRAPHY.H6}>
<Typography color={COLORS.TEXT_ALTERNATIVE} variant={TYPOGRAPHY.H6}>
{`${fetchParams?.value && Number(fetchParams.value).toFixed(5)} `}
</Typography>
<Typography
color={COLORS.UI4}
color={COLORS.TEXT_ALTERNATIVE}
variant={TYPOGRAPHY.H6}
fontWeight={FONT_WEIGHT.BOLD}
boxProps={{ marginLeft: 1, marginRight: 2 }}
@ -290,14 +290,14 @@ export default function SmartTransactionStatus() {
fallbackClassName="main-quote-summary__icon-fallback"
/>
<Typography
color={COLORS.UI4}
color={COLORS.TEXT_ALTERNATIVE}
variant={TYPOGRAPHY.H6}
boxProps={{ marginLeft: 2 }}
>
{`~${destinationValue && Number(destinationValue).toFixed(5)} `}
</Typography>
<Typography
color={COLORS.UI4}
color={COLORS.TEXT_ALTERNATIVE}
variant={TYPOGRAPHY.H6}
fontWeight={FONT_WEIGHT.BOLD}
boxProps={{ marginLeft: 1 }}
@ -324,14 +324,14 @@ export default function SmartTransactionStatus() {
>
<TimerIcon />
<Typography
color={COLORS.UI4}
color={COLORS.TEXT_ALTERNATIVE}
variant={TYPOGRAPHY.H6}
boxProps={{ marginLeft: 1 }}
>
{`${t('swapCompleteIn')} `}
</Typography>
<Typography
color={COLORS.UI4}
color={COLORS.TEXT_ALTERNATIVE}
variant={TYPOGRAPHY.H6}
fontWeight={FONT_WEIGHT.BOLD}
boxProps={{ marginLeft: 1 }}
@ -342,7 +342,7 @@ export default function SmartTransactionStatus() {
</Box>
)}
<Typography
color={COLORS.BLACK}
color={COLORS.TEXT_DEFAULT}
variant={TYPOGRAPHY.H4}
fontWeight={FONT_WEIGHT.BOLD}
>
@ -366,7 +366,7 @@ export default function SmartTransactionStatus() {
<Typography
variant={TYPOGRAPHY.H6}
boxProps={{ marginTop: 0 }}
color={COLORS.UI4}
color={COLORS.TEXT_ALTERNATIVE}
>
{description}
</Typography>
@ -379,7 +379,7 @@ export default function SmartTransactionStatus() {
<Typography
variant={TYPOGRAPHY.H7}
boxProps={{ marginTop: 8 }}
color={COLORS.UI4}
color={COLORS.TEXT_ALTERNATIVE}
>
{subDescription}
</Typography>

20
ui/pages/token-details/token-details-page.js
View File

@ -74,7 +74,7 @@ export default function TokenDetailsPage() {
fontWeight={FONT_WEIGHT.BOLD}
margin={[4, 0, 0, 0]}
variant={TYPOGRAPHY.H6}
color={COLORS.BLACK}
color={COLORS.TEXT_DEFAULT}
className="token-details__title"
>
{t('tokenDetails')}
@ -90,7 +90,7 @@ export default function TokenDetailsPage() {
fontWeight={FONT_WEIGHT.BOLD}
margin={[0, 5, 0, 0]}
variant={TYPOGRAPHY.H4}
color={COLORS.BLACK}
color={COLORS.TEXT_DEFAULT}
className="token-details__token-value"
>
{tokenBalance || ''}
@ -106,14 +106,14 @@ export default function TokenDetailsPage() {
<Typography
margin={[4, 0, 0, 0]}
variant={TYPOGRAPHY.H7}
color={COLORS.UI4}
color={COLORS.TEXT_ALTERNATIVE}
>
{tokenCurrencyBalance || ''}
</Typography>
<Typography
margin={[6, 0, 0, 0]}
variant={TYPOGRAPHY.H9}
color={COLORS.UI4}
color={COLORS.TEXT_ALTERNATIVE}
fontWeight={FONT_WEIGHT.BOLD}
>
{t('tokenContractAddress')}
@ -122,7 +122,7 @@ export default function TokenDetailsPage() {
<Typography
variant={TYPOGRAPHY.H7}
margin={[2, 0, 0, 0]}
color={COLORS.BLACK}
color={COLORS.TEXT_DEFAULT}
overflowWrap={OVERFLOW_WRAP.BREAK_WORD}
className="token-details__token-address"
>
@ -147,7 +147,7 @@ export default function TokenDetailsPage() {
<Typography
variant={TYPOGRAPHY.H9}
margin={[4, 0, 0, 0]}
color={COLORS.UI4}
color={COLORS.TEXT_ALTERNATIVE}
fontWeight={FONT_WEIGHT.BOLD}
>
{t('tokenDecimalTitle')}
@ -155,14 +155,14 @@ export default function TokenDetailsPage() {
<Typography
variant={TYPOGRAPHY.H7}
margin={[1, 0, 0, 0]}
color={COLORS.BLACK}
color={COLORS.TEXT_DEFAULT}
>
{token.decimals}
</Typography>
<Typography
variant={TYPOGRAPHY.H9}
margin={[4, 0, 0, 0]}
color={COLORS.UI4}
color={COLORS.TEXT_ALTERNATIVE}
fontWeight={FONT_WEIGHT.BOLD}
>
{t('network')}
@ -170,7 +170,7 @@ export default function TokenDetailsPage() {
<Typography
variant={TYPOGRAPHY.H7}
margin={[1, 0, 0, 0]}
color={COLORS.BLACK}
color={COLORS.TEXT_DEFAULT}
>
{networkType === NETWORK_TYPE_RPC
? networkNickname ?? t('privateNetwork')
@ -185,7 +185,7 @@ export default function TokenDetailsPage() {
);
}}
>
<Typography variant={TYPOGRAPHY.H6} color={COLORS.PRIMARY1}>
<Typography variant={TYPOGRAPHY.H6} color={COLORS.PRIMARY_DEFAULT}>
{t('hideToken')}
</Typography>
</Button>