diff --git a/src/components/dialog/error-dialog.css b/src/components/dialog/error-dialog.css index bc4f8cccb70699dbcaf8573ebf0c1b6b76948de4..f375b00076b3628c076a8277c57a62c9cac15b47 100644 --- a/src/components/dialog/error-dialog.css +++ b/src/components/dialog/error-dialog.css @@ -6,10 +6,11 @@ z-index: 999; } -.modal-dialog { - position: absolute; - margin: 50px; - left: 50%; - -ms-transform: translateX(-50%); - transform: translateX(-50%); +.modal-header{ + background-color: rgb(241, 185, 185); + color: rgb(138, 41, 41); +} + +.details{ + clear: left; } \ No newline at end of file diff --git a/src/components/dialog/error-dialog.js b/src/components/dialog/error-dialog.js index 54c459295a3c426750a2a7c099ef80855da1bcba..7596e2bb19299486c76cd68d23862d46784edc33 100644 --- a/src/components/dialog/error-dialog.js +++ b/src/components/dialog/error-dialog.js @@ -49,14 +49,24 @@ class ErrorDialog extends React.Component{ <div> {error? <div className="modal-dialog-wrapper"> - <Modal.Dialog className="modal-dialog"> - <Modal.Header> + <Modal.Dialog> + <Modal.Header className="modal-header"> <h4>{error.type}</h4> </Modal.Header> <Modal.Body> <h5>Details</h5><pre>{error.message}</pre> + </Modal.Body> + <Modal.Footer> + <div> + <Button variant="warning" onClick={() => this.handleClose()}> + <span className="glyphicon glyphicon-remove"></span> Close + </Button> + <Button variant="light" onClick={() => this.sourceDisplay()}> + {this.state.isErrorSourceDisplayed ? 'Hide' : 'Show'} scary details <span></span> + </Button> + </div> {this.state.isErrorSourceDisplayed - ?<div> + ? <div className="details"> {!error.code && !error.data && !error.stack ? <h6>No scary details</h6> : null} @@ -72,16 +82,6 @@ class ErrorDialog extends React.Component{ </div> : null } - </Modal.Body> - <Modal.Footer> - <div> - <Button variant="outline-dark" onClick={() => this.handleClose()}> - <span className="glyphicon glyphicon-remove"></span> Close - </Button> - <Button variant="outline-dark" className="pull-right" onClick={() => this.sourceDisplay()}> - {this.state.isErrorSourceDisplayed ? 'Hide' : 'Show'} scary details <span className="caret"></span> - </Button> - </div> </Modal.Footer> </Modal.Dialog> </div>