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

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

@ -23,7 +23,7 @@
&__content {
margin: 0;
background-color: white;
background-color: var(--color-background-default);
animation-fill-mode: forwards;
}
@ -34,7 +34,7 @@
bottom: 0;
left: 0;
z-index: 1040;
background-color: #373a47;
background-color: var(--color-overlay-alterantive);
animation-fill-mode: forwards;
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 = {
transform: 'translate3d(-50%, 0, 0px)',
border: '1px solid #CCCFD1',
border: '1px solid var(--color-border-default)',
borderRadius: '8px',
backgroundColor: '#FFFFFF',
backgroundColor: 'var(--color-background-default)',
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 {
width: 100%;
height: 100%;
background-color: #fff;
background-color: var(--color-background-default);
display: flex;
flex-flow: column;
border-radius: 8px;
@ -67,16 +67,16 @@
button:last-of-type {
margin-right: 0;
background-color: #009eec;
background-color: var(--color-primary-default);
border: none;
color: #fff;
color: var(--color-primary-inverse);
}
}
&__close::after {
content: '\00D7';
font-size: 35px;
color: #9b9b9b;
color: var(--color-icon-default);
position: absolute;
top: 4px;
right: 20px;