Add styles for error modal

This commit is contained in:
Alex Liebowitz 2016-10-22 04:31:48 -04:00 committed by Alex Work
parent c36711c380
commit 6e5684c18b
2 changed files with 20 additions and 2 deletions

View file

@ -112,7 +112,7 @@ var App = React.createClass({
this.setState({ this.setState({
modal: 'error', modal: 'error',
errorInfo: <ul>{errorInfoList}</ul>, errorInfo: <ul className="modal__error-list">{errorInfoList}</ul>,
}); });
}, },
getHeaderLinks: function() getHeaderLinks: function()
@ -204,7 +204,7 @@ var App = React.createClass({
: null} : null}
</Modal> </Modal>
<Modal isOpen={this.state.modal == 'error'}> <Modal isOpen={this.state.modal == 'error'} className='error-modal'>
<h3>Error</h3> <h3>Error</h3>
<p>Sorry, but LBRY has encountered an error! Please <Link href="/?report" label="report a bug" /> and include the details below.</p> <p>Sorry, but LBRY has encountered an error! Please <Link href="/?report" label="report a bug" /> and include the details below.</p>
{this.state.errorInfo} {this.state.errorInfo}

View file

@ -78,6 +78,11 @@ label {
display: block; display: block;
} }
code {
font: 0.8em Consolas, 'Lucida Console', 'Source Sans', monospace;
background-color: #eee;
}
p p
{ {
margin-bottom: 0.8em; margin-bottom: 0.8em;
@ -229,6 +234,7 @@ input[type="text"], input[type="search"]
} }
} }
.modal-overlay { .modal-overlay {
position: fixed; position: fixed;
display: flex; display: flex;
@ -268,3 +274,15 @@ input[type="text"], input[type="search"]
.modal__button { .modal__button {
margin: 0px 6px; margin: 0px 6px;
} }
.modal__error-list {
border: 1px solid #eee;
padding: 8px;
list-style: none;
}
.error-modal {
max-width: none;
width: 400px;
}