m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-22 09:57:02 +01:00
Code

Dark Mode: Send flow inputs (#14006)

Browse Source
This commit is contained in:
David Walsh 2022-03-21 08:55:01 -05:00 committed by GitHub
parent fc50115fef
commit 59a5566958
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 94 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
ui/components/ui/unit-input/index.scss
View File

@ -5,10 +5,10 @@
flex-flow: row nowrap; flex-flow: row nowrap;
align-items: center; align-items: center;
min-height: 54px; min-height: 54px;
border: 1px solid #dedede; border: 1px solid var(--color-border-default);
border-radius: 4px; border-radius: 4px;
background-color: #fff; background-color: var(--color-background-default);
color: #4d4d4d; color: var(--color-text-default);
padding: 8px 10px; padding: 8px 10px;
position: relative; position: relative;
@ -37,16 +37,13 @@
&__input { &__input {
@include Paragraph; @include Paragraph;
color: #4d4d4d; color: var(--color-text-default);
background: transparent;
border: none; border: none;
max-width: 15ch; max-width: 15ch;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
height: 16px; height: 16px;
&__disabled {
background-color: rgb(222, 222, 222);
}
} }
&__input-container { &__input-container {
@ -62,10 +59,6 @@
} }
&--error { &--error {
border-color: var(--red); border-color: var(--color-error-default);
}
&__disabled {
background-color: #f2f3f4;
} }
} }

184
ui/css/itcss/components/send.scss
View File

