Added icon to message dialog.

resources/report/css/style.css

@@ -161,7 +161,7 @@ section[data-active] {
     overflow:visible;
 }
 
-.buttons {
+section[data-active] .buttons {
     background: transparent;
     margin: 0;
     padding: 0;
@@ -171,10 +171,10 @@ section[data-active] {
     right: 0.5em;
     overflow:visible;
 }
-.buttons > li:not(:last-child) {
+section[data-active] .buttons > li:not(:last-child) {
     opacity: 0.5;
 }
-.buttons > li:hover {
+section[data-active] .buttons > li:hover {
     opacity: 1;
 }
 .pluginMenu {
@@ -331,14 +331,14 @@ ul {
     padding:0.5em 1em;
     list-style:disc inside;
 }
-.say, .error, .warn {
+li.say, li.error, li.warn {
     padding:0.5em 1em;
     list-style:disc inside;
 }
-.error{
+li.error{
     background:#ff9090;
 }
-.warn{
+li.warn{
     background:#FFDD55;
 }
 
@@ -369,4 +369,16 @@ ul {
 
 .message {
     width: 40em;
-}
+}
+.message span:first-child {
+    font-size: 4em;
+    position: absolute;
+    left: 1em;
+    top: 23px;
+}
+.message span.warn  {
+    color: gold;
+}
+.dialog .buttons {
+    text-align: center;
+}

resources/report/js/script.js

@@ -199,18 +199,20 @@ function showMessageDialog(title, text) {
 
     clone.id = 'modalDialog';
 
-    clone.children[0].textContent = title;
-    clone.children[1].textContent = text;
+    clone.children[0].className += ' warn';
+
+    clone.children[1].textContent = title;
+    clone.children[2].textContent = text;
 
     var overlay = document.getElementById('overlay');
     overlay.removeEventListener('click', hideDialog, false);
     showElement(overlay);
 
-    clone.children[2].setAttribute('data-dialog', clone.id);
-    clone.children[2].addEventListener('click', hideDialog, false);
+    clone.children[3].children[0].setAttribute('data-dialog', clone.id);
+    clone.children[3].children[0].addEventListener('click', hideDialog, false);
 
-    clone.children[3].setAttribute('data-dialog', clone.id);
-    clone.children[3].addEventListener('click', hideDialog, false);
+    clone.children[3].children[1].setAttribute('data-dialog', clone.id);
+    clone.children[3].children[1].addEventListener('click', hideDialog, false);
 }
 function showMessageBox(type, title, text) {
 

resources/report/report.html

@@ -48,10 +48,12 @@
     </template>
     <template id="messageDialog">
         <div class="message dialog">
-            <h1></h1>
+            <span class="fa fa-exclamation-circle"></span><h1></h1>
             <p></p>
-            <button>Yes</button>
-            <button>Cancel</button>
+            <div class="buttons">
+                <button>Yes</button>
+                <button>Cancel</button>
+            </div>
         </div>
     </template>
     <template id="editorPanel">