m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

colocate notification-modal styles (#9147)

Browse Source 
Follows former examples of colocating styles with the modals that use them.
This commit is contained in:
Brad Decker 2020-08-07 10:25:00 -05:00 committed by GitHub
parent d0366ad8f2
commit 85e658993b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 59 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,6 @@
@import 'cancel-transaction/index'; @import 'cancel-transaction/index';
@import 'confirm-remove-account/index'; @import 'confirm-remove-account/index';
@import 'notification-modal/index';
@import 'qr-scanner/index'; @import 'qr-scanner/index';
@import 'transaction-confirmed/index'; @import 'transaction-confirmed/index';
@import 'metametrics-opt-in-modal/index'; @import 'metametrics-opt-in-modal/index';

1
ui/app/components/app/modals/notification-modal/index.js Normal file
View File

@ -0,0 +1 @@
export { default } from './notification-modal'

56
ui/app/components/app/modals/notification-modal/index.scss Normal file
View File

@ -0,0 +1,56 @@
.notification-modal {
&__wrapper {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
position: relative;
border: 1px solid $alto;
box-shadow: 0 0 2px 2px $alto;
}
&__header {
background: $wild-sand;
width: 100%;
display: flex;
justify-content: center;
padding: 30px;
font-size: 22px;
color: $nile-blue;
}
&__message {
padding: 20px;
width: 100%;
display: flex;
justify-content: center;
font-size: 17px;
color: $nile-blue;
}
&__buttons {
display: flex;
justify-content: space-evenly;
width: 100%;
margin-bottom: 24px;
padding: 0 42px;
&__btn {
cursor: pointer;
}
}
&__link {
color: $primary-blue;
}
.modal-close-x::after {
content: '\00D7';
font-size: 2em;
color: $dusty-gray;
position: absolute;
top: 25px;
right: 17.5px;
cursor: pointer;
}
}

2
ui/app/components/app/modals/notification-modal.js → ui/app/components/app/modals/notification-modal/notification-modal.js
View File

@ -1,7 +1,7 @@
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import React, { Component } from 'react' import React, { Component } from 'react'
import { connect } from 'react-redux' import { connect } from 'react-redux'
import { hideModal } from '../../../store/actions' import { hideModal } from '../../../../store/actions'
class NotificationModal extends Component { class NotificationModal extends Component {
static contextProps = { static contextProps = {

94
ui/app/css/itcss/components/modal.scss
View File

@ -212,16 +212,6 @@
padding: 9px 13px 8px; padding: 9px 13px 8px;
} }
.modal-close-x::after {
content: '\00D7';
font-size: 2em;
color: $dusty-gray;
position: absolute;
top: 25px;
right: 17.5px;
cursor: pointer;
}
// Hide token confirmation // Hide token confirmation
.hide-token-confirmation { .hide-token-confirmation {
@ -286,55 +276,6 @@
} }
} }
//Notification Modal
.notification-modal {
&__wrapper {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
position: relative;
border: 1px solid $alto;
box-shadow: 0 0 2px 2px $alto;
}
&__header {
background: $wild-sand;
width: 100%;
display: flex;
justify-content: center;
padding: 30px;
font-size: 22px;
color: $nile-blue;
}
&__message {
padding: 20px;
width: 100%;
display: flex;
justify-content: center;
font-size: 17px;
color: $nile-blue;
}
&__buttons {
display: flex;
justify-content: space-evenly;
width: 100%;
margin-bottom: 24px;
padding: 0 42px;
&__btn {
cursor: pointer;
}
}
&__link {
color: $primary-blue;
}
}
// Deposit Ether Modal // Deposit Ether Modal
.deposit-ether-modal { .deposit-ether-modal {
border-radius: 8px; border-radius: 8px;
@ -498,38 +439,3 @@
text-align: center; text-align: center;
} }
} }
//Notification Modal
.notification-modal-wrapper {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
position: relative;
border: 1px solid $alto;
box-shadow: 0 0 2px 2px $alto;
}
.notification-modal-header {
background: $wild-sand;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
padding: 30px;
font-size: 22px;
color: $nile-blue;
}
.notification-modal-message {
padding: 20px;
}
.notification-modal-message {
width: 100%;
display: flex;
justify-content: center;
font-size: 17px;
color: $nile-blue;
}