@ -14,7 +14,7 @@
} }
.send-screen-card { .send-screen-card {
background-color: #fff; background-color: var(--color-background-default);
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08); box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
padding: 46px 40.5px 26px; padding: 46px 40.5px 26px;
position: relative; position: relative;
@ -48,13 +48,13 @@
border-radius: 50%; border-radius: 50%;
width: 70px; width: 70px;
height: 70px; height: 70px;
border: 1px solid var(--alto); border: 1px solid var(--color-border-muted);
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2); box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2);
position: absolute; position: absolute;
top: -35px; top: -35px;
z-index: 25; z-index: 25;
padding: 4px; padding: 4px;
background-color: var(--white); background-color: var(--color-background-default);
@media screen and (max-width: $break-small) { @media screen and (max-width: $break-small) {
position: relative; position: relative;
@ -73,7 +73,7 @@
.large-input { .large-input {
@include Paragraph; @include Paragraph;
border: 1px solid var(--dusty-gray); border: 1px solid var(--color-border-default);
border-radius: 4px; border-radius: 4px;
margin: 4px 0 20px; margin: 4px 0 20px;
} }
@ -89,7 +89,7 @@
&--error { &--error {
input, input,
.send-screen-gas-input { .send-screen-gas-input {
border-color: var(--red) !important; border-color: var(--color-error-default) !important;
} }
.send-screen-input-wrapper__error-message { .send-screen-input-wrapper__error-message {
@ -99,7 +99,7 @@
position: absolute; position: absolute;
bottom: 4px; bottom: 4px;
left: 8px; left: 8px;
color: var(--red); color: var(--color-error-default);
} }
} }
@ -110,7 +110,7 @@
position: absolute; position: absolute;
bottom: 4px; bottom: 4px;
left: 8px; left: 8px;
color: var(--red); color: var(--color-error-default);
} }
} }
@ -124,7 +124,7 @@
width: 100%; width: 100%;
height: 41px; height: 41px;
border-radius: 3px; border-radius: 3px;
background-color: #f3f3f3; background-color: var(--color-background-default);
border-width: 0; border-width: 0;
border-style: none; border-style: none;
display: flex; display: flex;
@ -132,7 +132,7 @@
align-items: center; align-items: center;
padding-left: 10px; padding-left: 10px;
padding-right: 12px; padding-right: 12px;
color: var(--scorpion); color: var(--color-text-alternative);
} }
.send-screen-amount-labels { .send-screen-amount-labels {
@ -149,11 +149,11 @@
.currency-toggle { .currency-toggle {
&__item { &__item {
color: var(--primary-blue); color: var(--color-primary-default);
cursor: pointer; cursor: pointer;
&--selected { &--selected {
color: var(--black); color: var(--color-text-default);
cursor: default; cursor: default;
} }
} }
@ -162,7 +162,7 @@
.send-screen-gas-input-customize { .send-screen-gas-input-customize {
@include H7; @include H7;
color: var(--primary-blue); color: var(--color-primary-default);
cursor: pointer; cursor: pointer;
} }
@ -182,7 +182,7 @@
bottom: 50px; bottom: 50px;
width: 237px; width: 237px;
height: 307px; height: 307px;
background-color: var(--white); background-color: var(--color-background-default);
opacity: 1; opacity: 1;
box-shadow: var(--alto) 0 0 5px; box-shadow: var(--alto) 0 0 5px;
z-index: 1050; z-index: 1050;
@ -195,7 +195,7 @@
height: 25px; height: 25px;
width: 25px; width: 25px;
z-index: 1200; z-index: 1200;
background: var(--white); background: var(--color-background-default);
position: absolute; position: absolute;
transform: rotate(45deg); transform: rotate(45deg);
left: 107px; left: 107px;
@ -225,7 +225,7 @@
.gas-tooltip-label { .gas-tooltip-label {
@include Paragraph; @include Paragraph;
color: var(--tundora); color: var(--color-text-alternative);
} }
.gas-tooltip-header { .gas-tooltip-header {
@ -237,7 +237,7 @@
} }
.gas-tooltip-input-label i { .gas-tooltip-input-label i {
color: var(--silver-chalice); color: var(--color-icon-muted);
margin-left: 6px; margin-left: 6px;
} }
@ -246,8 +246,8 @@
width: 178px; width: 178px;
height: 28px; height: 28px;
border: 1px solid var(--alto); border: 1px solid var(--color-border-muted);
color: var(--nile-blue); color: var(--color-text-default);
padding-left: 8px; padding-left: 8px;
} }
@ -261,7 +261,7 @@
position: absolute; position: absolute;
top: 4px; top: 4px;
right: 26px; right: 26px;
color: var(--silver-chalice); color: var(--color-text-muted);
} }
.gas-tooltip-input-arrows { .gas-tooltip-input-arrows {
@ -272,11 +272,11 @@
right: 4px; right: 4px;
width: 17px; width: 17px;
height: 28px; height: 28px;
border: 1px solid #dadada; border: 1px solid var(--color-icon-muted);
border-left: 0; border-left: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
color: #9b9b9b; color: var(--color-text-muted);
padding: 1px 4px; padding: 1px 4px;
cursor: pointer; cursor: pointer;
} }
@ -296,7 +296,7 @@
&__title { &__title {
@include H4; @include H4;
color: var(--scorpion); color: var(--color-text-alternative);
} }
&__subtitle { &__subtitle {
@ -325,7 +325,7 @@
&__content { &__content {
width: 498px; width: 498px;
height: 605px; height: 605px;
background-color: #fff; background-color: var(--color-background-default);
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08); box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
padding: 46px 40.5px 26px; padding: 46px 40.5px 26px;
position: relative; position: relative;
@ -357,7 +357,7 @@
&__title { &__title {
@include H4; @include H4;
color: var(--scorpion); color: var(--color-text-alternative);
} }
&__description, &__description,
@ -405,7 +405,7 @@
&__container { &__container {
width: 380px; width: 380px;
border-radius: 8px; 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); box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
display: flex; display: flex;
flex-flow: column nowrap; flex-flow: column nowrap;
@ -434,16 +434,16 @@
border-radius: 50%; border-radius: 50%;
width: 48px; width: 48px;
height: 48px; height: 48px;
border: 1px solid var(--alto); border: 1px solid var(--color-border-muted);
z-index: 25; z-index: 25;
padding: 4px; padding: 4px;
background-color: var(--white); background-color: var(--color-background-default);
} }
&__send-arrow-icon { &__send-arrow-icon {
@include H4; @include H4;
color: #f28930; color: var(--color-secondary-default);
transform: rotate(-45deg); transform: rotate(-45deg);
position: absolute; position: absolute;
top: -2px; top: -2px;
@ -451,7 +451,7 @@
} }
&__arrow-background { &__arrow-background {
background-color: var(--white); background-color: var(--color-background-default);
height: 14px; height: 14px;
width: 14px; width: 14px;
position: absolute; position: absolute;
@ -468,7 +468,7 @@
&__header { &__header {
height: 88px; height: 88px;
width: 380px; width: 380px;
background-color: var(--athens-grey); background-color: var(--color-background-alternative);
position: relative; position: relative;
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -483,7 +483,7 @@
&__header-tip { &__header-tip {
height: 25px; height: 25px;
width: 25px; width: 25px;
background: var(--athens-grey); background-color: var(--color-background-alternative);
position: absolute; position: absolute;
transform: rotate(45deg); transform: rotate(45deg);
left: 178px; left: 178px;
@ -500,7 +500,7 @@
&__title { &__title {
@include H3; @include H3;
color: var(--scorpion); color: var(--color-text-alternative);
text-align: center; text-align: center;
margin-top: 25px; margin-top: 25px;
} }
@ -508,7 +508,7 @@
&__copy { &__copy {
@include H6; @include H6;
color: var(--gray); color: var(--color-text-alternative);
text-align: center; text-align: center;
margin-top: 10px; margin-top: 10px;
width: 287px; width: 287px;
@ -518,7 +518,7 @@
@include H7; @include H7;
left: 8px; left: 8px;
color: var(--red); color: var(--color-error-default);
} }
&__error-amount { &__error-amount {
@ -529,11 +529,11 @@
@include H7; @include H7;
left: 8px; left: 8px;
color: var(--orange); color: var(--color-secondary-default);
} }
&__error-border { &__error-border {
color: var(--red); color: var(--color-error-default);
} }
&__form { &__form {
@ -572,21 +572,21 @@
min-width: 0; min-width: 0;
.currency-display { .currency-display {
color: var(--tundora); color: var(--color-text-alternative);
&__currency-symbol { &__currency-symbol {
color: var(--tundora); color: var(--color-text-alternative);
} }
&__converted-value, &__converted-value,
&__converted-currency { &__converted-currency {
color: var(--tundora); color: var(--color-text-alternative);
} }
} }
.account-list-item { .account-list-item {
&__account-secondary-balance { &__account-secondary-balance {
color: var(--tundora); color: var(--color-text-alternative);
} }
} }
} }
@ -594,7 +594,7 @@
&__form-label { &__form-label {
@include Paragraph; @include Paragraph;
color: var(--scorpion); color: var(--color-text-alternative);
width: 95px; width: 95px;
flex: 0 0 auto; flex: 0 0 auto;
} }
@ -604,10 +604,10 @@
@include H7; @include H7;
width: 100%; width: 100%;
border: 1px solid var(--alto); border: 1px solid var(--color-border-muted);
border-radius: 4px; border-radius: 4px;
background-color: var(--white); background-color: var(--color-background-default);
color: var(--tundora); color: var(--color-text-default);
position: relative; position: relative;
&__close-area { &__close-area {
@ -624,9 +624,9 @@
position: absolute; position: absolute;
height: 220px; height: 220px;
width: 100%; width: 100%;
border: 1px solid var(--geyser); border: 1px solid var(--color-border-muted);
border-radius: 4px; border-radius: 4px;
background-color: var(--white); background-color: var(--color-background-default);
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.11); box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.11);
margin-top: 11px; margin-top: 11px;
margin-left: -1px; margin-left: -1px;
@ -648,14 +648,10 @@
flex-flow: row nowrap; flex-flow: row nowrap;
align-items: center; align-items: center;
padding: 8px 8px; padding: 8px 8px;
&:hover {
background-color: rgba($alto, 0.2);
}
} }
&__caret { &__caret {
color: var(--silver); color: var(--color-text-muted);
padding: 0 10px; padding: 0 10px;
} }
@ -665,15 +661,11 @@
align-items: center; align-items: center;
padding: 0 8px; padding: 0 8px;
cursor: pointer; cursor: pointer;
&:hover {
background-color: rgba($alto, 0.2);
}
} }
&__asset-icon { &__asset-icon {
.identicon { .identicon {
border: 1px solid var(--alto); border: 1px solid var(--color-border-muted);
} }
} }
@ -720,9 +712,9 @@
position: absolute; position: absolute;
height: 220px; height: 220px;
width: 100%; width: 100%;
border: 1px solid var(--geyser); border: 1px solid var(--color-border-muted);
border-radius: 4px; border-radius: 4px;
background-color: var(--white); background-color: var(--color-background-default);
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.11); box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.11);
top: 65px; top: 65px;
left: 0; left: 0;
@ -737,7 +729,7 @@
} }
&__input-wrapper { &__input-wrapper {
border: 1px solid var(--alto); border: 1px solid var(--color-border-muted);
border-radius: 4px; border-radius: 4px;
height: 100%; height: 100%;
@ -750,7 +742,7 @@
height: 100%; height: 100%;
&:hover { &:hover {
background-color: var(--white); background-color: var(--color-background-default);
} }
} }
} }
@ -764,8 +756,8 @@
width: 100%; width: 100%;
border: none; border: none;
border-radius: 4px; border-radius: 4px;
background-color: var(--white); background-color: var(--color-background-default);
color: var(--tundora); color: var(--color-text-alternative);
padding: 10px; padding: 10px;
} }
} }
@ -779,10 +771,10 @@
position: relative; position: relative;
height: 54px; height: 54px;
width: 100%; width: 100%;
border: 1px solid var(--alto); border: 1px solid var(--color-border-muted);
border-radius: 4px; border-radius: 4px;
background-color: var(--white); background-color: var(--color-background-default);
color: var(--tundora); color: var(--color-text-alternative);
padding: 10px; padding: 10px;
} }
} }
@ -801,7 +793,7 @@
width: 56px; width: 56px;
height: 20px; height: 20px;
position: absolute; position: absolute;
border: 1px solid #b0d7f2; border: 1px solid var(--color-primary-default);
border-radius: 100px; border-radius: 100px;
cursor: pointer; cursor: pointer;
top: 0; top: 0;
@ -811,19 +803,19 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
color: #2f9ae0; color: var(--color-primary-default);
background: #fff; background: var(--color-background-default);
&__disabled { &__disabled {
color: #b0d7f2; opacity: 0.5;
cursor: auto; cursor: auto;
} }
} }
input:checked + &__button { input:checked + &__button {
background-color: var(--primary-blue); background-color: var(--color-primary-default);
border: 1px solid var(--primary-blue); border: 1px solid var(--color-primary-default);
color: #fff; color: var(--color-primary-inverse);
} }
} }
@ -852,9 +844,9 @@
justify-content: center; justify-content: center;
height: 24px; height: 24px;
width: 24px; width: 24px;
border: 1px solid var(--primary-blue); border: 1px solid var(--color-primary-default);
border-radius: 4px; border-radius: 4px;
background-color: var(--white); background-color: var(--color-background-default);
position: absolute; position: absolute;
right: 15px; right: 15px;
top: 14px; top: 14px;
@ -862,7 +854,7 @@
} }
&__sliders-icon { &__sliders-icon {
color: var(--primary-blue); color: var(--color-primary-default);
} }
&__memo-text-area { &__memo-text-area {
@ -877,8 +869,8 @@
display: flex; display: flex;
justify-content: space-evenly; justify-content: space-evenly;
align-items: center; align-items: center;
border-top: 1px solid var(--alto); border-top: 1px solid var(--color-border-muted);
background: var(--white); background: var(--color-background-default);
padding: 0 12px; padding: 0 12px;
flex-shrink: 0; flex-shrink: 0;
} }
@ -890,9 +882,9 @@
} }
&__customize-gas { &__customize-gas {
border: 1px solid #d8d8d8; border: 1px solid var(--color-border-muted);
border-radius: 4px; border-radius: 4px;
background-color: #fff; background-color: var(--color-background-default);
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.14); box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.14);
display: flex; display: flex;
flex-flow: column; flex-flow: column;
@ -906,7 +898,7 @@
@include H3; @include H3;
height: 52px; height: 52px;
border-bottom: 1px solid var(--alto); border-bottom: 1px solid var(--color-border-muted);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
@ -923,7 +915,7 @@
&__close::after { &__close::after {
content: '\00D7'; content: '\00D7';
font-size: 1.8em; font-size: 1.8em;
color: var(--dusty-gray); color: var(--color-icon-default);
cursor: pointer; cursor: pointer;
margin-right: 19.25px; margin-right: 19.25px;
} }
@ -948,7 +940,7 @@
@include H3; @include H3;
height: 75px; height: 75px;
border-top: 1px solid var(--alto); border-top: 1px solid var(--color-border-muted);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
@ -979,7 +971,7 @@
&__revert { &__revert {
@include Paragraph; @include Paragraph;
color: var(--silver-chalice); color: var(--color-text-muted);
margin-left: 21.25px; margin-left: 21.25px;
} }
@ -1002,7 +994,7 @@
position: absolute; position: absolute;
top: -18px; top: -18px;
right: 0; right: 0;
color: var(--red); color: var(--color-error-default);
width: 100%; width: 100%;
text-align: center; text-align: center;
} }
@ -1023,7 +1015,7 @@
@include H4; @include H4;
height: 26px; height: 26px;
color: var(--tundora); color: var(--color-text-alternative);
margin-top: 17px; margin-top: 17px;
} }
@ -1032,7 +1024,7 @@
height: 38px; height: 38px;
width: 314px; width: 314px;
color: var(--tundora); color: var(--color-text-alternative);
margin-top: 17px; margin-top: 17px;
} }
@ -1043,8 +1035,8 @@
.customize-gas-input { .customize-gas-input {
height: 54px; height: 54px;
width: 315px; width: 315px;
border: 1px solid var(--geyser); border: 1px solid var(--color-border-muted);
background-color: var(--white); background-color: var(--color-background-default);
padding-left: 15px; padding-left: 15px;
} }
@ -1053,8 +1045,8 @@
width: 32px; width: 32px;
height: 54px; height: 54px;
border-left: 1px solid #dadada; border-left: 1px solid var(--color-border-muted);
color: var(--tundora); color: var(--color-text-alternative);
right: 0; right: 0;
padding: 0; padding: 0;
display: flex; display: flex;
@ -1088,7 +1080,7 @@
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
color: #2f9ae0; color: var(--color-primary-default);
cursor: pointer; cursor: pointer;
margin-top: 5px; margin-top: 5px;
} }
@ -1101,9 +1093,9 @@
justify-content: center; justify-content: center;
height: 24px; height: 24px;
width: 24px; width: 24px;
border: 1px solid var(--primary-blue); border: 1px solid var(--color-primary-default);
border-radius: 4px; border-radius: 4px;
background-color: var(--white); background-color: var(--color-background-default);
position: absolute; position: absolute;
right: 15px; right: 15px;
top: 14px; top: 14px;
@ -1118,14 +1110,14 @@
justify-content: center; justify-content: center;
height: 24px; height: 24px;
border-radius: 4px; border-radius: 4px;
background-color: #fff; background-color: var(--color-background-default);
position: absolute; position: absolute;
right: 12px; right: 12px;
top: 14px; top: 14px;
cursor: pointer; cursor: pointer;
color: #2f9ae0; color: var(--color-primary-default);
} }
.sliders-icon { .sliders-icon {
color: var(--primary-blue); color: var(--color-primary-default);
} }