LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

Add warning icon and dark backdrop to error dialog

Browse source
This commit is contained in:
Alex Liebowitz 2016-10-24 23:52:36 -04:00 • committed by Alex Work
parent 7f961ccc63
commit edeaf4f7d0
2 changed files with 21 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
js/app.js
View file

@ -204,10 +204,14 @@ var App = React.createClass({
: null}
</Modal>
<Modal isOpen={this.state.modal == 'error'} className='error-modal' onConfirmed={this.closeModal}>
<Modal isOpen={this.state.modal == 'error'} type='custom' className='error-modal' overlayClassName='error-modal-overlay'>
<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>
<div className="error-modal__layout">
<Icon icon="icon-warning" className="error-modal__warning-icon" />
<p>Sorry, but LBRY has encountered an error! This has been reported and we will investigate the problem.</p>
</div>
{this.state.errorInfo}
<Link button="alt" label="OK" className="modal__button" onClick={this.closeModal} />
</Modal>
</div>
);

15
scss/_gui.scss
View file

@ -282,7 +282,22 @@ input[type="text"], input[type="search"]
list-style: none;
}
.error-modal-overlay {
background: rgba(#000, .85);
}
.error-modal {
max-width: none;
width: 400px;
}
.error-modal__layout {
display: flex;
padding: 0px 8px 10px 10px;
}
.error-modal .icon-warning {
font-size: 48px;
color: $color-money;
margin-right: 7px;
}