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: Modals (#14030)

Browse Source
This commit is contained in:
David Walsh 2022-03-21 08:39:28 -05:00 committed by GitHub
parent fc2e104ec6
commit dd0d844e8e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 12 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
ui/components/app/modal/index.scss
View File

@ -3,7 +3,7 @@
.modal-container { .modal-container {
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: #fff; background-color: var(--color-background-default);
display: flex; display: flex;
flex-flow: column; flex-flow: column;
border-radius: 8px; border-radius: 8px;
@ -28,14 +28,14 @@
display: flex; display: flex;
padding: 12px; padding: 12px;
justify-content: center; justify-content: center;
border-bottom: 1px solid #d2d8dd; border-bottom: 1px solid var(--color-border-muted);
flex: 0 0 auto; flex: 0 0 auto;
} }
&__header-close::after { &__header-close::after {
content: '\00D7'; content: '\00D7';
font-size: 40px; font-size: 40px;
color: var(--dusty-gray); color: var(--color-icon-default);
position: absolute; position: absolute;
top: -5px; top: -5px;
right: 10px; right: 10px;
@ -46,7 +46,7 @@
display: flex; display: flex;
flex-flow: row; flex-flow: row;
justify-content: center; justify-content: center;
border-top: 1px solid #d2d8dd; border-top: 1px solid var(--color-border-muted);
padding: 16px; padding: 16px;
flex: 0 0 auto; flex: 0 0 auto;

4
ui/components/app/modals/index.scss
View File

@ -23,7 +23,7 @@
&__content { &__content {
margin: 0; margin: 0;
background-color: white; background-color: var(--color-background-default);
animation-fill-mode: forwards; animation-fill-mode: forwards;
} }
@ -34,7 +34,7 @@
bottom: 0; bottom: 0;
left: 0; left: 0;
z-index: 1040; z-index: 1040;
background-color: #373a47; background-color: var(--color-overlay-alterantive);
animation-fill-mode: forwards; animation-fill-mode: forwards;
animation-duration: 0.3s; animation-duration: 0.3s;
} }

4
ui/components/app/modals/modal.js
View File

@ -33,9 +33,9 @@ import ConvertTokenToNftModal from './convert-token-to-nft-modal/convert-token-t
const modalContainerBaseStyle = { const modalContainerBaseStyle = {
transform: 'translate3d(-50%, 0, 0px)', transform: 'translate3d(-50%, 0, 0px)',
border: '1px solid #CCCFD1', border: '1px solid var(--color-border-default)',
borderRadius: '8px', borderRadius: '8px',
backgroundColor: '#FFFFFF', backgroundColor: 'var(--color-background-default)',
boxShadow: '0 2px 22px 0 rgba(0,0,0,0.2)', boxShadow: '0 2px 22px 0 rgba(0,0,0,0.2)',
}; };

8
ui/components/app/modals/qr-scanner/index.scss
View File

@ -1,7 +1,7 @@
.qr-scanner { .qr-scanner {
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: #fff; background-color: var(--color-background-default);
display: flex; display: flex;
flex-flow: column; flex-flow: column;
border-radius: 8px; border-radius: 8px;
@ -67,16 +67,16 @@
button:last-of-type { button:last-of-type {
margin-right: 0; margin-right: 0;
background-color: #009eec; background-color: var(--color-primary-default);
border: none; border: none;
color: #fff; color: var(--color-primary-inverse);
} }
} }
&__close::after { &__close::after {
content: '\00D7'; content: '\00D7';
font-size: 35px; font-size: 35px;
color: #9b9b9b; color: var(--color-icon-default);
position: absolute; position: absolute;
top: 4px; top: 4px;
right: 20px; right: 20px;