mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
Dark Mode: Remove white, black and gray color tokens (#14186)
* remove white, black and gray color tokens * Update ui/pages/first-time-flow/seed-phrase/reveal-seed-phrase/reveal-seed-phrase.component.js Co-authored-by: George Marshall <george.marshall@consensys.net> * Add RevealSeedPhrase story Co-authored-by: George Marshall <george.marshall@consensys.net>
This commit is contained in:
parent
edb5ecc38c
commit
974491a3cf
@ -1,5 +1,5 @@
|
||||
.snap-remove-warning {
|
||||
color: var(--black);
|
||||
color: var(--color-text-default);
|
||||
|
||||
&__footer-button {
|
||||
height: 40px;
|
||||
|
@ -49,7 +49,7 @@ $sizes: (
|
||||
background-color: var($color);
|
||||
}
|
||||
& #{$self}__icon {
|
||||
color: var(--black);
|
||||
color: var(--color-icon-default);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -3,7 +3,7 @@
|
||||
height: 24px;
|
||||
background-position: center;
|
||||
border-radius: 50%;
|
||||
background-color: var(--white);
|
||||
background-color: var(--color-background-default);
|
||||
box-shadow: 0 2px 4px 0 rgba($black, 0.24);
|
||||
flex: 0 0 auto;
|
||||
-moz-animation: fadein 1s;
|
||||
|
@ -21,10 +21,6 @@
|
||||
|
||||
/* Deprecated colors */
|
||||
:root {
|
||||
--white: #fff;
|
||||
--black: #000;
|
||||
--gray: #808080;
|
||||
|
||||
/*
|
||||
Colors
|
||||
http://chir.ag/projects/name-that-color
|
||||
|
@ -48,7 +48,7 @@
|
||||
&__reveal-button {
|
||||
@include H7;
|
||||
|
||||
color: var(--white);
|
||||
color: var(--color-overlay-inverse);
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
margin-top: 8px;
|
||||
|
@ -112,7 +112,11 @@ export default class RevealSeedPhrase extends PureComponent {
|
||||
this.setState({ isShowingSeedPhrase: true });
|
||||
}}
|
||||
>
|
||||
<LockIcon width="28px" height="35px" fill="#FFFFFF" />
|
||||
<LockIcon
|
||||
width="28px"
|
||||
height="35px"
|
||||
fill="var(--color-overlay-inverse)"
|
||||
/>
|
||||
<div className="reveal-seed-phrase__reveal-button">
|
||||
{t('clickToRevealSeed')}
|
||||
</div>
|
||||
|
@ -0,0 +1,11 @@
|
||||
import React from 'react';
|
||||
import RevealSeedPhrase from '.';
|
||||
|
||||
export default {
|
||||
title: 'Components/Pages/FirstTimeFlow/RevealSeedPhrase',
|
||||
id: __filename,
|
||||
};
|
||||
|
||||
export const DefaultStory = () => <RevealSeedPhrase />;
|
||||
|
||||
DefaultStory.storyName = 'Default';
|
@ -61,7 +61,7 @@
|
||||
@include Paragraph;
|
||||
|
||||
margin-bottom: 18px;
|
||||
color: var(--black);
|
||||
color: var(--color-text-default);
|
||||
position: absolute;
|
||||
top: -25px;
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user