m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-22 17:33:23 +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 {
color: var(--primary-1);
color: var(--color-primary-default);
}
&__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 Typography from '../../ui/typography';
import { COLORS } from '../../../helpers/constants/design-system';
import Textarea from '../../ui/textarea';
import { parseSecretRecoveryPhrase } from './parse-secret-recovery-phrase';
const { isValidMnemonic } = ethers.utils;
@ -50,7 +51,7 @@ export default function SrpInput({ onChange }) {
<Typography>{t('secretRecoveryPhrase')}</Typography>
</label>
{showSrp ? (
<textarea
<Textarea
id="import-srp__srp"
className="import-srp__srp-shown"
onChange={onSrpChange}

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

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

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

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

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

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

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

@ -7,7 +7,7 @@
.first-time-flow {
width: 100%;
background-color: var(--white);
background-color: var(--color-background-default);
display: flex;
justify-content: center;
@ -43,7 +43,7 @@
@include H1;
margin-bottom: 24px;
color: black;
color: var(--color-text-default);
}
&__input {
@ -52,7 +52,7 @@
&__text-block {
margin-bottom: 24px;
color: black;
color: var(--color-text-default);
@media screen and (max-width: $break-small) {
@include H6;
@ -74,8 +74,8 @@
}
&__checkbox {
background: #fff;
border: 1px solid #cdcdcd;
background: var(--color-background-default);
border: 1px solid var(--color-border-muted);
box-sizing: border-box;
height: 34px;
width: 34px;
@ -84,23 +84,23 @@
align-items: center;
&:hover {
border: 1.5px solid #2f9ae0;
border: 1.5px solid var(--color-primary-alternative);
}
.fa-check {
color: #2f9ae0;
color: var(--color-primary-default);
}
}
&__checkbox-label {
@include H4;
color: #939090;
color: var(--color-text-alternative);
margin-left: 18px;
}
&__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%;
a {
color: #2f9ae0bf;
color: var(--color-primary-default);
}
&__main {
@ -11,7 +11,7 @@
flex-direction: column;
margin-left: 26.26%;
margin-right: 28%;
color: black;
color: var(--color-text-default);
@media screen and (max-width: $break-small) {
justify-content: center;
@ -35,7 +35,7 @@
margin-top: 25px;
.fa-bar-chart {
color: #c4c4c4;
color: var(--color-icon-default);
}
}
@ -61,12 +61,12 @@
.fa-check {
margin-right: 12px;
color: #1acc56;
color: var(--color-success-default);
}
.fa-times {
margin-right: 12px;
color: #d0021b;
color: var(--color-error-default);
}
}
@ -93,7 +93,7 @@
&__bottom-text {
margin-top: 10px;
color: #9a9a9a;
color: var(--color-text-alternative);
}
&__content {

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

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

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

@ -33,7 +33,7 @@
}
.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;
display: flex;
justify-content: center;
border: 1px solid #cdcdcd;
border: 1px solid var(--color-border-default);
border-radius: 6px;
background-color: var(--white);
background-color: var(--color-background-default);
padding: 18px;
margin-top: 36px;
max-width: 350px;
@ -36,7 +36,7 @@
bottom: 0;
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, 0.6);
background-color: var(--color-overlay-default);
display: flex;
flex-flow: column nowrap;
align-items: center;

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

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

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

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

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

@ -1,14 +1,14 @@
.create-password {
&__weak {
color: var(--error-1);
color: var(--color-error-default);
}
&__average {
color: var(--secondary-3);;
color: var(--color-warning-alternative);
}
&__strong {
color: var(--success-3);
color: var(--color-success-alternative);
}
&__wrapper {
@ -21,7 +21,7 @@
}
&__link-text {
color: var(--primary-1);
color: var(--color-primary-default);
}
&__form {
@ -37,7 +37,7 @@
&--checkmark {
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;
a {
color: var(--Blue-500);
color: var(--color-primary-default);
&:hover {
cursor: pointer;
color: var(--Blue-300);
color: var(--color-primary-default);
}
}
}
@ -45,9 +45,9 @@
&__textarea {
@include Paragraph;
border: 1px solid #cdcdcd;
border: 1px solid var(--color-border-muted);
border-radius: 10px;
background-color: #fff;
background-color: var(--color-background-default);
padding: 12px 24px 12px 12px;
resize: none;
width: 100%;
@ -59,13 +59,13 @@
}
&--error {
border: 1px solid var(--error-1);
border: 1px solid var(--color-error-default);
}
&__error-message {
@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 {
width: 100%;
background-color: var(--white);
background-color: var(--color-background-default);
display: flex;
flex-direction: column;
justify-content: center;
@ -20,7 +20,7 @@
&__wrapper {
margin-top: 40px;
padding: 32px;
border: 1px solid var(--Grey-100);
border: 1px solid var(--color-border-muted);
border-radius: 20px;
}

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

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

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

@ -2,11 +2,11 @@
max-width: 800px;
.control-dots .dot {
background: var(--ui-2);
background: var(--color-icon-muted);
box-shadow: none;
&.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;
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, 0.6);
background-color: var(--color-overlay-alternative);
display: flex;
flex-flow: column nowrap;
align-items: center;
justify-content: center;
padding: 8px 0 18px;
border-radius: 4px;
color: var(--ui-white);
color: var(--color-overlay-inverse);
&--text {
margin-top: 32px;
@ -86,7 +86,7 @@
background-color: transparent;
border: none;
width: 32%;
color: var(--primary-blue);
color: var(--color-primary-default);
cursor: pointer;
margin-bottom: 24px;
padding-left: 0;
@ -105,7 +105,7 @@
}
&:active {
color: var(--ui-black);
color: var(--color-text-default);
background-color: transparent;
border: none;
transform: scale(0.97);
@ -122,7 +122,7 @@
&--with-input {
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-radius: 13px;
height: 32px;

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

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

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

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