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

Dark Mode : Onboarding flow (#14020)

Browse Source
This commit is contained in:
Guillaume Roux 2022-03-19 01:43:33 +01:00 committed by GitHub
parent c3901e4ba8
commit 64d35458b0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
20 changed files with 82 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui/components/app/create-new-vault/create-new-vault.scss
View File

@ -20,7 +20,7 @@
} }
&__terms-link { &__terms-link {
color: var(--primary-1); color: var(--color-primary-default);
} }
&__submit-button#{&}__submit-button { &__submit-button#{&}__submit-button {

3
ui/components/app/srp-input/srp-input.js
View File

@ -7,6 +7,7 @@ import { clearClipboard } from '../../../helpers/utils/util';
import CheckBox from '../../ui/check-box'; import CheckBox from '../../ui/check-box';
import Typography from '../../ui/typography'; import Typography from '../../ui/typography';
import { COLORS } from '../../../helpers/constants/design-system'; import { COLORS } from '../../../helpers/constants/design-system';
import Textarea from '../../ui/textarea';
import { parseSecretRecoveryPhrase } from './parse-secret-recovery-phrase'; import { parseSecretRecoveryPhrase } from './parse-secret-recovery-phrase';
const { isValidMnemonic } = ethers.utils; const { isValidMnemonic } = ethers.utils;
@ -50,7 +51,7 @@ export default function SrpInput({ onChange }) {
<Typography>{t('secretRecoveryPhrase')}</Typography> <Typography>{t('secretRecoveryPhrase')}</Typography>
</label> </label>
{showSrp ? ( {showSrp ? (
<textarea <Textarea
id="import-srp__srp" id="import-srp__srp"
className="import-srp__srp-shown" className="import-srp__srp-shown"
onChange={onSrpChange} onChange={onSrpChange}

34
ui/components/app/step-progress-bar/index.scss
View File

@ -17,7 +17,7 @@ ul.two-steps {
font-size: 12px; font-size: 12px;
position: relative; position: relative;
text-align: center; text-align: center;
color: #7d7d7d; color: var(--color-text-alternative);
z-index: 2; z-index: 2;
} }
@ -27,12 +27,12 @@ ul.two-steps {
content: counter(step); content: counter(step);
counter-increment: step; counter-increment: step;
line-height: 30px; line-height: 30px;
border: 2px solid #d6d9dc; border: 2px solid var(--color-border-muted);
display: block; display: block;
text-align: center; text-align: center;
margin: 0 auto 10px auto; margin: 0 auto 10px auto;
border-radius: 50%; border-radius: 50%;
background-color: white; background-color: var(--color-background-default);
z-index: -1; z-index: -1;
} }
@ -41,7 +41,7 @@ ul.two-steps {
height: 2px; height: 2px;
content: ''; content: '';
position: absolute; position: absolute;
background-color: #d6d9dc; background-color: var(--color-background-alternative);
top: 15px; top: 15px;
right: 77px; right: 77px;
z-index: -1; z-index: -1;
@ -51,7 +51,7 @@ ul.two-steps {
height: 2px; height: 2px;
content: ''; content: '';
position: absolute; position: absolute;
background-color: #d6d9dc; background-color: var(--color-background-alternative);
right: 77px; right: 77px;
z-index: -1; z-index: -1;
} }
@ -66,40 +66,40 @@ ul.two-steps {
} }
.progressbar li.active { .progressbar li.active {
color: var(--primary-blue); color: var(--color-primary-default);
[dir='rtl'] & { [dir='rtl'] & {
color: var(--primary-blue); color: var(--color-primary-default);
} }
} }
.progressbar li.active::before { .progressbar li.active::before {
border-color: var(--primary-blue); border-color: var(--color-primary-default);
z-index: 1; z-index: 1;
[dir='rtl'] & { [dir='rtl'] & {
border-color: var(--primary-blue); border-color: var(--color-primary-default);
z-index: 1; z-index: 1;
} }
} }
.progressbar li.complete + li::after { .progressbar li.complete + li::after {
background-color: var(--primary-blue); background-color: var(--color-primary-default);
z-index: -1; z-index: -1;
[dir='rtl'] & { [dir='rtl'] & {
background-color: var(--primary-blue); background-color: var(--color-primary-default);
z-index: -1; z-index: -1;
} }
} }
.progressbar li.complete::before { .progressbar li.complete::before {
background-color: var(--primary-blue); background-color: var(--color-primary-default);
color: var(--ui-white); color: var(--color-primary-inverse);
[dir='rtl'] & { [dir='rtl'] & {
background-color: var(--primary-blue); background-color: var(--color-primary-default);
color: var(--ui-white); color: var(--color-primary-inverse);
} }
} }
@ -108,7 +108,7 @@ ul.two-steps {
height: 2px; height: 2px;
content: ''; content: '';
position: absolute; position: absolute;
background-color: #d6d9dc; background-color: var(--color-background-alternative);
top: 15px; top: 15px;
right: 75px; right: 75px;
z-index: -1; z-index: -1;
@ -118,7 +118,7 @@ ul.two-steps {
height: 2px; height: 2px;
content: ''; content: '';
position: absolute; position: absolute;
background-color: #d6d9dc; background-color: var(--color-background-alternative);
right: 75px; right: 75px;
z-index: -1; z-index: -1;
} }

10
ui/components/ui/check-box/index.scss
View File

@ -1,8 +1,8 @@
.check-box { .check-box {
-webkit-appearance: none; -webkit-appearance: none;
appearance: none; appearance: none;
background: var(--white); background: var(--color-background-default);
color: var(--Grey-100); color: var(--color-icon-muted);
width: 18px; width: 18px;
height: 18px; height: 18px;
font-size: 21px; font-size: 21px;
@ -12,12 +12,12 @@
&__checked, &__checked,
&__indeterminate { &__indeterminate {
color: var(--primary-blue); color: var(--color-primary-default);
border-color: var(--primary-blue); border-color: var(--color-primary-default);
} }
&:disabled { &:disabled {
color: var(--Grey-100); color: var(--color-icon-muted);
cursor: not-allowed; cursor: not-allowed;
} }
} }

2
ui/pages/first-time-flow/end-of-flow/index.scss
View File

@ -1,5 +1,5 @@
.end-of-flow { .end-of-flow {
color: black; color: var(--color-text-default);
font-style: normal; font-style: normal;
.app-header__logo-container { .app-header__logo-container {

18
ui/pages/first-time-flow/index.scss
View File

@ -7,7 +7,7 @@
.first-time-flow { .first-time-flow {
width: 100%; width: 100%;
background-color: var(--white); background-color: var(--color-background-default);
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -43,7 +43,7 @@
@include H1; @include H1;
margin-bottom: 24px; margin-bottom: 24px;
color: black; color: var(--color-text-default);
} }
&__input { &__input {
@ -52,7 +52,7 @@
&__text-block { &__text-block {
margin-bottom: 24px; margin-bottom: 24px;
color: black; color: var(--color-text-default);
@media screen and (max-width: $break-small) { @media screen and (max-width: $break-small) {
@include H6; @include H6;
@ -74,8 +74,8 @@
} }
&__checkbox { &__checkbox {
background: #fff; background: var(--color-background-default);
border: 1px solid #cdcdcd; border: 1px solid var(--color-border-muted);
box-sizing: border-box; box-sizing: border-box;
height: 34px; height: 34px;
width: 34px; width: 34px;
@ -84,23 +84,23 @@
align-items: center; align-items: center;
&:hover { &:hover {
border: 1.5px solid #2f9ae0; border: 1.5px solid var(--color-primary-alternative);
} }
.fa-check { .fa-check {
color: #2f9ae0; color: var(--color-primary-default);
} }
} }
&__checkbox-label { &__checkbox-label {
@include H4; @include H4;
color: #939090; color: var(--color-text-alternative);
margin-left: 18px; margin-left: 18px;
} }
&__link-text { &__link-text {
color: var(--primary-blue); color: var(--color-primary-default);
} }
} }

12
ui/pages/first-time-flow/metametrics-opt-in/index.scss
View File

@ -3,7 +3,7 @@
width: 100%; width: 100%;
a { a {
color: #2f9ae0bf; color: var(--color-primary-default);
} }
&__main { &__main {
@ -11,7 +11,7 @@
flex-direction: column; flex-direction: column;
margin-left: 26.26%; margin-left: 26.26%;
margin-right: 28%; margin-right: 28%;
color: black; color: var(--color-text-default);
@media screen and (max-width: $break-small) { @media screen and (max-width: $break-small) {
justify-content: center; justify-content: center;
@ -35,7 +35,7 @@
margin-top: 25px; margin-top: 25px;
.fa-bar-chart { .fa-bar-chart {
color: #c4c4c4; color: var(--color-icon-default);
} }
} }
@ -61,12 +61,12 @@
.fa-check { .fa-check {
margin-right: 12px; margin-right: 12px;
color: #1acc56; color: var(--color-success-default);
} }
.fa-times { .fa-times {
margin-right: 12px; margin-right: 12px;
color: #d0021b; color: var(--color-error-default);
} }
} }
@ -93,7 +93,7 @@
&__bottom-text { &__bottom-text {
margin-top: 10px; margin-top: 10px;
color: #9a9a9a; color: var(--color-text-alternative);
} }
&__content { &__content {

6
ui/pages/first-time-flow/seed-phrase/confirm-seed-phrase/index.scss
View File

@ -26,7 +26,7 @@
} }
&--selected { &--selected {
color: var(--white); color: var(--color-overlay-inverse);
} }
&--dragging { &--dragging {
@ -71,9 +71,9 @@
flex-flow: row wrap; flex-flow: row wrap;
min-height: 161px; min-height: 161px;
max-width: $break-small; max-width: $break-small;
border: 1px solid #cdcdcd; border: 1px solid var(--color-border-muted);
border-radius: 6px; border-radius: 6px;
background-color: var(--white); background-color: var(--color-background-default);
margin: 24px 0 36px; margin: 24px 0 36px;
padding: 12px; padding: 12px;

2
ui/pages/first-time-flow/seed-phrase/index.scss
View File

@ -33,7 +33,7 @@
} }
.first-time-flow__text-block { .first-time-flow__text-block {
color: #5a5a5a; color: var(--color-text-default);
} }
} }
} }

6
ui/pages/first-time-flow/seed-phrase/reveal-seed-phrase/index.scss
View File

@ -11,9 +11,9 @@
position: relative; position: relative;
display: flex; display: flex;
justify-content: center; justify-content: center;
border: 1px solid #cdcdcd; border: 1px solid var(--color-border-default);
border-radius: 6px; border-radius: 6px;
background-color: var(--white); background-color: var(--color-background-default);
padding: 18px; padding: 18px;
margin-top: 36px; margin-top: 36px;
max-width: 350px; max-width: 350px;
@ -36,7 +36,7 @@
bottom: 0; bottom: 0;
height: 100%; height: 100%;
width: 100%; width: 100%;
background-color: rgba(0, 0, 0, 0.6); background-color: var(--color-overlay-default);
display: flex; display: flex;
flex-flow: column nowrap; flex-flow: column nowrap;
align-items: center; align-items: center;

10
ui/pages/first-time-flow/select-action/index.scss
View File

@ -15,7 +15,7 @@
text-align: center; text-align: center;
margin-top: 65px; margin-top: 65px;
color: black; color: var(--color-text-default);
} }
&__select-buttons { &__select-buttons {
@ -32,7 +32,7 @@
justify-content: space-evenly; justify-content: space-evenly;
width: 388px; width: 388px;
height: 278px; height: 278px;
border: 1px solid #d8d8d8; border: 1px solid var(--color-border-muted);
box-sizing: border-box; box-sizing: border-box;
border-radius: 10px; border-radius: 10px;
padding: 8px; padding: 8px;
@ -44,7 +44,7 @@
} }
&__button-symbol { &__button-symbol {
color: #c4c4c4; color: var(--color-icon-default);
margin-top: 41px; margin-top: 41px;
} }
@ -59,7 +59,7 @@
&__button-text-big { &__button-text-big {
@include H4; @include H4;
color: #000; color: var(--color-text-default);
margin-top: 12px; margin-top: 12px;
text-align: center; text-align: center;
} }
@ -67,7 +67,7 @@
&__button-text-small { &__button-text-small {
@include H6; @include H6;
color: #7a7a7b; color: var(--color-text-alternative);
margin-top: 10px; margin-top: 10px;
text-align: center; text-align: center;
} }

4
ui/pages/first-time-flow/welcome/index.scss
View File

@ -5,7 +5,7 @@
align-items: center; align-items: center;
max-width: 442px; max-width: 442px;
padding: 0 18px; padding: 0 18px;
color: black; color: var(--color-text-default);
&__wrapper { &__wrapper {
display: flex; display: flex;
@ -35,7 +35,7 @@
} }
a { a {
color: var(--primary-1); color: var(--color-primary-default);
} }
@media screen and (max-width: $break-small) { @media screen and (max-width: $break-small) {

10
ui/pages/onboarding-flow/create-password/index.scss
View File

@ -1,14 +1,14 @@
.create-password { .create-password {
&__weak { &__weak {
color: var(--error-1); color: var(--color-error-default);
} }
&__average { &__average {
color: var(--secondary-3);; color: var(--color-warning-alternative);
} }
&__strong { &__strong {
color: var(--success-3); color: var(--color-success-alternative);
} }
&__wrapper { &__wrapper {
@ -21,7 +21,7 @@
} }
&__link-text { &__link-text {
color: var(--primary-1); color: var(--color-primary-default);
} }
&__form { &__form {
@ -37,7 +37,7 @@
&--checkmark { &--checkmark {
i { i {
color: var(--success-1); color: var(--color-success-default);
} }
} }

12
ui/pages/onboarding-flow/import-srp/index.scss
View File

@ -10,11 +10,11 @@
max-width: 500px; max-width: 500px;
a { a {
color: var(--Blue-500); color: var(--color-primary-default);
&:hover { &:hover {
cursor: pointer; cursor: pointer;
color: var(--Blue-300); color: var(--color-primary-default);
} }
} }
} }
@ -45,9 +45,9 @@
&__textarea { &__textarea {
@include Paragraph; @include Paragraph;
border: 1px solid #cdcdcd; border: 1px solid var(--color-border-muted);
border-radius: 10px; border-radius: 10px;
background-color: #fff; background-color: var(--color-background-default);
padding: 12px 24px 12px 12px; padding: 12px 24px 12px 12px;
resize: none; resize: none;
width: 100%; width: 100%;
@ -59,13 +59,13 @@
} }
&--error { &--error {
border: 1px solid var(--error-1); border: 1px solid var(--color-error-default);
} }
&__error-message { &__error-message {
@include H7; @include H7;
color: var(--error-1); color: var(--color-error-default);
} }
} }

4
ui/pages/onboarding-flow/index.scss
View File

@ -11,7 +11,7 @@
.onboarding-flow { .onboarding-flow {
width: 100%; width: 100%;
background-color: var(--white); background-color: var(--color-background-default);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
@ -20,7 +20,7 @@
&__wrapper { &__wrapper {
margin-top: 40px; margin-top: 40px;
padding: 32px; padding: 32px;
border: 1px solid var(--Grey-100); border: 1px solid var(--color-border-muted);
border-radius: 20px; border-radius: 20px;
} }

2
ui/pages/onboarding-flow/onboarding-app-header/index.scss
View File

@ -1,6 +1,6 @@
.onboarding-app-header { .onboarding-app-header {
align-items: center; align-items: center;
background: var(--white); background: var(--color-background-default);
position: relative; position: relative;
z-index: $header-z-index; z-index: $header-z-index;
display: flex; display: flex;

4
ui/pages/onboarding-flow/pin-extension/index.scss
View File

@ -2,11 +2,11 @@
max-width: 800px; max-width: 800px;
.control-dots .dot { .control-dots .dot {
background: var(--ui-2); background: var(--color-icon-muted);
box-shadow: none; box-shadow: none;
&.selected { &.selected {
background: var(--ui-4); background: var(--color-icon-default);
} }
} }

10
ui/pages/onboarding-flow/recovery-phrase/index.scss
View File

@ -32,14 +32,14 @@
bottom: 0; bottom: 0;
height: 100%; height: 100%;
width: 100%; width: 100%;
background-color: rgba(0, 0, 0, 0.6); background-color: var(--color-overlay-alternative);
display: flex; display: flex;
flex-flow: column nowrap; flex-flow: column nowrap;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 8px 0 18px; padding: 8px 0 18px;
border-radius: 4px; border-radius: 4px;
color: var(--ui-white); color: var(--color-overlay-inverse);
&--text { &--text {
margin-top: 32px; margin-top: 32px;
@ -86,7 +86,7 @@
background-color: transparent; background-color: transparent;
border: none; border: none;
width: 32%; width: 32%;
color: var(--primary-blue); color: var(--color-primary-default);
cursor: pointer; cursor: pointer;
margin-bottom: 24px; margin-bottom: 24px;
padding-left: 0; padding-left: 0;
@ -105,7 +105,7 @@
} }
&:active { &:active {
color: var(--ui-black); color: var(--color-text-default);
background-color: transparent; background-color: transparent;
border: none; border: none;
transform: scale(0.97); transform: scale(0.97);
@ -122,7 +122,7 @@
&--with-input { &--with-input {
width: 120px; width: 120px;
box-shadow: 0 3px 4px -3px var(--Grey-800); box-shadow: 0 3px 4px -3px rgba(0, 0, 0, 0.15);
border-width: 2px; border-width: 2px;
border-radius: 13px; border-radius: 13px;
height: 32px; height: 32px;

2
ui/pages/onboarding-flow/secure-your-wallet/index.scss
View File

@ -26,7 +26,7 @@
} }
&__highlighted { &__highlighted {
background-color: var(--primary-2); background-color: var(--color-primary-muted);
padding: 12px; padding: 12px;
border-radius: 10px; border-radius: 10px;
} }

9
ui/pages/onboarding-flow/welcome/index.scss
View File

@ -4,25 +4,26 @@
width: 600px; width: 600px;
.control-dots .dot { .control-dots .dot {
background: var(--ui-2); background: var(--color-icon-muted);
box-shadow: none; box-shadow: none;
&.selected { &.selected {
background: var(--ui-4); background: var(--color-icon-default);
} }
} }
/* next and previous arrow colors */ /* next and previous arrow colors */
.carousel.carousel-slider .control-arrow { .carousel.carousel-slider .control-arrow {
opacity: 1; opacity: 1;
color: var(--color-icon-default);
} }
.carousel .control-next.control-arrow::before { .carousel .control-next.control-arrow::before {
border-left-color: var(--ui-3); border-left-color: var(--color-icon-default);
} }
.carousel .control-prev.control-arrow::before { .carousel .control-prev.control-arrow::before {
border-right-color: var(--ui-3); border-right-color: var(--color-icon-default);
} }
.carousel.carousel-slider .control-arrow:hover { .carousel.carousel-slider .control-arrow:hover {