TheDude
/
ciphermask
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Dark Mode: Swaps Colors (#13976)

Browse Source
feature/default_network_editable
David Walsh 3 years ago committed by GitHub
parent b5c120c6a3
commit 9373f51e97
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
18 changed files with 111 additions and 111 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 2
      ui/components/app/transaction-detail-item/transaction-detail-item.component.js
  2. 12
      ui/pages/swaps/awaiting-swap/index.scss
  3. 18
      ui/pages/swaps/build-quote/index.scss
  4. 4
      ui/pages/swaps/dropdown-input-pair/index.scss
  5. 28
      ui/pages/swaps/dropdown-search-list/index.scss
  6. 2
      ui/pages/swaps/exchange-rate-display/index.scss
  7. 22
      ui/pages/swaps/fee-card/index.scss
  8. 2
      ui/pages/swaps/import-token/index.scss
  9. 12
      ui/pages/swaps/index.scss
  10. 8
      ui/pages/swaps/loading-swaps-quotes/index.scss
  11. 8
      ui/pages/swaps/main-quote-summary/index.scss
  12. 30
      ui/pages/swaps/searchable-item-list/index.scss
  13. 22
      ui/pages/swaps/select-quote-popover/index.scss
  14. 12
      ui/pages/swaps/select-quote-popover/quote-details/index.scss
  15. 24
      ui/pages/swaps/slippage-buttons/index.scss
  16. 8
      ui/pages/swaps/smart-transaction-status/index.scss
  17. 2
      ui/pages/swaps/swaps-footer/index.scss
  18. 6
      ui/pages/swaps/view-quote/index.scss

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

@ -16,7 +16,7 @@ import {
export default function TransactionDetailItem({
detailTitle = '',
detailText = '',
detailTitleColor = COLORS.BLACK,
detailTitleColor = COLORS.TEXT_DEFAULT,
detailTotal = '',
subTitle = '',
subText = '',

12
ui/pages/swaps/awaiting-swap/index.scss
Unescape View File

@ -21,7 +21,7 @@
}
a {
color: var(--Blue-500);
color: var(--text-primary-color);
}
&__status-image {
@ -32,13 +32,13 @@
&__header {
@include H3;
color: var(--Black-100);
color: var(--color-text-default);
}
&__main-description {
@include H6;
color: var(--Grey-500);
color: var(--color-text-alternative);
margin-top: 16px;
width: 100%;
}
@ -46,7 +46,7 @@
&__time-estimate {
@include H7;
color: var(--Black-100);
color: var(--color-text-default);
margin-top: 20px;
font-style: italic;
@ -66,7 +66,7 @@
&__view-on-etherscan,
&__support-link {
color: var(--Blue-500);
color: var(--text-primary-color);
margin-top: 24px;
cursor: pointer;
}
@ -90,7 +90,7 @@
}
&__amount-and-symbol {
color: var(--Black-100);
color: var(--color-text-default);
font-weight: bold;
}
}

18
ui/pages/swaps/build-quote/index.scss
Unescape View File

@ -42,7 +42,7 @@
@include H5;
font-weight: bold;
color: var(--Black-100);
color: var(--color-text-default);
margin-top: 3px;
}
@ -67,7 +67,7 @@
&__max-button {
@include H7;
color: var(--Blue-500);
color: var(--text-primary-color);
cursor: pointer;
}
@ -75,7 +75,7 @@
@include H7;
width: 100%;
color: var(--Grey-500);
color: var(--color-text-muted);
margin-top: 4px;
display: flex;
flex-flow: column;
@ -84,17 +84,17 @@
&--error {
div:first-of-type {
font-weight: bold;
color: var(--Black-100);
color: var(--color-text-default);
}
.build-quote__form-error:first-of-type {
font-weight: bold;
color: var(--Red-500);
color: var(--color-error-default);
}
div:last-of-type {
font-weight: normal;
color: var(--Grey-500);
color: var(--color-text-alternative);
}
}
}
@ -142,7 +142,7 @@
@include H7;
width: 100%;
color: var(--Grey-500);
color: var(--color-text-alternative);
margin-top: 4px;
.info-tooltip {
@ -151,7 +151,7 @@
}
&__token-etherscan-link {
color: var(--Blue-500);
color: var(--color-primary-default);
cursor: pointer;
}
@ -190,7 +190,7 @@
}
a {
color: var(--Blue-500);
color: var(--color-primary-default);
cursor: pointer;
}
}

