From ad28c81a39e464c03d675e355d20a2d1e1e706f2 Mon Sep 17 00:00:00 2001 From: Guillaume Roux Date: Wed, 16 Mar 2022 15:49:25 +0100 Subject: [PATCH] General backgrounds and borders design token updates (#13764) Co-authored-by: Guillaume Roux Co-authored-by: George Marshall Co-authored-by: David Walsh --- app/phishing.html | 167 +++++++++++++----- package.json | 2 +- .../account-menu/account-menu.component.js | 31 +++- ui/components/app/account-menu/index.scss | 33 ++-- .../invalid-custom-network-alert.scss | 6 +- .../unconnected-account-alert.scss | 8 +- ui/components/app/app-header/index.scss | 4 +- .../app/app-loading-spinner/index.scss | 2 +- .../app/asset-list-item/asset-list-item.scss | 3 +- .../app/collectibles-items/index.scss | 4 +- .../confirm-detail-row/index.scss | 8 +- .../confirm-page-container-summary/index.scss | 12 +- .../confirm-page-container-warning/index.scss | 6 +- .../confirm-page-container-content/index.scss | 14 +- .../confirm-page-container-header/index.scss | 3 +- .../index.scss | 4 +- .../enableEIP1559V2-notice/index.scss | 2 +- .../app/connected-accounts-list/index.scss | 12 +- .../connected-accounts-permissions/index.scss | 2 +- .../app/connected-status-indicator/index.scss | 13 +- ui/components/app/dropdowns/dropdown.js | 8 +- .../app/dropdowns/network-dropdown.js | 71 +++----- .../app/dropdowns/network-dropdown.test.js | 11 +- .../edit-gas-item/index.scss | 10 +- ui/components/app/menu-bar/index.scss | 5 +- .../app/modals/new-account-modal/index.scss | 12 +- ui/components/app/selected-account/index.scss | 9 +- .../app/signature-request-original/index.scss | 6 +- .../app/transaction-breakdown/index.scss | 6 +- .../transaction-breakdown-row/index.scss | 4 +- .../transaction-list-item-details/index.scss | 4 +- .../app/transaction-list-item/index.scss | 8 +- ui/components/app/transaction-list/index.scss | 6 +- ui/components/app/wallet-overview/index.scss | 12 +- ui/components/ui/list-item/index.scss | 14 +- ui/components/ui/menu/menu.scss | 6 +- ui/components/ui/nickname-popover/index.scss | 12 +- ui/components/ui/page-container/index.scss | 20 +-- ui/components/ui/popover/index.scss | 9 +- ui/components/ui/tabs/index.scss | 4 +- ui/components/ui/tabs/tab/index.scss | 4 +- .../ui/update-nickname-popover/index.scss | 8 +- ui/css/base-styles.scss | 2 +- ui/css/itcss/components/network.scss | 30 ++-- ui/css/itcss/components/newui-sections.scss | 8 +- ui/pages/asset/asset.scss | 6 +- ui/pages/create-account/index.scss | 24 +-- ui/pages/home/index.scss | 14 +- ui/pages/permissions-connect/index.scss | 6 +- ui/pages/send/send.scss | 36 ++-- ui/pages/settings/index.scss | 32 ++-- yarn.lock | 2 +- 52 files changed, 408 insertions(+), 337 deletions(-) diff --git a/app/phishing.html b/app/phishing.html index ae9d125da..f7c159437 100644 --- a/app/phishing.html +++ b/app/phishing.html @@ -1,40 +1,101 @@ - + MetaMask Phishing Detection - - - - + + + + - - + +
- +

MetaMask Phishing Detection @@ -42,26 +103,46 @@

- This domain is currently on the MetaMask domain warning list. This means that based on information available to us, - MetaMask believes this domain could currently compromise your security and, as an added safety feature, MetaMask - has restricted access to the site. To override this, please read the rest of this warning for instructions on how to continue at your own risk. + This domain is currently on the MetaMask domain warning list. This + means that based on information available to us, MetaMask believes + this domain could currently compromise your security and, as an added + safety feature, MetaMask has restricted access to the site. To + override this, please read the rest of this warning for instructions + on how to continue at your own risk.

- There are many reasons sites can appear on our warning list, and our warning list compiles from other widely used industry lists. - Such reasons can include known fraud or security risks, such as domains that test positive on the - Ethereum Phishing Detector. - Domains on these warning lists may include outright malicious websites and legitimate websites that have been compromised by a malicious actor. -

-

To read more about this site please search for the domain on CryptoScamDB.

-

- Note that this warning list is compiled on a voluntary basis. This list may be inaccurate or incomplete. - Just because a domain does not appear on this list is not an implicit guarantee of that domain's safety. - As always, your transactions are your own responsibility. If you wish to interact with any domain on our warning list, - you can do so by continuing at your own risk. + There are many reasons sites can appear on our warning list, and our + warning list compiles from other widely used industry lists. Such + reasons can include known fraud or security risks, such as domains + that test positive on the + Ethereum Phishing Detector. Domains on these warning lists may include outright malicious + websites and legitimate websites that have been compromised by a + malicious actor.

- If you think this domain is incorrectly flagged or if a blocked legitimate website has resolved its security issues, - please file an issue. + To read more about this site + please search for the domain on CryptoScamDB. +

+

+ Note that this warning list is compiled on a voluntary basis. This + list may be inaccurate or incomplete. Just because a domain does not + appear on this list is not an implicit guarantee of that domain's + safety. As always, your transactions are your own responsibility. If + you wish to interact with any domain on our warning list, you can do + so by continuing at your own risk. +

+

+ If you think this domain is incorrectly flagged or if a blocked + legitimate website has resolved its security issues, + please file an issue.

diff --git a/package.json b/package.json index 37672866a..b5a04cd97 100644 --- a/package.json +++ b/package.json @@ -110,7 +110,7 @@ "@material-ui/core": "^4.11.0", "@metamask/contract-metadata": "^1.31.0", "@metamask/controllers": "^27.0.0", - "@metamask/design-tokens": "^1.3.0", + "@metamask/design-tokens": "^1.4.2", "@metamask/eth-ledger-bridge-keyring": "^0.10.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 2100228da..1db283e02 100644 --- a/ui/components/app/account-menu/account-menu.component.js +++ b/ui/components/app/account-menu/account-menu.component.js @@ -316,6 +316,7 @@ export default class AccountMenu extends Component { {t('myAccounts')} +
+ +
); } @@ -161,14 +151,6 @@ class NetworkDropdown extends Component { const isCurrentRpcTarget = provider.type === NETWORK_TYPE_RPC && rpcUrl === provider.rpcUrl; - let borderColor = COLORS.UI2; - if (isCurrentRpcTarget) { - borderColor = COLORS.WHITE; - } - if (opts.isLocalHost) { - borderColor = 'localhost'; - } - return ( {isCurrentRpcTarget ? ( @@ -192,15 +174,16 @@ class NetworkDropdown extends Component {
✓
)} {nickname || rpcUrl} @@ -267,12 +250,14 @@ class NetworkDropdown extends Component { color={network} size={SIZES.LG} type={ColorIndicator.TYPES.FILLED} - borderColor={providerType === network ? COLORS.WHITE : network} /> {this.context.t(network)} @@ -323,7 +308,7 @@ class NetworkDropdown extends Component { zIndex: '55px', }} innerStyle={{ - padding: '18px 8px', + padding: '16px 0', }} >
@@ -345,12 +330,12 @@ class NetworkDropdown extends Component { {t('showHide')} , ])} - +
) : null} diff --git a/ui/components/app/dropdowns/network-dropdown.test.js b/ui/components/app/dropdowns/network-dropdown.test.js index 7a0eaf3ef..1a963c9e8 100644 --- a/ui/components/app/dropdowns/network-dropdown.test.js +++ b/ui/components/app/dropdowns/network-dropdown.test.js @@ -76,7 +76,9 @@ describe('Network Dropdown', () => { let i = 1; let found = false; while (!found) { - if (_wrapper.find(ColorIndicator).at(i).prop('color') === 'ui-2') { + if ( + _wrapper.find(ColorIndicator).at(i).prop('color') === 'text-muted' + ) { i += 1; } else { found = true; @@ -94,14 +96,12 @@ describe('Network Dropdown', () => { it('checks background color for first ColorIndicator', () => { const colorIndicator = wrapper.find(ColorIndicator).at(0); expect(colorIndicator.prop('color')).toStrictEqual('mainnet'); - expect(colorIndicator.prop('borderColor')).toStrictEqual('mainnet'); }); it('checks background color for second ColorIndicator', () => { // find where test networks start in case there are custom RPCs const colorIndicator = wrapper.find(ColorIndicator).at(testNetworkIndex); expect(colorIndicator.prop('color')).toStrictEqual('ropsten'); - expect(colorIndicator.prop('borderColor')).toStrictEqual('ropsten'); }); it('checks background color for third ColorIndicator', () => { @@ -109,7 +109,6 @@ describe('Network Dropdown', () => { .find(ColorIndicator) .at(testNetworkIndex + 1); expect(colorIndicator.prop('color')).toStrictEqual('kovan'); - expect(colorIndicator.prop('borderColor')).toStrictEqual('kovan'); }); it('checks background color for fourth ColorIndicator', () => { @@ -117,7 +116,6 @@ describe('Network Dropdown', () => { .find(ColorIndicator) .at(testNetworkIndex + 2); expect(colorIndicator.prop('color')).toStrictEqual('rinkeby'); - expect(colorIndicator.prop('borderColor')).toStrictEqual('rinkeby'); }); it('checks background color for fifth ColorIndicator', () => { @@ -125,7 +123,6 @@ describe('Network Dropdown', () => { .find(ColorIndicator) .at(testNetworkIndex + 3); expect(colorIndicator.prop('color')).toStrictEqual('goerli'); - expect(colorIndicator.prop('borderColor')).toStrictEqual('goerli'); }); it('checks background color for sixth ColorIndicator', () => { @@ -133,7 +130,6 @@ describe('Network Dropdown', () => { .find(ColorIndicator) .at(testNetworkIndex + 4); expect(colorIndicator.prop('color')).toStrictEqual('localhost'); - expect(colorIndicator.prop('borderColor')).toStrictEqual('localhost'); expect( wrapper .find(DropdownMenuItem) @@ -186,7 +182,6 @@ describe('Network Dropdown', () => { it('checks background color for first ColorIndicator', () => { const colorIndicator = wrapper.find(ColorIndicator).at(0); expect(colorIndicator.prop('color')).toStrictEqual('mainnet'); - expect(colorIndicator.prop('borderColor')).toStrictEqual('mainnet'); expect(wrapper.find(DropdownMenuItem).at(0).text()).toStrictEqual( '✓mainnet', ); 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 86acf50ee..409de3744 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 @@ -1,7 +1,7 @@ .edit-gas-item { border-radius: 24px; - background: white; - color: var(--ui-4); + background: var(--color-background-default); + color: var(--color-text-alternative); cursor: pointer; font-size: 12px; display: flex; @@ -16,7 +16,7 @@ } &--selected { - background-color: var(--ui-1); + background-color: var(--color-background-alternative); } button.edit-gas-item--disabled[disabled] { @@ -27,7 +27,7 @@ &__name { display: inline-flex; align-items: center; - color: var(--ui-black); + color: var(--color-text-default); font-size: 12px; font-weight: bold; white-space: nowrap; @@ -78,7 +78,7 @@ &__time-estimate-low, &__fee-estimate-high { - color: var(--secondary-1); + color: var(--color-secondary-default); } &__time-estimate-medium, diff --git a/ui/components/app/menu-bar/index.scss b/ui/components/app/menu-bar/index.scss index 11f0b14da..1902a833d 100644 --- a/ui/components/app/menu-bar/index.scss +++ b/ui/components/app/menu-bar/index.scss @@ -3,7 +3,7 @@ grid-template-columns: 30% minmax(30%, 1fr) 30%; column-gap: 5px; padding: 0 8px; - border-bottom: 1px solid var(--Grey-100); + border-bottom: 1px solid var(--color-border-muted); height: 64px; .menu-bar__account-options { @@ -11,6 +11,7 @@ font-size: inherit; padding: 0 8px 0 5px; place-self: center end; + color: var(--color-text-default); } .selected-account { @@ -32,6 +33,6 @@ &__explorer-origin { @include H7; - color: var(--Grey-500); + color: var(--color-text-alternative); } } diff --git a/ui/components/app/modals/new-account-modal/index.scss b/ui/components/app/modals/new-account-modal/index.scss index de08a672c..02c8e29e1 100644 --- a/ui/components/app/modals/new-account-modal/index.scss +++ b/ui/components/app/modals/new-account-modal/index.scss @@ -1,7 +1,7 @@ .new-account-modal { display: flex; flex-flow: column nowrap; - background-color: var(--white); + background-color: var(--color-background-default); border-radius: 10px; box-shadow: 0 5px 16px rgba($black, 0.25); @@ -9,7 +9,7 @@ @extend %col-nowrap; padding: 1.5rem; - border-bottom: 1px solid var(--Grey-100); + border-bottom: 1px solid var(--color-border-muted); &__header { @include H4; @@ -29,22 +29,22 @@ } &__input-label { - color: var(--Grey-600); + color: var(--color-text-alternative); margin-top: 1.25rem; } &__input { @include H4; - background: var(--white); - border: 1px solid var(--Grey-100); + background: var(--color-background-default); + border: 1px solid var(--color-border-muted); box-sizing: border-box; border-radius: 8px; padding: 0.625rem 0.75rem; margin-top: 0.75rem; &::placeholder { - color: var(--Grey-300); + color: var(--color-text-muted); } } diff --git a/ui/components/app/selected-account/index.scss b/ui/components/app/selected-account/index.scss index cd5d39548..ab61b7721 100644 --- a/ui/components/app/selected-account/index.scss +++ b/ui/components/app/selected-account/index.scss @@ -14,7 +14,7 @@ width: 100%; font-weight: 500; - color: var(--black); + color: var(--color-text-default); text-overflow: ellipsis; overflow: hidden; white-space: nowrap; @@ -42,12 +42,9 @@ width: 100%; background-color: unset; - &:hover { - background-color: var(--Grey-000); - } - + &:hover, &:active { - background-color: #d9d7da; + background-color: var(--color-background-alternative); } } diff --git a/ui/components/app/signature-request-original/index.scss b/ui/components/app/signature-request-original/index.scss index da6d3512e..ce40fd424 100644 --- a/ui/components/app/signature-request-original/index.scss +++ b/ui/components/app/signature-request-original/index.scss @@ -2,7 +2,7 @@ &__container { width: 380px; border-radius: 8px; - background-color: var(--white); + background-color: var(--color-background-default); box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08); display: flex; flex-flow: column nowrap; @@ -76,7 +76,7 @@ &__header__tip { height: 25px; width: 25px; - background: var(--athens-grey); + background: var(--color-background-alternative); transform: rotate(45deg); position: absolute; bottom: -8px; @@ -103,7 +103,7 @@ @include H7; height: 22px; - background-color: var(--white); + background-color: var(--color-background-default); width: 124px; .account-list-item { diff --git a/ui/components/app/transaction-breakdown/index.scss b/ui/components/app/transaction-breakdown/index.scss index 75c6be56b..5bc00da50 100644 --- a/ui/components/app/transaction-breakdown/index.scss +++ b/ui/components/app/transaction-breakdown/index.scss @@ -5,7 +5,7 @@ padding-bottom: 4px; padding-top: 8px; font-size: 14px; - color: var(--Black-100); + color: var(--color-text-default); font-weight: bold; text-transform: capitalize; } @@ -23,12 +23,12 @@ &--eth-total { font-weight: bold; - color: var(--Black-100); + color: var(--color-text-default); } &--amount { font-weight: bold; - color: var(--Black-100); + color: var(--color-text-default); } } } diff --git a/ui/components/app/transaction-breakdown/transaction-breakdown-row/index.scss b/ui/components/app/transaction-breakdown/transaction-breakdown-row/index.scss index cb8c763a7..a39c73685 100644 --- a/ui/components/app/transaction-breakdown/transaction-breakdown-row/index.scss +++ b/ui/components/app/transaction-breakdown/transaction-breakdown-row/index.scss @@ -1,13 +1,13 @@ .transaction-breakdown-row { @include H7; - color: var(--Grey-500); + color: var(--color-text-alternative); display: flex; justify-content: space-between; padding: 8px 0; &--with-bottom-border { - border-bottom: 1px solid #d8d8d8; + border-bottom: 1px solid var(---color-border-muted); } &__title { diff --git a/ui/components/app/transaction-list-item-details/index.scss b/ui/components/app/transaction-list-item-details/index.scss index 1ac29436d..506b1bbdc 100644 --- a/ui/components/app/transaction-list-item-details/index.scss +++ b/ui/components/app/transaction-list-item-details/index.scss @@ -16,7 +16,7 @@ &__sender-to-recipient-header { display: flex; font-size: 14px; - color: var(--Black-100); + color: var(--color-text-default); font-weight: bold; padding-bottom: 7px; @@ -34,7 +34,7 @@ & > div:first-child { font-size: 14px; - color: var(--Black-100); + color: var(--color-text-default); font-weight: bold; } diff --git a/ui/components/app/transaction-list-item/index.scss b/ui/components/app/transaction-list-item/index.scss index 2a8e9d7d9..69413b1e1 100644 --- a/ui/components/app/transaction-list-item/index.scss +++ b/ui/components/app/transaction-list-item/index.scss @@ -1,6 +1,6 @@ .transaction-list-item { &__primary-currency { - color: var(--Black-100); + color: var(--color-text-default); overflow: hidden; text-overflow: ellipsis; } @@ -9,15 +9,15 @@ @include H7; margin-top: 4px; - color: var(--Grey-500); + color: var(--color-text-alternative); } & &--unconfirmed { - color: var(--Grey-500); + color: var(--color-text-alternative); } &--unconfirmed &__primary-currency { - color: var(--Grey-500); + color: var(--color-text-alternative); } &__pending-actions { diff --git a/ui/components/app/transaction-list/index.scss b/ui/components/app/transaction-list/index.scss index 431c4cc2b..ee932bc3b 100644 --- a/ui/components/app/transaction-list/index.scss +++ b/ui/components/app/transaction-list/index.scss @@ -13,8 +13,8 @@ @include H6; flex: 0 0 auto; - color: var(--Grey-400); - border-bottom: 1px solid var(--Grey-100); + color: var(--color-text-muted); + border-bottom: 1px solid var(--color-border-muted); padding: 8px 0 8px 20px; @media screen and (max-width: $break-small) { @@ -41,7 +41,7 @@ grid-row-start: 2; display: flex; justify-content: center; - color: var(--silver); + color: var(--color-text-muted); } &__view-more { diff --git a/ui/components/app/wallet-overview/index.scss b/ui/components/app/wallet-overview/index.scss index b99ad8ca6..43ef04d76 100644 --- a/ui/components/app/wallet-overview/index.scss +++ b/ui/components/app/wallet-overview/index.scss @@ -56,7 +56,7 @@ &__primary-balance { @include H2; - color: var(--black); + color: var(--color-text-default); width: 100%; justify-content: center; } @@ -67,19 +67,19 @@ &__cached-balance, &__cached-star { - color: var(--web-orange); + color: var(--color-secondary-default); } &__cached-secondary-balance { @include Paragraph; - color: rgba(220, 153, 18, 0.6901960784313725); + color: var(--color-secondary-muted); } &__secondary-balance { @include Paragraph; - color: var(--Grey-400); + color: var(--color-text-muted); } &__button { @@ -117,7 +117,7 @@ &__primary-balance { @include H2; - color: var(--black); + color: var(--color-text-default); width: 100%; justify-content: center; } @@ -125,7 +125,7 @@ &__secondary-balance { @include H5; - color: var(--Grey-400); + color: var(--color-text-muted); } &__button { diff --git a/ui/components/ui/list-item/index.scss b/ui/components/ui/list-item/index.scss index 243bd305a..3499ea299 100644 --- a/ui/components/ui/list-item/index.scss +++ b/ui/components/ui/list-item/index.scss @@ -2,14 +2,14 @@ width: 100%; min-height: 86px; margin: 0; - background: #fff; + background: var(--color-background-default); padding: 24px 16px; @include Paragraph; - border-top: 1px solid var(--mercury); - border-bottom: 1px solid var(--mercury); - color: var(--Black-100); + border-top: 1px solid var(--color-border-muted); + border-bottom: 1px solid var(--color-border-muted); + color: var(--color-text-default); display: grid; grid-template-columns: 0fr repeat(11, 1fr); grid-template-areas: @@ -21,7 +21,7 @@ &:hover, &:focus-within { - background-color: var(--Grey-000); + background-color: var(--color-background-alternative); } &__icon { @@ -67,7 +67,7 @@ @include H7; grid-area: sub; - color: var(--Grey-500); + color: var(--color-icon-default); margin-top: 4px; // all direct descendants should be truncated with ellipses // allows flexibility in consuming components to use h3/other tag @@ -86,7 +86,7 @@ @include H7; grid-area: mid; - color: var(--Grey-500); + color: var(--color-icon-default); } &__right-content { diff --git a/ui/components/ui/menu/menu.scss b/ui/components/ui/menu/menu.scss index c98738b09..c1f415c3e 100644 --- a/ui/components/ui/menu/menu.scss +++ b/ui/components/ui/menu/menu.scss @@ -2,11 +2,11 @@ &__container { @include H6; - background: var(--white); + background: var(--color-background-default); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.214); border-radius: 8px; width: 225px; - color: var(--Black-100); + color: var(--color-text-default); display: flex; flex-direction: column; align-items: center; @@ -38,7 +38,7 @@ &__icon { margin-right: 8px; grid-row: 1 / span 2; - color: var(--Grey-500); + color: var(--color-icon-default); } .disconnect-icon { diff --git a/ui/components/ui/nickname-popover/index.scss b/ui/components/ui/nickname-popover/index.scss index 9410cddd1..21ea6da34 100644 --- a/ui/components/ui/nickname-popover/index.scss +++ b/ui/components/ui/nickname-popover/index.scss @@ -2,7 +2,7 @@ &__popover-wrap { height: 232px; border-radius: 4px; - background: var(--ui-white); + background: var(--color-background-default); display: flex; justify-content: center; width: auto; @@ -23,7 +23,7 @@ font-weight: bold; display: flex; align-items: center; - color: var(--Black-100); + color: var(--color-text-default); padding-top: 8px; } @@ -34,7 +34,7 @@ flex-direction: row; align-items: center; min-height: 25px; - background: var(--Grey-000); + background: var(--color-background-alternative); border-radius: 40px; padding-left: 8px; padding-right: 2px; @@ -47,14 +47,14 @@ &__constant { @include H8; - color: var(--Grey-500); + color: var(--color-text-alternative); } } &__view-on-block-explorer { @include H7; - color: var(--primary-1); + color: var(--color-primary-default); margin-top: 12px; } @@ -69,6 +69,6 @@ width: 152px; height: 40px; border-radius: 100px; - background: var(--primary-1); + background: var(--color-primary-default); } } diff --git a/ui/components/ui/page-container/index.scss b/ui/components/ui/page-container/index.scss index 45f5f8854..33821275a 100644 --- a/ui/components/ui/page-container/index.scss +++ b/ui/components/ui/page-container/index.scss @@ -1,6 +1,6 @@ .page-container { width: 408px; - background-color: var(--white); + background-color: var(--color-background-default); box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.08); z-index: 25; display: flex; @@ -11,7 +11,7 @@ &__header { display: flex; flex-flow: column; - border-bottom: 1px solid var(--geyser); + border-bottom: 1px solid var(--color-border-muted); padding: 16px; flex: 0 0 auto; position: relative; @@ -22,7 +22,7 @@ } &__header-close { - color: var(--tundora); + color: var(--color-icon-default); position: absolute; top: 16px; right: 16px; @@ -54,7 +54,7 @@ display: flex; flex-flow: column; justify-content: center; - border-top: 1px solid var(--geyser); + border-top: 1px solid var(--color-border-muted); flex: 0 0 auto; footer { @@ -79,7 +79,7 @@ text-decoration: none; cursor: pointer; text-transform: uppercase; - color: #2f9ae0; + color: var(--color-primary-alternative); } } } @@ -102,7 +102,7 @@ &__title { @include H2; - color: var(--black); + color: var(--color-text-default); font-weight: 500; margin-right: 1.5rem; @@ -115,7 +115,7 @@ @include H6; padding-top: 0.5rem; - color: var(--gray); + color: var(--color-text-alternative); } &__tabs { @@ -127,7 +127,7 @@ @include Paragraph; min-width: 5rem; - color: var(--dusty-gray); + color: var(--color-text-alternative); border-bottom: none; margin-right: 16px; @@ -152,7 +152,7 @@ } &__warning-container { - background: var(--linen); + background: var(--color-warning-muted); padding: 20px; display: flex; align-items: start; @@ -193,7 +193,7 @@ .page-container { height: 100%; width: 100%; - background-color: var(--white); + background-color: var(--color-background-default); border-radius: 0; flex: 1; overflow-y: auto; diff --git a/ui/components/ui/popover/index.scss b/ui/components/ui/popover/index.scss index 9e0142075..35b170a44 100644 --- a/ui/components/ui/popover/index.scss +++ b/ui/components/ui/popover/index.scss @@ -7,7 +7,7 @@ ::-webkit-scrollbar-thumb { -webkit-border-radius: 10px; border-radius: 10px; - background: #c4c4c4; + background: var(--color-icon-muted); } display: flex; @@ -17,7 +17,7 @@ max-height: 94vh; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.25); border-radius: 10px; - background: white; + background: var(--color-background-default); } &-header { @@ -56,6 +56,7 @@ background: none; font-size: inherit; padding: 0; + color: var(--color-icon-default); } i { @@ -90,7 +91,7 @@ } &-footer { - border-top: 1px solid #d2d8dd; + border-top: 1px solid var(--color-border-muted); > :only-child { margin: 0 auto; @@ -100,7 +101,7 @@ &-arrow { width: 22px; height: 22px; - background: white; + background: var(--color-background-default); position: absolute; transform: rotate(45deg); box-shadow: 0 4px 30px rgba(0, 0, 0, 0.25); diff --git a/ui/components/ui/tabs/index.scss b/ui/components/ui/tabs/index.scss index d65697096..fd579d15d 100644 --- a/ui/components/ui/tabs/index.scss +++ b/ui/components/ui/tabs/index.scss @@ -8,8 +8,8 @@ &__list { display: flex; justify-content: flex-start; - border-bottom: 1px solid var(--geyser); - background-color: var(--white); + border-bottom: 1px solid var(--color-border-default); + background-color: var(--color-background-default); position: sticky; top: 0; z-index: 1; diff --git a/ui/components/ui/tabs/tab/index.scss b/ui/components/ui/tabs/tab/index.scss index ba7460c64..0fba0aea0 100644 --- a/ui/components/ui/tabs/tab/index.scss +++ b/ui/components/ui/tabs/tab/index.scss @@ -12,7 +12,7 @@ } &--active { - color: var(--black); - border-bottom: 2px solid var(--primary-blue); + color: var(--color-text-default); + border-bottom: 2px solid var(--color-primary-default); } } diff --git a/ui/components/ui/update-nickname-popover/index.scss b/ui/components/ui/update-nickname-popover/index.scss index 650edf11d..a3684a68f 100644 --- a/ui/components/ui/update-nickname-popover/index.scss +++ b/ui/components/ui/update-nickname-popover/index.scss @@ -8,7 +8,7 @@ width: auto; .popover-header { - border-bottom: 1px solid #d2d8dd; + border-bottom: 1px solid var(--color-border-muted); margin-bottom: 16px; border-radius: 10px; } @@ -42,7 +42,7 @@ &__address { margin-top: 8px; font-size: 13px; - color: #bbc0c5; + color: var(--color-text-alternative); margin-bottom: 16px; overflow-wrap: break-word; } @@ -51,13 +51,13 @@ &__label--capitalized { text-transform: capitalize; margin-top: 16px; - color: #24292e; + color: var(--color-text-default); font-size: 14px; } &__nickname-label { margin-bottom: 8px; - color: #24292e; + color: var(--color-text-default); font-size: 14px; } } diff --git a/ui/css/base-styles.scss b/ui/css/base-styles.scss index 3ab475169..7e06d33ba 100644 --- a/ui/css/base-styles.scss +++ b/ui/css/base-styles.scss @@ -63,7 +63,7 @@ a { } a:hover { - color: var(--Blue-400); + color: var(--color-primary-alternative); } input.large-input, diff --git a/ui/css/itcss/components/network.scss b/ui/css/itcss/components/network.scss index 7c3c5f7f7..624a3b597 100644 --- a/ui/css/itcss/components/network.scss +++ b/ui/css/itcss/components/network.scss @@ -7,7 +7,7 @@ } .network-component.pointer { - border: 1px solid var(--Grey-200); + border: 1px solid var(--color-border-muted); border-radius: 82px; padding: 6px 3px; flex: 0 0 auto; @@ -46,6 +46,7 @@ } .dropdown-menu-item .fa.delete { + color: var(--color-icon-default); margin-right: 10px; display: none; } @@ -55,6 +56,8 @@ } .network-droppo { + background-color: var(--color-background-default); + border-radius: 4px; right: 2px; .color-indicator { @@ -76,7 +79,6 @@ .network-name-item { flex: 1; - color: var(--dusty-gray); text-overflow: ellipsis; overflow: hidden; white-space: nowrap; @@ -99,8 +101,8 @@ } .menu-icon-circle--active { - border: 1px solid var(--white); - background: rgba(100, 100, 100, 0.4); + border: 1px solid var(--color-border-default); + background: var(--color-background-default); } .menu-icon-circle div, @@ -131,7 +133,7 @@ width: 100%; height: 1px; margin: 10px 0; - background-color: var(--scorpion); + background-color: var(--color-border-default); } .network-dropdown-title { @@ -139,7 +141,7 @@ height: 25px; width: 120px; - color: var(--white); + color: var(--color-text-default); text-align: center; } @@ -148,26 +150,24 @@ min-height: 36px; width: 265px; - color: var(--dusty-gray); + color: var(--color-text-default); &--link { - color: var(--white); + color: var(--color-primary-default); cursor: pointer; text-decoration: underline; &:hover { - color: var(--white); + color: var(--color-primary-alternative); } } &--dismiss { - color: inherit; - background: inherit; position: absolute; top: 63px; right: 10px; - border: 1px solid var(--dusty-gray); - border-radius: 10px; + padding: 2px 8px; + width: auto; } } @@ -191,3 +191,7 @@ left: -6px; } } + +.network__add-network-button { + padding: 0 16px; +} diff --git a/ui/css/itcss/components/newui-sections.scss b/ui/css/itcss/components/newui-sections.scss index 7271c6a3b..284168093 100644 --- a/ui/css/itcss/components/newui-sections.scss +++ b/ui/css/itcss/components/newui-sections.scss @@ -22,7 +22,7 @@ $sub-mid-size-breakpoint-range: "screen and (min-width: #{$break-large}) and (ma left: 0; width: 1px; height: 1px; - background-color: var(--Grey-000); + background-color: var(--color-background-alternative); animation: emptySpinningDiv 1s infinite linear; } @@ -95,7 +95,7 @@ $sub-mid-size-breakpoint-range: "screen and (min-width: #{$break-large}) and (ma .main-container { width: 100%; overflow-y: auto; - background-color: var(--white); + background-color: var(--color-background-default); } .main-container-wrapper { @@ -140,7 +140,7 @@ $sub-mid-size-breakpoint-range: "screen and (min-width: #{$break-large}) and (ma justify-content: center; align-items: center; flex: 1 0 auto; - background: #f7f7f7; + background: var(--color-background-alternative); width: 100%; } @@ -158,5 +158,5 @@ $sub-mid-size-breakpoint-range: "screen and (min-width: #{$break-large}) and (ma height: 100%; justify-content: center; padding: 0 10px; - background: white; + background: var(--color-background-default); } diff --git a/ui/pages/asset/asset.scss b/ui/pages/asset/asset.scss index 3f69fdcd7..c717f9650 100644 --- a/ui/pages/asset/asset.scss +++ b/ui/pages/asset/asset.scss @@ -1,6 +1,6 @@ .asset { &__container { - background-color: white; + background-color: var(--color-background-default); } &__overview { @@ -19,7 +19,7 @@ .asset-breadcrumb { @include H6; - color: var(--Black-100); + color: var(--color-text-default); background-color: inherit; &__chevron { @@ -35,7 +35,7 @@ .asset-options { &__button { font-size: $font-size-paragraph; - color: var(--Black-100); + color: var(--color-text-default); background-color: inherit; padding: 2px 0 2px 8px; } diff --git a/ui/pages/create-account/index.scss b/ui/pages/create-account/index.scss index 0f01587a9..1b24822f5 100644 --- a/ui/pages/create-account/index.scss +++ b/ui/pages/create-account/index.scss @@ -3,7 +3,7 @@ .new-account { width: 375px; - background-color: #fff; + background-color: var(--color-background-default); box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.08); z-index: 25; height: unset; @@ -21,7 +21,7 @@ &__header { display: flex; flex-flow: column; - border-bottom: 1px solid var(--geyser); + border-bottom: 1px solid var(--color-border-muted); } &__title { @@ -43,19 +43,19 @@ height: 54px; padding: 15px 10px; - color: var(--dusty-gray); + color: var(--color-text-muted); text-align: center; cursor: pointer; } &__tab:hover { - color: var(--black); + color: var(--color-text-default); border-bottom: none; } &__selected { - color: var(--primary-blue); - border-bottom: 3px solid var(--primary-blue); + color: var(--color-primary-default); + border-bottom: 3px solid var(--color-primary-default); cursor: initial; pointer-events: none; } @@ -72,7 +72,7 @@ &__input-label { @include Paragraph; - color: var(--scorpion); + color: var(--color-text-alternative); align-self: flex-start; } @@ -81,15 +81,15 @@ height: 54px; width: 315.84px; - border: 1px solid var(--geyser); + border: 1px solid var(--color-border-muted); border-radius: 4px; - background-color: var(--white); - color: var(--scorpion); + background-color: var(--color-background-default); + color: var(--color-text-muted); margin-top: 15px; padding: 0 20px; &__error { - border: 1px solid var(--error-3); + border: 1px solid var(--color-error-alternative); } } @@ -97,7 +97,7 @@ @include H7; left: 8px; - color: var(--red); + color: var(--color-error-default); } &__error-amount { diff --git a/ui/pages/home/index.scss b/ui/pages/home/index.scss index 2625059c6..c184d0226 100644 --- a/ui/pages/home/index.scss +++ b/ui/pages/home/index.scss @@ -6,7 +6,7 @@ &__main-view { flex: 1 1 66.5%; - background: var(--white); + background: var(--color-background-default); min-width: 0; display: flex; flex-direction: column; @@ -30,12 +30,12 @@ @include H6; flex-grow: 1; - color: var(--Grey-500); + color: var(--color-icon-default); font-weight: 500; } &__main-view &__tab--active { - color: var(--Blue-500); + color: var(--color-primary-default); } &__main-view &__tab button { @@ -50,7 +50,7 @@ padding-left: 24px; padding-right: 24px; - color: var(--Grey-800); + color: var(--color-text-default); div { margin-bottom: 20px; @@ -103,7 +103,7 @@ a, a:hover { - color: var(--dodger-blue); + color: var(--color-primary-alternative); cursor: pointer; } } @@ -130,7 +130,7 @@ text-align: center; a { - color: var(--primary-1); + color: var(--color-primary-default); } } @@ -148,7 +148,7 @@ } &__close { - color: var(--ui-black); + color: var(--color-text-default); background: none; margin-left: 20px; } diff --git a/ui/pages/permissions-connect/index.scss b/ui/pages/permissions-connect/index.scss index 5921bee95..fc07dede8 100644 --- a/ui/pages/permissions-connect/index.scss +++ b/ui/pages/permissions-connect/index.scss @@ -6,7 +6,7 @@ width: 100%; height: 100%; position: relative; - background: white; + background: var(--color-background-default); display: flex; flex-direction: column; @@ -27,7 +27,7 @@ &__back { @include H7; - color: var(--Grey-500); + color: var(--color-text-default); font-weight: bold; cursor: pointer; @@ -39,7 +39,7 @@ &__page-count { @include H7; - color: var(--Grey-500); + color: var(--color-icon-default); grid-column: 2; justify-self: end; font-weight: bold; diff --git a/ui/pages/send/send.scss b/ui/pages/send/send.scss index bfc57a488..f2a508cac 100644 --- a/ui/pages/send/send.scss +++ b/ui/pages/send/send.scss @@ -5,7 +5,7 @@ position: relative; display: flex; justify-content: center; - background-color: var(--Grey-000); + background-color: var(--color-background-alternative); border-bottom: none; padding: 14px 0 3px 0; @@ -39,8 +39,8 @@ margin: 0; padding: 0.5rem; flex: 0 0 auto; - background-color: var(--Grey-000); - border-bottom: 1px solid var(--alto); + background-color: var(--color-background-alternative); + border-bottom: 1px solid var(--color-border-muted); } &__select-recipient-wrapper { @@ -58,7 +58,7 @@ @extend %row-nowrap; padding: 1rem; - border-bottom: 1px solid var(--alto); + border-bottom: 1px solid var(--color-border-muted); border-radius: 0; align-items: center; justify-content: flex-start; @@ -84,7 +84,7 @@ padding: 0.5rem; text-align: center; - border-bottom: 1px solid var(--alto); + border-bottom: 1px solid var(--color-border-muted); justify-content: flex-start; } } @@ -96,13 +96,13 @@ &__group-label { @include H8; - background-color: var(--Grey-000); - color: var(--Grey-600); + background-color: var(--color-background-alternative); + color: var(--color-text-alternative); padding: 0.5rem 1rem; - border-bottom: 1px solid var(--alto); + border-bottom: 1px solid var(--color-border-muted); &:first-of-type { - border-top: 1px solid var(--alto); + border-top: 1px solid var(--color-border-muted); } } @@ -112,7 +112,7 @@ padding: 0.75rem 1rem; align-items: center; - border-bottom: 1px solid var(--alto); + border-bottom: 1px solid var(--color-border-muted); cursor: pointer; &:hover { @@ -138,13 +138,13 @@ text-overflow: ellipsis; overflow: hidden; white-space: nowrap; - color: var(--black); + color: var(--color-text-default); } &__subtitle { @include H8; - color: var(--Grey-500); + color: var(--color-text-muted); } } @@ -164,14 +164,14 @@ flex: 1 1 auto; width: 0; align-items: center; - background: var(--white); + background: var(--color-background-default); border-radius: 0.5rem; padding: 0.75rem 0.5rem; - border: 1px solid var(--Grey-100); + border: 1px solid var(--color-border-muted); transition: border-color 150ms ease-in-out; &:focus-within { - border-color: var(--Grey-500); + border-color: var(--color-border-default); } &__status-icon { @@ -223,7 +223,7 @@ } &--valid { - border-color: var(--Blue-500); + border-color: var(--color-primary-default); .ens-input__wrapper { &__status-icon { @@ -235,7 +235,7 @@ @include H7; - color: var(--Blue-500); + color: var(--color-primary-default); } } } @@ -254,7 +254,7 @@ &__subtitle { @include H7; - color: var(--Grey-500); + color: var(--color-icon-default); margin-top: 0.25rem; } } diff --git a/ui/pages/settings/index.scss b/ui/pages/settings/index.scss index 42e53069b..f547ae53a 100644 --- a/ui/pages/settings/index.scss +++ b/ui/pages/settings/index.scss @@ -8,7 +8,7 @@ .settings-page { position: relative; - background: var(--white); + background: var(--color-background-default); display: flex; flex-flow: column nowrap; @@ -17,7 +17,7 @@ position: relative; @media screen and (max-width: $break-small) { - background: var(--ui-1); + background: var(--color-background-alternative); } &__title-container { @@ -33,7 +33,7 @@ &__close-button::after { content: '\00D7'; font-size: 40px; - color: var(--ui-4); + color: var(--color-icon-default); cursor: pointer; } @@ -68,7 +68,7 @@ } &__list { - background: var(--ui-white); + background: var(--color-background-default); box-sizing: border-box; box-shadow: 0 0 14px rgba(0, 0, 0, 0.18); border-radius: 6px; @@ -78,7 +78,7 @@ > div { &:hover { - background: var(--ui-1); + background: var(--color-background-alternative); } } @@ -87,13 +87,13 @@ display: grid; align-items: center; padding: 16px; - border-top: 1px solid var(--ui-2); + border-top: 1px solid var(--color-border-muted); cursor: pointer; grid-template-columns: 16px max-content 24px auto; gap: 8px; &__icon { - background: --ui-2; + background: var(--color-background-alternative); height: 15px; width: 15px; margin-right: 16px; @@ -105,7 +105,7 @@ &__no-matching { @include H6; - color: var(--ui-4); + color: var(--color-icon-default); } &__section-multiple-lines { @@ -124,7 +124,7 @@ @include H6; display: inline; - color: var(--primary-blue); + color: var(--color-primary-default); margin-left: 3px; } } @@ -137,7 +137,7 @@ @include H4; padding: 16px 4px; - border-bottom: 1px solid var(--alto); + border-bottom: 1px solid var(--color-border-muted); margin-right: 24px; height: 72px; align-items: center; @@ -156,7 +156,7 @@ &__subheader--link:hover { cursor: pointer; - color: var(--primary-blue); + color: var(--color-primary-default); } &__subheader--break { @@ -214,7 +214,7 @@ flex-flow: row nowrap; height: 100%; overflow: auto; - border-top: 1px solid #d8d8d8; + border-top: 1px solid var(--color-border-muted); &__tabs { display: flex; @@ -310,7 +310,7 @@ height: 40px; width: 40px; border-radius: 40px; - border: 2px solid #037dd6; + border: 2px solid var(--color-primary-default); display: flex; justify-content: center; align-items: center; @@ -324,7 +324,7 @@ margin-top: 8px; margin-bottom: 12px; - color: var(--dusty-gray); + color: var(--color-icon-default); } } @@ -335,11 +335,11 @@ &__content-description { @include H6; - color: var(--dusty-gray); + color: var(--color-icon-default); padding-top: 5px; a { - color: var(--Blue-500); + color: var(--color-primary-default); } } diff --git a/yarn.lock b/yarn.lock index 8bf1e85df..15b1f74f7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2787,7 +2787,7 @@ web3 "^0.20.7" web3-provider-engine "^16.0.3" -"@metamask/design-tokens@^1.3.0": +"@metamask/design-tokens@^1.4.2": version "1.4.2" resolved "https://registry.yarnpkg.com/@metamask/design-tokens/-/design-tokens-1.4.2.tgz#023030f3eca181b10bf89c5813a9656f4e7e2852" integrity sha512-kS63Tx+WOUloBTz4pDDG3DcisoXwaT+06/a2KTSDI0n1t3IQPLo1FCMsijqtYWFPfAI06tWOjtaslpFTB+dsAg==