From f346739bfbf8578b481a2fefc985c7e80853664a Mon Sep 17 00:00:00 2001
From: Alex Liebowitz <alex@alexliebowitz.com>
Date: Wed, 26 Oct 2016 02:57:20 -0400
Subject: [PATCH] More error modal appearance tweaks

 - Change warning icon to PNG with different color scheme
 - Use alt style button
 - Darken backdrop
 - Add spacing under header
 - Reduce margins on all modals
---
 dist/img/warning.png | Bin 0 -> 1640 bytes
 js/app.js            |  17 ++++++++++-------
 scss/_gui.scss       |  18 ++++++++++--------
 3 files changed, 20 insertions(+), 15 deletions(-)
 create mode 100644 dist/img/warning.png

diff --git a/dist/img/warning.png b/dist/img/warning.png
new file mode 100644
index 0000000000000000000000000000000000000000..c15cc246ad790de253271dcb6d29ab7a3eaa9454
GIT binary patch
literal 1640
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
Z=k&84TBLIhLnZ1z!N<cNU*i^?{x>I|;mrU5

literal 0
HcmV?d00001

diff --git a/js/app.js b/js/app.js
index 6d2a3b17c..f4fc8adad 100644
--- a/js/app.js
+++ b/js/app.js
@@ -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>
     );
diff --git a/scss/_gui.scss b/scss/_gui.scss
index 54f354375..184bf68b5 100644
--- a/scss/_gui.scss
+++ b/scss/_gui.scss
@@ -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;
 }
\ No newline at end of file