Add styles for error modal
This commit is contained in:
parent
c36711c380
commit
6e5684c18b
2 changed files with 20 additions and 2 deletions
|
@ -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}
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in a new issue