diff --git a/.storybook/3.COLORS.stories.mdx b/.storybook/3.COLORS.stories.mdx index b694a721a..507fade1c 100644 --- a/.storybook/3.COLORS.stories.mdx +++ b/.storybook/3.COLORS.stories.mdx @@ -67,6 +67,7 @@ var(--color-text-muted) /** Icons */ var(--color-icon-default) +var(--color-icon-alternative) var(--color-icon-muted) /** Borders */ @@ -75,20 +76,20 @@ var(--color-border-muted) /** Overlays */ var(--color-overlay-default) -var(--color-overlay-inverse) +var(--color-overlay-inverse) [DEPRECATED] /** User Actions */ var(--color-primary-default) var(--color-primary-alternative) var(--color-primary-muted) var(--color-primary-inverse) -var(--color-primary-disabled) +var(--color-primary-disabled) [DEPRECATED] -var(--color-secondary-default) -var(--color-secondary-alternative) -var(--color-secondary-muted) -var(--color-secondary-inverse) -var(--color-secondary-disabled) +var(--color-secondary-default) [DEPRECATED] +var(--color-secondary-alternative) [DEPRECATED] +var(--color-secondary-muted) [DEPRECATED] +var(--color-secondary-inverse) [DEPRECATED] +var(--color-secondary-disabled) [DEPRECATED] /** States */ /** Error */ @@ -96,28 +97,28 @@ var(--color-error-default) var(--color-error-alternative) var(--color-error-muted) var(--color-error-inverse) -var(--color-error-disabled) +var(--color-error-disabled) [DEPRECATED] /** Warning */ var(--color-warning-default) -var(--color-warning-alternative) +var(--color-warning-alternative) [DEPRECATED] var(--color-warning-muted) var(--color-warning-inverse) -var(--color-warning-disabled) +var(--color-warning-disabled) [DEPRECATED] /** Success */ var(--color-success-default) -var(--color-success-alternative) +var(--color-success-alternative) [DEPRECATED] var(--color-success-muted) var(--color-success-inverse) -var(--color-success-disabled) +var(--color-success-disabled) [DEPRECATED] /** Info */ var(--color-info-default) -var(--color-info-alternative) +var(--color-info-alternative) [DEPRECATED] var(--color-info-muted) var(--color-info-inverse) -var(--color-info-disabled) +var(--color-info-disabled) [DEPRECATED] ``` ### **Component colors** (tier 3) diff --git a/package.json b/package.json index e81be4b54..3f0e83e48 100644 --- a/package.json +++ b/package.json @@ -116,7 +116,7 @@ "@material-ui/core": "^4.11.0", "@metamask/contract-metadata": "^1.31.0", "@metamask/controllers": "^29.0.1", - "@metamask/design-tokens": "^1.5.1", + "@metamask/design-tokens": "^1.6.5", "@metamask/eth-ledger-bridge-keyring": "^0.12.0", "@metamask/eth-token-tracker": "^4.0.0", "@metamask/etherscan-link": "^2.1.0", diff --git a/ui/components/app/account-menu/account-menu.component.js b/ui/components/app/account-menu/account-menu.component.js index eaa8e32e7..85cf0bf6c 100644 --- a/ui/components/app/account-menu/account-menu.component.js +++ b/ui/components/app/account-menu/account-menu.component.js @@ -350,7 +350,7 @@ export default class AccountMenu extends Component { }); history.push(NEW_ACCOUNT_ROUTE); }} - icon={} + icon={} text={t('createAccount')} /> } @@ -393,7 +393,7 @@ export default class AccountMenu extends Component { }} icon={ } @@ -406,7 +406,7 @@ export default class AccountMenu extends Component { }} icon={ } @@ -428,7 +428,7 @@ export default class AccountMenu extends Component { }} icon={ } diff --git a/ui/components/app/account-menu/index.scss b/ui/components/app/account-menu/index.scss index b5bb8846d..bbc5a6fec 100644 --- a/ui/components/app/account-menu/index.scss +++ b/ui/components/app/account-menu/index.scss @@ -136,6 +136,7 @@ margin-top: 5px; margin-right: 10px; background-color: var(--color-background-alternative); + border: 1px solid var(--color-border-default); color: var(--color-text-default); font-weight: normal; letter-spacing: 0.5px; diff --git a/ui/components/app/advanced-gas-controls/index.scss b/ui/components/app/advanced-gas-controls/index.scss index e7b41ba31..48e0d8707 100644 --- a/ui/components/app/advanced-gas-controls/index.scss +++ b/ui/components/app/advanced-gas-controls/index.scss @@ -21,6 +21,6 @@ } path { - fill: var(--color-icon-muted); + fill: var(--color-icon-alternative); } } diff --git a/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-input-subtext/advanced-gas-fee-input-subtext.js b/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-input-subtext/advanced-gas-fee-input-subtext.js index ddc0fd1ad..9aba43ec0 100644 --- a/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-input-subtext/advanced-gas-fee-input-subtext.js +++ b/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-input-subtext/advanced-gas-fee-input-subtext.js @@ -25,7 +25,7 @@ function determineTrendInfo(trend, t) { case 'level': return { className: 'fa-arrow-right advanced-gas-fee-input-subtext__level', - color: 'var(--color-icon-default)', + color: 'var(--color-icon-alternative)', title: t('levelArrow'), }; default: diff --git a/ui/components/app/collectible-details/collectible-details.js b/ui/components/app/collectible-details/collectible-details.js index 4e7c433d4..5c8bf8e3a 100644 --- a/ui/components/app/collectible-details/collectible-details.js +++ b/ui/components/app/collectible-details/collectible-details.js @@ -311,7 +311,7 @@ export default function CollectibleDetails({ collectible }) { {copied ? ( t('copiedExclamation') ) : ( - + )} diff --git a/ui/components/app/confirm-page-container/confirm-detail-row/confirm-detail-row.stories.js b/ui/components/app/confirm-page-container/confirm-detail-row/confirm-detail-row.stories.js new file mode 100644 index 000000000..929082c4d --- /dev/null +++ b/ui/components/app/confirm-page-container/confirm-detail-row/confirm-detail-row.stories.js @@ -0,0 +1,47 @@ +import React from 'react'; +import ConfirmDetailRow from '.'; + +export default { + title: 'Components/App/ConfirmPageContainer/ConfirmDetailRow', + id: __filename, + argTypes: { + headerText: { + control: 'text', + }, + headerTextClassName: { + control: 'text', + }, + label: { + control: 'text', + }, + onHeaderClick: { + control: 'text', + }, + primaryValueTextColor: { + control: 'text', + }, + primaryText: { + control: 'text', + }, + secondaryText: { + control: 'text', + }, + value: { + control: 'text', + }, + }, + args: { + headerText: 'headerText', + headerTextClassName: 'headerTextClassName', + label: 'label', + onHeaderClick: 'onHeaderClick', + primaryValueTextColor: 'primaryValueTextColor', + primaryText: 'primaryText', + secondaryText: 'secondaryText', + value: 'value', + }, +}; + +export const DefaultStory = (args) => ; + +DefaultStory.storyName = 'Default'; diff --git a/ui/components/app/confirm-page-container/confirm-detail-row/index.scss b/ui/components/app/confirm-page-container/confirm-detail-row/index.scss index 25a7d8fe1..cfb382f83 100644 --- a/ui/components/app/confirm-page-container/confirm-detail-row/index.scss +++ b/ui/components/app/confirm-page-container/confirm-detail-row/index.scss @@ -26,7 +26,7 @@ } &__secondary { - color: var(--color-icon-default); + color: var(--color-text-alternative); justify-content: flex-end; } @@ -35,7 +35,7 @@ text-transform: uppercase; margin-bottom: 6px; - color: var(--color-icon-default); + color: var(--color-text-default); &--edit { color: var(--color-primary-default); diff --git a/ui/components/app/connected-accounts-list/connected-accounts-list.stories.js b/ui/components/app/connected-accounts-list/connected-accounts-list.stories.js new file mode 100644 index 000000000..48f79b19e --- /dev/null +++ b/ui/components/app/connected-accounts-list/connected-accounts-list.stories.js @@ -0,0 +1,38 @@ +import React from 'react'; +import ConnectedAccountsList from '.'; + +export default { + title: 'Components/App/ConnectedAccountsList', + id: __filename, + argTypes: { + connectedAccounts: { + control: 'array', + }, + selectedAddress: { + control: 'text', + }, + shouldRenderListOptions: { + control: 'boolean', + }, + }, + args: { + connectedAccounts: [ + { + name: 'This is a Really Long Account Name', + address: '0x64a845a5b02460acf8a3d84503b0d68d028b4bb4', + index: 0, + balance: '0x176e5b6f173ebe66', + }, + { + name: 'Account 2', + address: '0xb19ac54efa18cc3a14a5b821bfec73d284bf0c5e', + index: 1, + balance: '0x2d3142f5000', + }, + ], + }, +}; + +export const DefaultStory = (args) => ; + +DefaultStory.storyName = 'Default'; diff --git a/ui/components/app/edit-gas-display/index.scss b/ui/components/app/edit-gas-display/index.scss index 3af1e402c..ee0e13145 100644 --- a/ui/components/app/edit-gas-display/index.scss +++ b/ui/components/app/edit-gas-display/index.scss @@ -28,8 +28,8 @@ button.edit-gas-display__dapp-acknowledgement-button { margin: 40px auto 0 auto; display: block; - color: var(--color-secondary-default); - border: 1px solid var(--color-secondary-default); + color: var(--color-warning-default); + border: 1px solid var(--color-warning-default); text-transform: unset; width: auto; background: transparent; diff --git a/ui/components/app/edit-gas-fee-popover/edit-gas-item/index.scss b/ui/components/app/edit-gas-fee-popover/edit-gas-item/index.scss index ed6fd0035..8e8e2607a 100644 --- a/ui/components/app/edit-gas-fee-popover/edit-gas-item/index.scss +++ b/ui/components/app/edit-gas-fee-popover/edit-gas-item/index.scss @@ -78,7 +78,7 @@ &__time-estimate-low, &__fee-estimate-high { - color: var(--color-secondary-default); + color: var(--color-warning-default); } &__time-estimate-medium, diff --git a/ui/components/app/edit-gas-fee-popover/edit-gas-tooltip/index.scss b/ui/components/app/edit-gas-fee-popover/edit-gas-tooltip/index.scss index 92d067dec..0e354d33e 100644 --- a/ui/components/app/edit-gas-fee-popover/edit-gas-tooltip/index.scss +++ b/ui/components/app/edit-gas-fee-popover/edit-gas-tooltip/index.scss @@ -17,7 +17,7 @@ } &__dialog { - background-color: var(--color-secondary-default); + background-color: var(--color-warning-default); border-radius: 30px; margin: 4px 0; text-align: center; diff --git a/ui/components/app/gas-customization/advanced-gas-inputs/index.scss b/ui/components/app/gas-customization/advanced-gas-inputs/index.scss index a389efc65..177078d9a 100644 --- a/ui/components/app/gas-customization/advanced-gas-inputs/index.scss +++ b/ui/components/app/gas-customization/advanced-gas-inputs/index.scss @@ -23,7 +23,7 @@ } .fa-info-circle { - color: var(--color-icon-default); + color: var(--color-icon-alternative); cursor: pointer; } @@ -41,7 +41,7 @@ &__warning-text { @include H7; - color: var(--color-secondary-default); + color: var(--color-warning-default); } &__input-wrapper { diff --git a/ui/components/app/gas-details-item/index.scss b/ui/components/app/gas-details-item/index.scss index 43b2da44b..c73c6f421 100644 --- a/ui/components/app/gas-details-item/index.scss +++ b/ui/components/app/gas-details-item/index.scss @@ -1,6 +1,6 @@ .gas-details-item { &__gas-fee-warning { - color: var(--color-secondary-default); //@TODO: revisit when warning color tokens are revisited + color: var(--color-warning-default); } &__currency-container, diff --git a/ui/components/app/gas-timing/index.scss b/ui/components/app/gas-timing/index.scss index ca8d1e989..00d6c024d 100644 --- a/ui/components/app/gas-timing/index.scss +++ b/ui/components/app/gas-timing/index.scss @@ -20,7 +20,7 @@ } &--negative-V2 { - color: var(--color-secondary-default); + color: var(--color-warning-default); font-weight: bold; } diff --git a/ui/components/app/modals/qr-scanner/qr-scanner.component.js b/ui/components/app/modals/qr-scanner/qr-scanner.component.js index 68cd8444f..a3fd43501 100644 --- a/ui/components/app/modals/qr-scanner/qr-scanner.component.js +++ b/ui/components/app/modals/qr-scanner/qr-scanner.component.js @@ -251,7 +251,7 @@ export default class QrScanner extends Component { }} /> {ready === READY_STATE.READY ? null : ( - + )} diff --git a/ui/components/app/permissions-connect-permission-list/index.scss b/ui/components/app/permissions-connect-permission-list/index.scss index cb2b462db..8dfc4cb6b 100644 --- a/ui/components/app/permissions-connect-permission-list/index.scss +++ b/ui/components/app/permissions-connect-permission-list/index.scss @@ -17,7 +17,7 @@ padding: 16px; min-width: 16px; min-height: 16px; - color: var(--color-icon-default); + color: var(--color-icon-alternative); font-size: 1rem; } } diff --git a/ui/components/app/qr-hardware-popover/enhanced-reader.js b/ui/components/app/qr-hardware-popover/enhanced-reader.js index ae753145e..18ae2f931 100644 --- a/ui/components/app/qr-hardware-popover/enhanced-reader.js +++ b/ui/components/app/qr-hardware-popover/enhanced-reader.js @@ -55,7 +55,7 @@ const EnhancedReader = ({ handleScan }) => { filter: 'blur(4px)', }} /> - {canplay ? null : } + {canplay ? null : } ); }; diff --git a/ui/components/app/selected-account/selected-account.component.js b/ui/components/app/selected-account/selected-account.component.js index 1dc3c135f..06609b54f 100644 --- a/ui/components/app/selected-account/selected-account.component.js +++ b/ui/components/app/selected-account/selected-account.component.js @@ -63,7 +63,7 @@ class SelectedAccount extends Component {
{shortenAddress(checksummedAddress)}
- +
diff --git a/ui/components/app/tab-bar/index.scss b/ui/components/app/tab-bar/index.scss index 4329b5b5c..793230b62 100644 --- a/ui/components/app/tab-bar/index.scss +++ b/ui/components/app/tab-bar/index.scss @@ -68,6 +68,7 @@ justify-content: center; margin-inline-end: 16px; flex: 0 0 18px; + color: var(--color-icon-alternative); @media screen and (min-width: $break-large) { flex: 0 0 14px; diff --git a/ui/components/app/token-cell/token-cell.js b/ui/components/app/token-cell/token-cell.js index 932976977..5a771b0b5 100644 --- a/ui/components/app/token-cell/token-cell.js +++ b/ui/components/app/token-cell/token-cell.js @@ -29,7 +29,7 @@ export default function TokenCell({ rel="noopener noreferrer" target="_blank" onClick={(event) => event.stopPropagation()} - style={{ color: 'var(--color-secondary-default)' }} + style={{ color: 'var(--color-warning-default)' }} > {t('here')} diff --git a/ui/components/app/transaction-activity-log/transaction-activity-log-icon/transaction-activity-log-icon.stories.js b/ui/components/app/transaction-activity-log/transaction-activity-log-icon/transaction-activity-log-icon.stories.js index 94bda3be5..0436f28d1 100644 --- a/ui/components/app/transaction-activity-log/transaction-activity-log-icon/transaction-activity-log-icon.stories.js +++ b/ui/components/app/transaction-activity-log/transaction-activity-log-icon/transaction-activity-log-icon.stories.js @@ -14,6 +14,9 @@ export default { options: Object.keys(imageHash), }, }, + args: { + eventKey: Object.keys(imageHash)[0], + }, }; export const DefaultStory = (args) => ; diff --git a/ui/components/app/transaction-decoding/transaction-decoding.component.js b/ui/components/app/transaction-decoding/transaction-decoding.component.js index 00b858d4f..b04726910 100644 --- a/ui/components/app/transaction-decoding/transaction-decoding.component.js +++ b/ui/components/app/transaction-decoding/transaction-decoding.component.js @@ -202,7 +202,7 @@ export default function TransactionDecoding({ to = '', inputData: data = '' }) { if (loading) { return (
- +
); } diff --git a/ui/components/app/transaction-detail-item/index.scss b/ui/components/app/transaction-detail-item/index.scss index c7a39c250..a51cae46d 100644 --- a/ui/components/app/transaction-detail-item/index.scss +++ b/ui/components/app/transaction-detail-item/index.scss @@ -34,7 +34,7 @@ margin-inline-start: 4px; path { - fill: var(--color-icon-default); + fill: var(--color-icon-alternative); } } diff --git a/ui/components/app/transaction-status/index.scss b/ui/components/app/transaction-status/index.scss index 55c22472c..6212c0849 100644 --- a/ui/components/app/transaction-status/index.scss +++ b/ui/components/app/transaction-status/index.scss @@ -14,7 +14,7 @@ &--unapproved, &--pending { - color: var(--color-secondary-default); + color: var(--color-warning-default); } &--queued { diff --git a/ui/components/app/wallet-overview/index.scss b/ui/components/app/wallet-overview/index.scss index e408604d9..16526b518 100644 --- a/ui/components/app/wallet-overview/index.scss +++ b/ui/components/app/wallet-overview/index.scss @@ -67,7 +67,7 @@ &__cached-balance, &__cached-star { - color: var(--color-secondary-default); + color: var(--color-warning-default); } &__cached-secondary-balance { diff --git a/ui/components/ui/form-field/form-field.stories.js b/ui/components/ui/form-field/form-field.stories.js index 0c7d0c36f..230ea0036 100644 --- a/ui/components/ui/form-field/form-field.stories.js +++ b/ui/components/ui/form-field/form-field.stories.js @@ -57,7 +57,7 @@ export const FormFieldWithTitleDetail = (args) => {