make gas edit tooltips use Tooltip (#9434)
Brad Decker
4 years ago
committed by
GitHub
parent
ee6e986f59
commit
37cbeb56a3
@ -1 +0,0 @@ |
||||
export { default } from './notification-modal' |
||||
@ -1,56 +0,0 @@ |
||||
.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; |
||||
} |
||||
} |
||||
@ -1,89 +0,0 @@ |
||||
import PropTypes from 'prop-types' |
||||
import React, { Component } from 'react' |
||||
import { connect } from 'react-redux' |
||||
import { hideModal } from '../../../../store/actions' |
||||
|
||||
class NotificationModal extends Component { |
||||
static contextProps = { |
||||
t: PropTypes.func.isRequired, |
||||
} |
||||
|
||||
render () { |
||||
const { |
||||
header, |
||||
message, |
||||
showCancelButton = false, |
||||
showConfirmButton = false, |
||||
// eslint-disable-next-line no-shadow
|
||||
hideModal, |
||||
onConfirm, |
||||
} = this.props |
||||
|
||||
const { t } = this.context |
||||
|
||||
const showButtons = showCancelButton || showConfirmButton |
||||
|
||||
return ( |
||||
<div> |
||||
<div className="notification-modal__wrapper"> |
||||
<div className="notification-modal__header"> |
||||
{this.context.t(header)} |
||||
</div> |
||||
<div className="notification-modal__message-wrapper"> |
||||
<div className="notification-modal__message"> |
||||
{this.context.t(message)} |
||||
</div> |
||||
</div> |
||||
<div className="modal-close-x" onClick={hideModal} /> |
||||
{showButtons && ( |
||||
<div className="notification-modal__buttons"> |
||||
{showCancelButton && ( |
||||
<div |
||||
className="btn-default notification-modal__buttons__btn" |
||||
onClick={hideModal} |
||||
> |
||||
{t('cancel')} |
||||
</div> |
||||
)} |
||||
{showConfirmButton && ( |
||||
<div |
||||
className="button btn-secondary notification-modal__buttons__btn" |
||||
onClick={() => { |
||||
onConfirm() |
||||
hideModal() |
||||
}} |
||||
> |
||||
{t('confirm')} |
||||
</div> |
||||
)} |
||||
</div> |
||||
)} |
||||
</div> |
||||
</div> |
||||
) |
||||
} |
||||
} |
||||
|
||||
NotificationModal.propTypes = { |
||||
hideModal: PropTypes.func, |
||||
header: PropTypes.string, |
||||
message: PropTypes.node, |
||||
showCancelButton: PropTypes.bool, |
||||
showConfirmButton: PropTypes.bool, |
||||
onConfirm: PropTypes.func, |
||||
} |
||||
|
||||
const mapDispatchToProps = (dispatch) => { |
||||
return { |
||||
hideModal: () => { |
||||
dispatch(hideModal()) |
||||
}, |
||||
} |
||||
} |
||||
|
||||
NotificationModal.contextTypes = { |
||||
t: PropTypes.func, |
||||
} |
||||
|
||||
export default connect(null, mapDispatchToProps)(NotificationModal) |
||||
|
||||
Loading…
Reference in new issue