4
ui/pages/swaps/dropdown-input-pair/index.scss
Unescape View File

@ -14,7 +14,7 @@
}
div {
border: 1px solid var(--Grey-100);
border: 1px solid var(--color-background-alternative);
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-left-color: transparent;
@ -47,7 +47,7 @@
height: 100%;
display: flex;
align-items: center;
color: var(--Grey-500);
color: var(--color-text-alternative);
&--two-lines {
right: inherit;

28
ui/pages/swaps/dropdown-search-list/index.scss
Unescape View File

@ -10,7 +10,7 @@
&__token-container {
margin: 0;
min-height: auto;
border: 1px solid #d6d9dc;
border: 1px solid var(--color-border-default);
box-sizing: border-box;
box-shadow: none;
border-radius: 6px;
@ -18,8 +18,8 @@
}
&--open {
box-shadow: 0 0 14px rgba(0, 0, 0, 0.18);
border: 1px solid var(--Grey-100);
box-shadow: 0 0 14px rgba(0, 0, 0, 0.18); /* TODO! */
border: 1px solid var(--color-border-default);
}
&__close-area {
@ -40,18 +40,18 @@
transition: 200ms ease-in-out;
border-radius: 6px;
box-shadow: none;
border: 1px solid #d6d9dc;
border: 1px solid var(--color-border-default);
height: 60px;
&:hover {
background: var(--Grey-000);
background: var(--color-background-alternative);
}
}
&__caret {
position: absolute;
right: 16px;
color: var(--Grey-200);
color: var(--color-icon-muted);
}
&__selector-closed {
@ -83,7 +83,7 @@
&__closed-primary-label {
@include H4;
color: var(--Black-100);
color: var(--color-text-default);
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
@ -92,14 +92,14 @@
&__search-list--open {
box-shadow: 0 0 14px rgba(0, 0, 0, 0.18);
border: 1px solid var(--Grey-100);
border: 1px solid var(--color-border-muted);
}
&__default-dropdown-icon {
width: 34px;
height: 34px;
border-radius: 50%;
background: var(--Grey-200);
background: var(--color-background-alternative);
flex: 0 1 auto;
}
@ -118,18 +118,18 @@
}
&__select-default {
color: var(--Grey-200);
color: var(--color-text-muted);
}
&__placeholder {
@include H6;
padding: 16px;
color: var(--Grey-500);
color: var(--color-text-alternative);
min-height: 300px;
position: relative;
z-index: 1002;
background: white;
background: var(--color-background-default);
border-radius: 6px;
min-height: 194px;
overflow: hidden;
@ -149,10 +149,10 @@
padding: 16px 12px;
box-sizing: border-box;
cursor: pointer;
border-top: 1px solid var(--Grey-100);
border-top: 1px solid var(--color-border-muted);
position: relative;
z-index: 1;
background: var(--white);
background: var(--color-background-default);
}
&__loading-item-text-container {

2
ui/pages/swaps/exchange-rate-display/index.scss
Unescape View File

@ -4,7 +4,7 @@
display: flex;
align-items: flex-end;
justify-content: center;
color: var(--Black-100);
color: var(--color-text-default);
width: 100%;
flex-wrap: wrap;

22
ui/pages/swaps/fee-card/index.scss
Unescape View File

@ -23,7 +23,7 @@
@include H6;
font-weight: bold;
color: var(--Blue-500);
color: var(--color-primary-default);
}
&__quote-link-container {
@ -35,13 +35,13 @@
&__quote-link-text {
@include H7;
color: var(--Blue-500);
color: var(--color-primary-default);
cursor: pointer;
padding-right: 4px;
}
&__caret-right {
color: var(--Blue-500);
color: var(--color-primary-default);
width: 6px;
height: 6px;
display: flex;
@ -84,7 +84,7 @@
}
&__row-header-text--bold {
color: var(--Black-100);
color: var(--color-text-default);
}
&__row-header-text {
@ -147,18 +147,18 @@
&__link,
&__link:hover {
color: var(--Blue-500);
color: var(--color-primary-default);
cursor: pointer;
}
&__edit-link {
color: var(--Blue-500);
ccolor: var(--color-primary-default);
cursor: pointer;
padding-left: 6px;
}
&__total-box {
border-top: 1px solid var(--Grey-100);
border-top: 1px solid var(--color-border-muted);
padding: 12px 16px 16px 16px;
}
@ -174,13 +174,13 @@
display: flex;
justify-content: flex-end;
font-weight: bold;
color: var(--Grey-500);
color: var(--color-text-alternative);
margin-top: 4px;
}
&__row-header-secondary,
&__row-header-secondary--bold {
color: var(--Grey-500);
color: var(--color-text-alternative);
}
&__row-header-secondary,
@ -189,11 +189,11 @@
}
&__row-header-primary {
color: var(--Grey-500);
color: var(--color-text-alternative);
}
&__row-header-primary--bold {
color: var(--Black-100);
color: var(--color-text-default);
}
&__row-header-text--bold,

2
ui/pages/swaps/import-token/index.scss
Unescape View File

@ -10,7 +10,7 @@
}
&__message {
color: var(--Black-100);
color: var(--color-text-default);
text-align: left;
}
}

12
ui/pages/swaps/index.scss
Unescape View File

@ -46,8 +46,8 @@
@media screen and (min-width: $break-large) {
width: 460px;
background: white;
border: 1px solid var(--Grey-100);
background: var(--color-background-default);
border: 1px solid var(--color-border-muted);
box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.08);
border-radius: 8px;
height: 620px;
@ -77,7 +77,7 @@
@include H5;
font-weight: bold;
color: var(--Black-100);
color: var(--color-text-default);
margin-top: -5px;
flex: 1;
text-align: center;
@ -90,7 +90,7 @@
align-items: center;
padding-top: 0;
padding-bottom: 16px;
background: var(--Grey-000);
background: var(--color-background-alternative);
width: 100%;
position: relative;
flex-direction: row;
@ -105,7 +105,7 @@
&__header-cancel {
@include H7;
color: var(--Blue-500);
color: var(--color-primary-default);
cursor: pointer;
padding-right: 24px;
flex: 1;
@ -115,7 +115,7 @@
&__header-edit {
@include H7;
color: var(--Blue-500);
color: var(--color-primary-default);
cursor: pointer;
padding-left: 24px;
flex: 1;

8
ui/pages/swaps/loading-swaps-quotes/index.scss
Unescape View File

@ -17,7 +17,7 @@
&__quote-counter {
@include H7;
color: var(--Grey-500);
color: var(--color-text-alternative);
margin-top: 3px;
display: flex;
justify-content: center;
@ -29,7 +29,7 @@
@include H4;
font-weight: bold;
color: var(--Black-100);
color: var(--color-text-default);
display: flex;
justify-content: center;
width: 100%;
@ -123,14 +123,14 @@
&__loading-bar-container {
width: 248px;
height: 3px;
background: var(--Grey-100);
background: var(--color-background-alternative);
display: flex;
margin-top: 16px;
}
&__loading-bar {
height: 3px;
background: var(--Blue-500);
background: var(--color-primary-default);
-webkit-transition: width 0.5s linear;
-moz-transition: width 0.5s linear;
-o-transition: width 0.5s linear;

8
ui/pages/swaps/main-quote-summary/index.scss
Unescape View File

@ -5,7 +5,7 @@
align-items: center;
position: relative;
width: 100%;
color: var(--Black-100);
color: var(--color-text-default);
margin-top: 28px;
margin-bottom: 56px;
@ -18,7 +18,7 @@
@include H6;
color: var(--Grey-500);
color: var(--color-text-alternative);
}
&__source-row {
@ -53,7 +53,7 @@
&__destination-row-symbol {
margin-left: 5px;
color: var(--Black-100);
color: var(--color-text-default);
}
&__icon,
@ -117,6 +117,6 @@
}
&__exchange-rate-display {
color: var(--Grey-500);
color: var(--color-text-alternative);
}
}

30
ui/pages/swaps/searchable-item-list/index.scss
Unescape View File

@ -1,12 +1,12 @@
.searchable-item-list {
background: var(--white);
background: var(--color-background-default);
width: 100%;
position: relative;
&__search {
> div {
border: none;
border-bottom: 1px solid var(--Grey-100);
border-bottom: 1px solid var(--color-border-muted);
border-radius: 0;
height: 55px;
font-size: 12px;
@ -14,26 +14,26 @@
input {
@include H6;
color: var(--Grey-500);
color: var(--color-text-default);
line-height: 100%;
&::-webkit-input-placeholder {
color: var(--Grey-500);
color: var(--color-text-muted);
opacity: 1;
}
&:-moz-placeholder {
color: var(--Grey-500);
color: var(--color-text-muted);
opacity: 1;
}
&::-moz-placeholder {
color: var(--Grey-500);
color: var(--color-text-muted);
opacity: 1;
}
&::placeholder {
color: var(--Grey-500);
color: var(--color-text-muted);
opacity: 1;
}
}
@ -54,7 +54,7 @@
padding: 8px 12px;
box-sizing: border-box;
cursor: pointer;
border-top: 1px solid var(--Grey-100);
border-top: 1px solid var(--color-border-muted);
position: relative;
min-height: 50px;
@ -68,11 +68,11 @@
&:hover,
&:focus {
background: var(--Grey-000);
background: var(--color-background-alternative);
}
&--selected {
border: 1px solid var(--malibu-blue) !important;
border: 1px solid var(--color-primary-default) !important;
}
&--disabled {
@ -94,12 +94,12 @@
&__message {
text-align: left;
color: var(--Black-100);
color: var(--color-text-default);
}
a {
pointer-events: auto;
color: #037dd6;
color: var(--color-primary-default);
cursor: pointer;
}
}
@ -170,7 +170,7 @@
@include H7;
line-height: 100%;
color: var(--Grey-500);
color: var(--color-text-alternative);
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
@ -185,7 +185,7 @@
@include H7;
line-height: 100%;
color: var(--Grey-500);
color: var(--color-text-alternative);
opacity: 0.5;
text-overflow: ellipsis;
overflow: hidden;
@ -194,7 +194,7 @@
&__list-container {
z-index: 1002;
background: white;
background: var(--color-background-default);
}
&__search {

22
ui/pages/swaps/select-quote-popover/index.scss
Unescape View File

@ -28,7 +28,7 @@
&__popover-bg {
height: 100%;
width: 100%;
background: var(--Grey-100);
background: var(--color-background-alternative);
opacity: 1;
@media screen and (min-width: $break-large) {
@ -58,7 +58,7 @@
@include H8;
font-weight: bold;
color: var(--Black-100);
color: var(--color-text-default);
height: 43px;
margin-bottom: 4px;
}
@ -74,7 +74,7 @@
cursor: pointer;
color: var(--black);
height: 49px;
border-bottom: 1px solid var(--Grey-100);
border-bottom: 1px solid var(--color-background-alternative);
margin-bottom: 8px;
border-radius: 8px;
background: var(--Grey-000);
@ -82,7 +82,7 @@
border: none;
&:hover {
border: 1px solid var(--Blue-500);
border: 1px solid var(--color-primary-default);
width: 101%;
padding-right: 11px;
padding-left: 19.5px;
@ -90,7 +90,7 @@
&--no-hover {
&:hover {
border: 1px solid var(--Grey-100);
border: 1px solid var(--color-background-alternative);
width: 100%;
padding-right: 12px;
padding-left: 20px;
@ -99,7 +99,7 @@
&--selected {
color: var(--white);
background: linear-gradient(90deg, var(--Blue-500) 0%, var(--Blue-400) 101.32%);
background: linear-gradient(90deg, var(--color-primary-default) 0%, var(--primary-alternative) 101.32%);
box-shadow: 0 10px 39px rgba(3, 125, 214, 0.15);
border-radius: 8px;
border-bottom: none;
@ -107,7 +107,7 @@
height: 64px;
&:hover {
background: linear-gradient(90deg, var(--Blue-500) 0%, var(--Blue-400) 101.32%);
background: linear-gradient(90deg, var(--color-primary-default) 0%, var(--color-primary-alternative) 101.32%);
width: 100%;
padding-left: 20px;
padding-right: 12px;
@ -118,7 +118,7 @@
color: var(--white);
&:hover {
color: var(--Grey-500);
color: var(--color-text-alternative);
}
}
@ -146,7 +146,7 @@
}
&__caret-right {
color: var(--Grey-500);
color: var(--color-text-alternative);
width: 32px;
height: 32px;
display: flex;
@ -160,7 +160,7 @@
&:hover {
border-radius: 8px;
background: white;
border: 1px solid var(--Blue-500);
border: 1px solid var(--color-primary-default);
}
}
@ -211,7 +211,7 @@
&__receiving-symbol {
color: var(--Grey-500);
color: var(--color-text-alternative);
> div {
width: 12px;

12
ui/pages/swaps/select-quote-popover/quote-details/index.scss
Unescape View File

@ -15,7 +15,7 @@
&__detail-content {
@include H6;
color: var(--Black-100);
color: var(--color-text-default);
> div {
justify-content: flex-start;
@ -23,17 +23,17 @@
}
&__conversion-rate {
color: var(--Black-100);
color: var(--color-text-default);
justify-content: flex-start;
align-items: center;
height: inherit;
.view-quote__conversion-rate-eth-label {
color: var(--Black-100);
color: var(--color-text-default);
}
i {
color: var(--Blue-500);
color: var(--color-primary-default);
}
* {
@ -62,7 +62,7 @@
display: flex;
flex-flow: column;
justify-content: center;
border-top: 1px solid var(--Grey-100);
border-top: 1px solid var(--color-background-alternative);
&--high {
min-height: 60px;
@ -73,7 +73,7 @@
.view-quote__conversion-rate-token-label {
@include H6;
color: var(--Black-100);
color: var(--color-text-default);
font-weight: bold;
margin-left: 2px;
}

24
ui/pages/swaps/slippage-buttons/index.scss
Unescape View File

@ -7,7 +7,7 @@
&__header {
display: flex;
align-items: center;
color: var(--Blue-500);
color: var(--color-primary-default);
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
@ -22,7 +22,7 @@
@include H6;
margin-right: 6px;
color: var(--Blue-500);
color: var(--color-primary-default);
font-weight: 900;
}
@ -45,14 +45,14 @@
@include H6;
margin-right: 4px;
color: black;
color: var(--color-text-default);
font-weight: 900;
}
&__error-text {
@include H7;
color: var(--Red-500);
color: var(--color-error-default);
margin-top: 8px;
}
@ -76,34 +76,34 @@
border: none;
width: 64px;
text-align: center;
background: var(--Blue-500);
color: white;
background: var(--color-primary-default);
color: var(--color-primary-inverse);
font-weight: inherit;
&::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color: white;
color: var(--color-primary-inverse);
}
&:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: white;
color: var(--color-primary-inverse);
opacity: 1;
}
&::-moz-placeholder { /* Mozilla Firefox 19+ */
color: white;
color: var(--color-primary-inverse);
opacity: 1;
}
&:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: white;
color: var(--color-primary-inverse);
}
&::-ms-input-placeholder { /* Microsoft Edge */
color: white;
color: var(--color-primary-inverse);
}
&::placeholder { /* Most modern browsers support this now. */
color: white;
color: var(--color-primary-inverse);
}
}

8
ui/pages/swaps/smart-transaction-status/index.scss
Unescape View File

@ -13,7 +13,7 @@
&__loading-bar-container {
height: 3px;
background: var(--Grey-100);
background: var(--color-background-alternative);
display: flex;
margin-top: 12px;
margin-bottom: 28px;
@ -21,7 +21,7 @@
&__loading-bar {
height: 3px;
background: var(--Blue-500);
background: var(--color-primary-default);
transition: width 0.5s linear;
}
@ -58,11 +58,11 @@
}
a {
color: var(--Blue-500);
color: var(--color-primary-default);
}
&__support-link {
color: var(--Blue-500);
color: var(--color-primary-default);
margin-top: 24px;
cursor: pointer;
}

2
ui/pages/swaps/swaps-footer/index.scss
Unescape View File

@ -38,7 +38,7 @@
&__bottom-text {
@include H7;
color: var(--Blue-500);
color: var(--color-primary-default);
margin-bottom: 16px;
cursor: pointer;
display: flex;

6
ui/pages/swaps/view-quote/index.scss
Unescape View File

@ -73,7 +73,7 @@
cursor: pointer;
border-radius: 28px;
padding: 5px 18px;
background: linear-gradient(90deg, var(--Blue-500) 0%, var(--Blue-400) 101.32%);
background: linear-gradient(90deg, var(--color-primary-default) 0%, var(--color-primary-alternative) 101.32%);
@media screen and (min-width: $break-large) {
@ -122,7 +122,7 @@
&.low {
.actionable-message {
button {
background: var(--Blue-500);
background: var(--color-primary-default);
color: #fff;
}
}
@ -217,7 +217,7 @@
&__metamask-rate-text {
@include H7;
color: var(--Grey-500);
color: var(--color-text-alternative);
}
&__metamask-rate-info-icon {

Write Preview
Loading…
Cancel
Save