LBRYFoundation/lbry-desktop
1
0
Fork 0
mirror of https://github.com/LBRYFoundation/lbry-desktop.git synced 2025-09-02 10:15:11 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

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

15
js/app.js
View file

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

18
scss/_gui.scss
View file

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