mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
General backgrounds and borders design token updates (#13764)
Co-authored-by: Guillaume Roux <guillaumeroux123@gmail.com> Co-authored-by: George Marshall <george.marshall@consensys.net> Co-authored-by: David Walsh <davidwalsh83@gmail.com>
This commit is contained in:
Guillaume Roux
GitHub
parent
4dee182bcb
commit
ad28c81a39
@ -1,40 +1,101 @@
|
||||
<!doctype html>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>MetaMask Phishing Detection</title>
|
||||
<script src="./globalthis.js" type="text/javascript" charset="utf-8"></script>
|
||||
<script src="./lockdown-install.js" type="text/javascript" charset="utf-8"></script>
|
||||
<script src="./lockdown-run.js" type="text/javascript" charset="utf-8"></script>
|
||||
<script src="./lockdown-more.js" type="text/javascript" charset="utf-8"></script>
|
||||
<script
|
||||
src="./globalthis.js"
|
||||
type="text/javascript"
|
||||
charset="utf-8"
|
||||
></script>
|
||||
<script
|
||||
src="./lockdown-install.js"
|
||||
type="text/javascript"
|
||||
charset="utf-8"
|
||||
></script>
|
||||
<script
|
||||
src="./lockdown-run.js"
|
||||
type="text/javascript"
|
||||
charset="utf-8"
|
||||
></script>
|
||||
<script
|
||||
src="./lockdown-more.js"
|
||||
type="text/javascript"
|
||||
charset="utf-8"
|
||||
></script>
|
||||
<script src="./phishing-detect.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="./index.css" title="ltr">
|
||||
<link rel="stylesheet" type="text/css" href="./index-rtl.css" title="rtl" disabled>
|
||||
<link rel="stylesheet" type="text/css" href="./index.css" title="ltr" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
type="text/css"
|
||||
href="./index-rtl.css"
|
||||
title="rtl"
|
||||
disabled
|
||||
/>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body, html { background-color: rgb(217, 88, 70);
|
||||
display: flex; flex-direction: column;
|
||||
justify-content: center; align-items: center;
|
||||
font-family: Roboto, Arial, sans-serif;
|
||||
width: 100vw; min-height: 100vh; }
|
||||
.content { display: flex; flex-direction: column; align-items: center;
|
||||
width: 80%;
|
||||
background-color: white; box-shadow: 0 0 15px #737373; }
|
||||
.content__header { display: flex; flex-direction: column; align-items: center; justify-content: center;
|
||||
width: 100%;
|
||||
color: rgb(217, 88, 70); border-bottom: 1px solid rgb(212, 212, 212);
|
||||
padding: 2em; }
|
||||
.content__header h1 { font-size: 24px; font-weight: normal; }
|
||||
.content__header h1 i { margin-right: 0.25em; }
|
||||
.content__header img { margin-bottom: 3em; width: 160px; }
|
||||
.content__body { background-color: rgb(245, 245, 245); font-size: 12pt; }
|
||||
.content__body p { margin: 2em; }
|
||||
.content__body p a { text-decoration: underline; color: inherit; cursor: pointer; }
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
body,
|
||||
html {
|
||||
background-color: var(--color-error-default);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-family: Roboto, Arial, sans-serif;
|
||||
width: 100vw;
|
||||
min-height: 100vh;
|
||||
}
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 80%;
|
||||
background-color: var(--color-background-default);
|
||||
box-shadow: 0 0 15px #737373;
|
||||
}
|
||||
.content__header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
color: var(--color-error-default);
|
||||
border-bottom: 1px solid var(--color-border-default);
|
||||
padding: 2em;
|
||||
}
|
||||
.content__header h1 {
|
||||
font-size: 24px;
|
||||
font-weight: normal;
|
||||
}
|
||||
.content__header h1 i {
|
||||
margin-right: 0.25em;
|
||||
}
|
||||
.content__header img {
|
||||
margin-bottom: 3em;
|
||||
width: 160px;
|
||||
}
|
||||
.content__body {
|
||||
background-color: var(--color-background-alternative);
|
||||
font-size: 12pt;
|
||||
color: var(--color-text-default);
|
||||
}
|
||||
.content__body p {
|
||||
margin: 2em;
|
||||
}
|
||||
.content__body p a {
|
||||
text-decoration: underline;
|
||||
color: var(--color-primary-default);
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="content">
|
||||
<div class="content__header">
|
||||
<img src="./images/info-logo.png" alt="">
|
||||
<img src="./images/info-logo.png" alt="" />
|
||||
<h1>
|
||||
<i class="fa fa-exclamation-circle" aria-hidden="true"></i>
|
||||
MetaMask Phishing Detection
|
||||
@ -42,26 +103,46 @@
|
||||
</div>
|
||||
<div class="content__body">
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
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
|
||||
<a href="https://github.com/metamask/eth-phishing-detect">Ethereum Phishing Detector</a>.
|
||||
Domains on these warning lists may include outright malicious websites and legitimate websites that have been compromised by a malicious actor.
|
||||
</p>
|
||||
<p>To read more about this site <a id="csdbLink" href="https://cryptoscamdb.org/search">please search for the domain on CryptoScamDB</a>.</p>
|
||||
<p>
|
||||
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 <a id="unsafe-continue">continuing at your own risk</a>.
|
||||
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
|
||||
<a href="https://github.com/metamask/eth-phishing-detect"
|
||||
>Ethereum Phishing Detector</a
|
||||
>. Domains on these warning lists may include outright malicious
|
||||
websites and legitimate websites that have been compromised by a
|
||||
malicious actor.
|
||||
</p>
|
||||
<p>
|
||||
If you think this domain is incorrectly flagged or if a blocked legitimate website has resolved its security issues,
|
||||
<a id="new-issue-link" href="https://github.com/metamask/eth-phishing-detect/issues/new">please file an issue</a>.
|
||||
To read more about this site
|
||||
<a id="csdbLink" href="https://cryptoscamdb.org/search"
|
||||
>please search for the domain on CryptoScamDB</a
|
||||
>.
|
||||
</p>
|
||||
<p>
|
||||
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 <a id="unsafe-continue">continuing at your own risk</a>.
|
||||
</p>
|
||||
<p>
|
||||
If you think this domain is incorrectly flagged or if a blocked
|
||||
legitimate website has resolved its security issues,
|
||||
<a
|
||||
id="new-issue-link"
|
||||
href="https://github.com/metamask/eth-phishing-detect/issues/new"
|
||||
>please file an issue</a
|
||||
>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -316,6 +316,7 @@ export default class AccountMenu extends Component {
|
||||
{t('myAccounts')}
|
||||
<Button
|
||||
className="account-menu__lock-button"
|
||||
type="secondary"
|
||||
onClick={() => {
|
||||
lockMetamask();
|
||||
history.push(DEFAULT_ROUTE);
|
||||
@ -351,7 +352,7 @@ export default class AccountMenu extends Component {
|
||||
});
|
||||
history.push(NEW_ACCOUNT_ROUTE);
|
||||
}}
|
||||
icon={<IconPlus />}
|
||||
icon={<IconPlus color="var(--color-icon-default)" />}
|
||||
text={t('createAccount')}
|
||||
/>
|
||||
<AccountMenuItem
|
||||
@ -366,7 +367,12 @@ export default class AccountMenu extends Component {
|
||||
});
|
||||
history.push(IMPORT_ACCOUNT_ROUTE);
|
||||
}}
|
||||
icon={<IconImport ariaLabel={t('importAccount')} />}
|
||||
icon={
|
||||
<IconImport
|
||||
color="var(--color-icon-default)"
|
||||
ariaLabel={t('importAccount')}
|
||||
/>
|
||||
}
|
||||
text={t('importAccount')}
|
||||
/>
|
||||
<AccountMenuItem
|
||||
@ -385,7 +391,12 @@ export default class AccountMenu extends Component {
|
||||
history.push(CONNECT_HARDWARE_ROUTE);
|
||||
}
|
||||
}}
|
||||
icon={<IconConnect ariaLabel={t('connectHardwareWallet')} />}
|
||||
icon={
|
||||
<IconConnect
|
||||
color="var(--color-icon-default)"
|
||||
ariaLabel={t('connectHardwareWallet')}
|
||||
/>
|
||||
}
|
||||
text={t('connectHardwareWallet')}
|
||||
/>
|
||||
<div className="account-menu__divider" />
|
||||
@ -393,7 +404,12 @@ export default class AccountMenu extends Component {
|
||||
onClick={() => {
|
||||
global.platform.openTab({ url: supportLink });
|
||||
}}
|
||||
icon={<IconSpeechBubbles ariaLabel={supportText} />}
|
||||
icon={
|
||||
<IconSpeechBubbles
|
||||
color="var(--color-icon-default)"
|
||||
ariaLabel={supportText}
|
||||
/>
|
||||
}
|
||||
text={supportText}
|
||||
/>
|
||||
|
||||
@ -409,7 +425,12 @@ export default class AccountMenu extends Component {
|
||||
},
|
||||
});
|
||||
}}
|
||||
icon={<IconCog ariaLabel={t('settings')} />}
|
||||
icon={
|
||||
<IconCog
|
||||
color="var(--color-icon-default)"
|
||||
ariaLabel={t('settings')}
|
||||
/>
|
||||
}
|
||||
text={t('settings')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@ -4,10 +4,10 @@
|
||||
top: 58px;
|
||||
width: 320px;
|
||||
border-radius: 4px;
|
||||
background: rgba($black, 0.8);
|
||||
background: var(--color-background-default);
|
||||
box-shadow: rgba($black, 0.15) 0 2px 2px 2px;
|
||||
min-width: 150px;
|
||||
color: var(--white);
|
||||
color: var(--color-text-default);
|
||||
|
||||
@media screen and (max-width: $break-small) {
|
||||
right: 16px;
|
||||
@ -42,11 +42,11 @@
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba($white, 0.05);
|
||||
background-color: var(--color-background-alternative);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: rgba($white, 0.1);
|
||||
background-color: var(--color-background-alternative);
|
||||
}
|
||||
}
|
||||
|
||||
@ -67,7 +67,7 @@
|
||||
}
|
||||
|
||||
&__divider {
|
||||
background-color: var(--scorpion);
|
||||
background-color: var(--color-border-muted);
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
}
|
||||
@ -100,19 +100,8 @@
|
||||
& &__lock-button {
|
||||
@include H7;
|
||||
|
||||
border: 1px solid var(--ui-white);
|
||||
background-color: transparent;
|
||||
padding: 3.5px 5px;
|
||||
color: var(--white);
|
||||
width: 59px;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba($dusty-gray, 0.05);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: rgba($dusty-gray, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
&__accounts-container {
|
||||
@ -146,8 +135,8 @@
|
||||
height: 15px;
|
||||
margin-top: 5px;
|
||||
margin-right: 10px;
|
||||
background-color: var(--dusty-gray);
|
||||
color: var(--black);
|
||||
background-color: var(--color-background-alternative);
|
||||
color: var(--color-text-default);
|
||||
font-weight: normal;
|
||||
letter-spacing: 0.5px;
|
||||
display: flex;
|
||||
@ -181,7 +170,7 @@
|
||||
.remove-account-icon::after {
|
||||
content: '\00D7';
|
||||
font-size: 25px;
|
||||
color: var(--white);
|
||||
color: var(--color-text-default);
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
margin-top: -5px;
|
||||
@ -208,7 +197,7 @@
|
||||
&__name {
|
||||
@include H4;
|
||||
|
||||
color: var(--white);
|
||||
color: var(--color-text-default);
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
@ -218,7 +207,7 @@
|
||||
&__balance {
|
||||
@include H6;
|
||||
|
||||
color: var(--dusty-gray);
|
||||
color: var(--color-text-alternative);
|
||||
}
|
||||
|
||||
&__action {
|
||||
@ -234,7 +223,7 @@
|
||||
height: 28px;
|
||||
width: 28px;
|
||||
border-radius: 14px;
|
||||
background: #3f3f3f;
|
||||
background: var(--color-text-default);
|
||||
z-index: 201;
|
||||
cursor: pointer;
|
||||
opacity: 0.8;
|
||||
|
||||
@ -16,7 +16,7 @@
|
||||
}
|
||||
|
||||
&__content-link {
|
||||
color: var(--primary-blue);
|
||||
color: var(--color-primary-default);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@ -49,8 +49,8 @@
|
||||
margin-bottom: 16px;
|
||||
padding: 16px;
|
||||
font-size: 14px;
|
||||
border: 1px solid var(--accent-red);
|
||||
background: #f8eae8;
|
||||
border: 1px solid var(--color-error-default);
|
||||
background: var(--color-error-muted);
|
||||
border-radius: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -17,7 +17,7 @@
|
||||
}
|
||||
|
||||
& &__dismiss-button {
|
||||
background: var(--primary-blue);
|
||||
background: var(--color-primary-default);
|
||||
color: white;
|
||||
height: 40px;
|
||||
width: 100px;
|
||||
@ -29,8 +29,8 @@
|
||||
|
||||
margin-bottom: 16px;
|
||||
padding: 16px;
|
||||
border: 1px solid var(--accent-red);
|
||||
background: #f8eae8;
|
||||
border: 1px solid var(--color-error-default);
|
||||
background: var(--color-error-muted);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
@ -52,7 +52,7 @@
|
||||
display: flex;
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
color: var(--Grey-500);
|
||||
color: var(--color-text-alternative);
|
||||
}
|
||||
|
||||
&__checkbox-label-tooltip {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
.app-header {
|
||||
align-items: center;
|
||||
background: var(--Grey-000);
|
||||
background: var(--color-background-alternative);
|
||||
position: relative;
|
||||
z-index: $header-z-index;
|
||||
display: flex;
|
||||
@ -23,7 +23,7 @@
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 32px;
|
||||
background: var(--Grey-000);
|
||||
background: var(--color-background-alternative);
|
||||
bottom: -32px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
.app-loading-spinner {
|
||||
background-color: rgba(255, 255, 255, 0.75);
|
||||
background-color: var(--color-overlay-alternative);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
@ -8,6 +8,7 @@
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
text-align: start;
|
||||
color: var(--color-text-default);
|
||||
|
||||
& h2 {
|
||||
display: flex;
|
||||
@ -29,7 +30,7 @@
|
||||
}
|
||||
|
||||
&__chevron-right {
|
||||
color: var(--Grey-500);
|
||||
color: var(--color-icon-default);
|
||||
}
|
||||
|
||||
.list-item__right-content {
|
||||
|
||||
@ -23,8 +23,8 @@
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
padding: 8px;
|
||||
background: var(--ui-4);
|
||||
color: var(--ui-white);
|
||||
background: var(--color-overlay-alternative);
|
||||
color: var(--color-overlay-inverse);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
@include H7;
|
||||
|
||||
font-weight: 500;
|
||||
color: var(--scorpion);
|
||||
color: var(--color-text-allternative);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
@ -26,7 +26,7 @@
|
||||
}
|
||||
|
||||
&__secondary {
|
||||
color: var(--oslo-gray);
|
||||
color: var(--color-icon-default);
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
@ -35,10 +35,10 @@
|
||||
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 6px;
|
||||
color: var(--scorpion);
|
||||
color: var(--color-icon-default);
|
||||
|
||||
&--edit {
|
||||
color: var(--primary-blue);
|
||||
color: var(--color-primary-default);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
.confirm-page-container-summary {
|
||||
padding: 16px 24px;
|
||||
background-color: #f9fafa;
|
||||
background-color: var(--color-background-alternative);
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -23,9 +23,9 @@
|
||||
&__action {
|
||||
@include H7;
|
||||
|
||||
color: var(--oslo-gray);
|
||||
color: var(--color-text-muted);
|
||||
padding: 3px 8px;
|
||||
border: 1px solid var(--oslo-gray);
|
||||
border: 1px solid var(--color-border-default);
|
||||
border-radius: 4px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
@ -56,7 +56,7 @@
|
||||
}
|
||||
|
||||
&__nonce {
|
||||
color: var(--oslo-gray);
|
||||
color: var(--color-text-alternative);
|
||||
}
|
||||
|
||||
&__title {
|
||||
@ -88,13 +88,13 @@
|
||||
&__subtitle {
|
||||
@include H5;
|
||||
|
||||
color: var(--oslo-gray);
|
||||
color: var(--color-text-alternative);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
&--border {
|
||||
border-bottom: 1px solid var(--geyser);
|
||||
border-bottom: 1px solid var(--color-border-muted);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
.confirm-page-container-warning {
|
||||
background-color: #fffcdb;
|
||||
background-color: var(--color-warning-muted);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid var(--geyser);
|
||||
border-bottom: 1px solid var(--color-border-muted);
|
||||
padding: 12px 24px;
|
||||
|
||||
&__icon {
|
||||
@ -13,6 +13,6 @@
|
||||
&__warning {
|
||||
@include H7;
|
||||
|
||||
color: #5f5922;
|
||||
color: var(--color-warning-default);
|
||||
}
|
||||
}
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
flex-direction: column;
|
||||
|
||||
&--with-top-border {
|
||||
border-top: 1px solid var(--geyser);
|
||||
border-top: 1px solid var(--color-border-muted);
|
||||
}
|
||||
|
||||
&__error-container {
|
||||
@ -23,7 +23,7 @@
|
||||
|
||||
&__data {
|
||||
padding: 16px;
|
||||
color: var(--oslo-gray);
|
||||
color: var(--color-text-alternative);
|
||||
|
||||
& > .disclosure {
|
||||
margin-top: 0;
|
||||
@ -33,7 +33,7 @@
|
||||
&__data-box {
|
||||
@include H7;
|
||||
|
||||
background-color: #f9fafa;
|
||||
background-color: var(--color-background-alternative);
|
||||
padding: 12px;
|
||||
word-wrap: break-word;
|
||||
overflow-y: auto;
|
||||
@ -61,7 +61,7 @@
|
||||
}
|
||||
|
||||
&__gas-fee {
|
||||
border-bottom: 1px solid var(--geyser);
|
||||
border-bottom: 1px solid var(--color-border-muted);
|
||||
|
||||
.advanced-gas-inputs__gas-edit-rows {
|
||||
margin-bottom: 16px;
|
||||
@ -73,20 +73,20 @@
|
||||
|
||||
font-weight: 500;
|
||||
text-transform: capitalize;
|
||||
color: var(--black);
|
||||
color: var(--color-text-default);
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
&__tab {
|
||||
@include H7;
|
||||
|
||||
color: #8c8e94;
|
||||
color: var(--color-text-alternative);
|
||||
text-transform: uppercase;
|
||||
margin: 0 8px;
|
||||
|
||||
& button {
|
||||
font-size: unset;
|
||||
color: #8c8e94;
|
||||
color: var(--color-text-alternative);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
&__row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid var(--geyser);
|
||||
border-bottom: 1px solid var(--color-border-muted);
|
||||
padding: 4px 13px 4px 13px;
|
||||
flex: 0 0 auto;
|
||||
align-items: center;
|
||||
@ -31,6 +31,7 @@
|
||||
&__back-button {
|
||||
@include Paragraph;
|
||||
|
||||
color: var(--color-primary-default);
|
||||
cursor: pointer;
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
justify-content: space-between;
|
||||
font: inherit;
|
||||
padding: 4px 10px 4px 10px;
|
||||
border-bottom: 1px solid var(--geyser);
|
||||
border-bottom: 1px solid var(--color-border-muted);
|
||||
flex: 0 0 auto;
|
||||
|
||||
&__container {
|
||||
@ -44,7 +44,7 @@
|
||||
&__longtext {
|
||||
@include H9;
|
||||
|
||||
color: var(--oslo-gray);
|
||||
color: var(--color-text-alternative);
|
||||
}
|
||||
|
||||
&__imageflip {
|
||||
|
||||
@ -14,7 +14,7 @@
|
||||
content: '\00D7';
|
||||
font-size: 29px;
|
||||
font-weight: 200;
|
||||
color: var(--black);
|
||||
color: var(--color-text-default);
|
||||
background-color: transparent;
|
||||
top: 0;
|
||||
right: 12px;
|
||||
|
||||
@ -24,7 +24,7 @@
|
||||
@extend %account-status-typography;
|
||||
|
||||
display: inline;
|
||||
color: var(--Grey-500);
|
||||
color: var(--color-text-alternative);
|
||||
}
|
||||
|
||||
&__account-status-link {
|
||||
@ -34,7 +34,7 @@
|
||||
|
||||
&,
|
||||
&:hover {
|
||||
color: var(--primary-blue);
|
||||
color: var(--color-primary-default);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
@ -46,11 +46,11 @@
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
padding: 16px 24px;
|
||||
border-top: 1px solid var(--geyser);
|
||||
border-top: 1px solid var(--color-border-muted);
|
||||
|
||||
&--highlight {
|
||||
background-color: var(--Yellow-000);
|
||||
border: 1px solid var(--accent-yellow);
|
||||
background-color: var(--color-warning-muted);
|
||||
border: 1px solid var(--color-warning-default);
|
||||
box-sizing: border-box;
|
||||
padding: 16px;
|
||||
margin-bottom: 16px;
|
||||
@ -69,7 +69,7 @@
|
||||
&__button {
|
||||
font-size: $font-size-h4;
|
||||
background: inherit;
|
||||
color: var(--Grey-500);
|
||||
color: var(--color-icon-default);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
color: var(--Grey-500);
|
||||
color: var(--color-text-alternative);
|
||||
|
||||
strong {
|
||||
font-weight: bold;
|
||||
|
||||
@ -7,12 +7,9 @@
|
||||
padding: 8px;
|
||||
border-radius: 100px;
|
||||
|
||||
&:hover {
|
||||
background-color: #f2f3f4;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
background-color: #ededed;
|
||||
background-color: var(--color-background-alternative);
|
||||
}
|
||||
|
||||
&__inner-circle {
|
||||
@ -43,17 +40,17 @@
|
||||
}
|
||||
|
||||
&__yellow-circle {
|
||||
border-color: #ffd33d;
|
||||
border-color: var(--color-warning-default);
|
||||
}
|
||||
|
||||
&__grey-circle {
|
||||
border-color: var(--Grey-500);
|
||||
border-color: var(--color-border-default);
|
||||
}
|
||||
|
||||
&__text {
|
||||
@include H8;
|
||||
|
||||
color: var(--Grey-500);
|
||||
color: var(--color-text-alternative);
|
||||
margin-left: 6px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@ -17,7 +17,7 @@ export class Dropdown extends Component {
|
||||
const innerStyleDefaults = {
|
||||
borderRadius: '4px',
|
||||
padding: '8px 16px',
|
||||
background: 'rgba(0, 0, 0, 0.8)',
|
||||
background: 'var(--color-background-default)',
|
||||
boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px',
|
||||
...innerStyle,
|
||||
};
|
||||
@ -35,11 +35,10 @@ export class Dropdown extends Component {
|
||||
<style>
|
||||
{`
|
||||
li.dropdown-menu-item:hover {
|
||||
color:rgb(225, 225, 225);
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
color:var(--color-text-default);
|
||||
background-color: var(--color-background-alternative);
|
||||
border-radius: 4px;
|
||||
}
|
||||
li.dropdown-menu-item { color: rgb(185, 185, 185); }
|
||||
`}
|
||||
</style>
|
||||
{children}
|
||||
@ -88,7 +87,6 @@ export class DropdownMenuItem extends Component {
|
||||
display: 'flex',
|
||||
justifyContent: 'flex-start',
|
||||
alignItems: 'center',
|
||||
color: 'white',
|
||||
...style,
|
||||
}}
|
||||
tabIndex="0"
|
||||
|
||||
@ -38,7 +38,7 @@ const notToggleElementClassnames = [
|
||||
const DROP_DOWN_MENU_ITEM_STYLE = {
|
||||
fontSize: '16px',
|
||||
lineHeight: '20px',
|
||||
padding: '12px 0',
|
||||
padding: '16px',
|
||||
};
|
||||
|
||||
function mapStateToProps(state) {
|
||||
@ -124,32 +124,22 @@ class NetworkDropdown extends Component {
|
||||
}
|
||||
|
||||
renderAddCustomButton() {
|
||||
const style = {
|
||||
width: '100%',
|
||||
left: '40px',
|
||||
color: 'white',
|
||||
background: 'rgba(0, 0, 0, 0.75)',
|
||||
borderRadius: '20px',
|
||||
textTransform: 'none',
|
||||
};
|
||||
|
||||
return (
|
||||
<Button
|
||||
type="submit"
|
||||
style={style}
|
||||
variant="contained"
|
||||
size="large"
|
||||
onClick={() => {
|
||||
if (getEnvironmentType() === ENVIRONMENT_TYPE_POPUP) {
|
||||
global.platform.openExtensionInBrowser(ADD_NETWORK_ROUTE);
|
||||
} else {
|
||||
this.props.history.push(ADD_NETWORK_ROUTE);
|
||||
}
|
||||
this.props.hideNetworkDropdown();
|
||||
}}
|
||||
>
|
||||
{this.context.t('addNetwork')}
|
||||
</Button>
|
||||
<div className="network__add-network-button">
|
||||
<Button
|
||||
type="secondary"
|
||||
onClick={() => {
|
||||
if (getEnvironmentType() === ENVIRONMENT_TYPE_POPUP) {
|
||||
global.platform.openExtensionInBrowser(ADD_NETWORK_ROUTE);
|
||||
} else {
|
||||
this.props.history.push(ADD_NETWORK_ROUTE);
|
||||
}
|
||||
this.props.hideNetworkDropdown();
|
||||
}}
|
||||
>
|
||||
{this.context.t('addNetwork')}
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -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 (
|
||||
<DropdownMenuItem
|
||||
key={`common${rpcUrl}`}
|
||||
@ -183,7 +165,7 @@ class NetworkDropdown extends Component {
|
||||
style={{
|
||||
fontSize: '16px',
|
||||
lineHeight: '20px',
|
||||
padding: '12px 0',
|
||||
padding: '16px',
|
||||
}}
|
||||
>
|
||||
{isCurrentRpcTarget ? (
|
||||
@ -192,15 +174,16 @@ class NetworkDropdown extends Component {
|
||||
<div className="network-check__transparent">✓</div>
|
||||
)}
|
||||
<ColorIndicator
|
||||
color={opts.isLocalHost ? 'localhost' : COLORS.UI2}
|
||||
color={opts.isLocalHost ? 'localhost' : COLORS.TEXT_MUTED}
|
||||
size={SIZES.LG}
|
||||
type={ColorIndicator.TYPES.FILLED}
|
||||
borderColor={borderColor}
|
||||
/>
|
||||
<span
|
||||
className="network-name-item"
|
||||
style={{
|
||||
color: isCurrentRpcTarget ? '#ffffff' : '#9b9b9b',
|
||||
color: isCurrentRpcTarget
|
||||
? 'var(--color-text-default)'
|
||||
: 'var(--color-text-alternative)',
|
||||
}}
|
||||
>
|
||||
{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}
|
||||
/>
|
||||
<span
|
||||
className="network-name-item"
|
||||
style={{
|
||||
color: providerType === network ? '#ffffff' : '#9b9b9b',
|
||||
color:
|
||||
providerType === network
|
||||
? 'var(--color-text-default)'
|
||||
: 'var(--color-text-alternative)',
|
||||
}}
|
||||
>
|
||||
{this.context.t(network)}
|
||||
@ -323,7 +308,7 @@ class NetworkDropdown extends Component {
|
||||
zIndex: '55px',
|
||||
}}
|
||||
innerStyle={{
|
||||
padding: '18px 8px',
|
||||
padding: '16px 0',
|
||||
}}
|
||||
>
|
||||
<div className="network-dropdown-header">
|
||||
@ -345,12 +330,12 @@ class NetworkDropdown extends Component {
|
||||
{t('showHide')}
|
||||
</a>,
|
||||
])}
|
||||
<button
|
||||
<Button
|
||||
onClick={hideTestNetMessage}
|
||||
className="network-dropdown-content--dismiss"
|
||||
>
|
||||
{t('dismiss')}
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
@ -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',
|
||||
);
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -63,7 +63,7 @@ a {
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--Blue-400);
|
||||
color: var(--color-primary-alternative);
|
||||
}
|
||||
|
||||
input.large-input,
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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);
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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==
|
||||
|
||||
Loading…
Reference in New Issue
Block a user