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

More error modal appearance tweaks

Browse source 
- Change warning icon to PNG with different color scheme
 - Use alt style button
 - Darken backdrop
 - Add spacing under header
 - Reduce margins on all modals
This commit is contained in:
Alex Liebowitz 2016-10-26 02:57:20 -04:00 committed by Alex Work
parent 46cf8915f9
commit f346739bfb
3 changed files with 20 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
dist/img/warning.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.6 KiB

17
js/app.js
View file

@ -112,7 +112,7 @@ var App = React.createClass({
this.setState({
modal: 'error',
errorInfo: <ul className="modal__error-list">{errorInfoList}</ul>,
errorInfo: <ul className="error-modal__error-list">{errorInfoList}</ul>,
});
},
getHeaderLinks: function()
@ -204,14 +204,17 @@ var App = React.createClass({
: null}
</Modal>
<Modal isOpen={this.state.modal == 'error'} type='custom' className='error-modal' overlayClassName='error-modal-overlay'>
<h3>Error</h3>
<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>
<Modal isOpen={this.state.modal == 'error'} type="custom" className="error-modal" overlayClassName="error-modal-overlay" >
<h3 className="modal__header">Error</h3>
<div className="error-modal__content">
<div><img className="error-modal__warning-symbol" src={lbry.imagePath('warning.png')} /></div>
<p>We're sorry that 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} />
<div className="modal__buttons">
<Link button="alt" label="OK" className="modal__button" onClick={this.closeModal} />
</div>
</Modal>
</div>
);

18
scss/_gui.scss
View file

@ -260,10 +260,14 @@ input[type="text"], input[type="search"]
overflow: auto;
border-radius: 4px;
outline: none;
padding: 40px;
padding: 36px;
max-width: 250px;
}
.modal__header {
margin-bottom: 5px;
}
.modal__buttons {
display: flex;
flex-direction: row;
@ -275,15 +279,14 @@ input[type="text"], input[type="search"]
margin: 0px 6px;
}
.modal__error-list {
.error-modal__error-list {
border: 1px solid #eee;
padding: 8px;
list-style: none;
}
.error-modal-overlay {
background: rgba(#000, .85);
background: rgba(#000, .88);
}
.error-modal {
@ -291,13 +294,12 @@ input[type="text"], input[type="search"]
width: 400px;
}
.error-modal__layout {
.error-modal__content {
display: flex;
padding: 0px 8px 10px 10px;
}
.error-modal .icon-warning {
font-size: 48px;
color: $color-money;
.error-modal__warning-symbol {
margin-top: 6px;
margin-right: 7px;
}