webui: Update modal box styles

2 files changed, 43 insertions, 28 deletions

diff --git a/fg21sim/webui/static/css/main.css b/fg21sim/webui/static/css/main.css
index aecb48d..1c81268 100644
--- a/fg21sim/webui/static/css/main.css
+++ b/fg21sim/webui/static/css/main.css
@@ -439,27 +439,17 @@ button,
 
 
 /**
- * Logging messages styles
+ * Modal box styles
  */
-p.log {
-    font-size: 1.3rem;
-    margin-bottom: 0;
-}
-p.log span {
-    margin-right: 0.8rem;
-}
-p.log.log-debug {
-    color: inherit;
-}
-p.log.log-info {
-    color: #398439;
-}
-p.log.log-warning {
-    color: #d58512;
+.modal .icon {
+    font-size: 200%;
+    vertical-align: middle;
+    margin-right: 0.5rem;
 }
-p.log.log-error,
-p.log.log-critical {
-    color: #ac2925;
+.modal .title {
+    font-size: 120%;
+    font-weight: bold;
+    vertical-align: middle;
 }
 
 
@@ -492,6 +482,31 @@ hr.hr-dotted {
 
 
 /**
+ * Logging messages styles
+ */
+p.log {
+    font-size: 1.3rem;
+    margin-bottom: 0;
+}
+p.log span {
+    margin-right: 0.8rem;
+}
+p.log.log-debug {
+    color: inherit;
+}
+p.log.log-info {
+    color: #398439;
+}
+p.log.log-warning {
+    color: #d58512;
+}
+p.log.log-error,
+p.log.log-critical {
+    color: #ac2925;
+}
+
+
+/**
  * "products" page specific styles
  */
 td.product > .hpx.hpx-convert {
diff --git a/fg21sim/webui/static/js/main.js b/fg21sim/webui/static/js/main.js
index f0755c2..e6e68c4 100644
--- a/fg21sim/webui/static/js/main.js
+++ b/fg21sim/webui/static/js/main.js
@@ -187,7 +187,7 @@ var showModal = function (modalBox, data) {
   modalBox.html("");
   var p = $("<p>");
   if (data.icon) {
-    $("<span>").addClass("icon fa fa-2x")
+    $("<span>").addClass("icon fa")
       .addClass("fa-" + data.icon).appendTo(p);
   }
   if (data.title) {
@@ -204,16 +204,16 @@ var showModal = function (modalBox, data) {
     }
   }
   if (data.code) {
-    modalBox.append($("<p>Error Code: </p>")
-                    .append($("<span>")
-                            .addClass("label label-warning")
-                            .text(data.code)));
+    modalBox.append($("<p>")
+                    .append($("<span>").text("Code:")
+                            .addClass("label label-warning"))
+                    .append($("<span>").text(data.code)));
   }
   if (data.reason) {
-    modalBox.append($("<p>Reason: </p>")
-                    .append($("<span>")
-                            .addClass("label label-warning")
-                            .text(data.reason)));
+    modalBox.append($("<p>")
+                    .append($("<span>").text("Reason:")
+                            .addClass("label label-warning"))
+                    .append($("<span>").text(data.reason)));
   }
   if (data.buttons) {
     p = $("<p>").addClass("button-group");