From fa5a1a86185906e26df86c1e6615ab1cf3aab83d Mon Sep 17 00:00:00 2001
From: Michael Q Larson <michaelqlarson@gmail.com>
Date: Sun, 25 Jan 2015 10:35:41 -0800
Subject: [PATCH] make test results look better

---
 public/css/main.less                      | 22 +++++++++++++++++++++-
 public/js/lib/bonfire/bonfireFramework.js | 14 ++++----------
 2 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/public/css/main.less b/public/css/main.less
index bbf1a63c24..01adb80a6d 100644
--- a/public/css/main.less
+++ b/public/css/main.less
@@ -2,8 +2,9 @@
 @import "lib/bootstrap-social/bootstrap-social";
 @import "lib/ionicons/ionicons";
 @import "lib/animate.min.less";
+@import "lib/bootstrap/variables";
 
-@import url(http://fonts.googleapis.com/css?family=Lato:300);
+//fonts.googleapis.com/css?family=Lato:300);
 @import url(http://fonts.googleapis.com/css?family=Lato:400);
 @import url(http://fonts.googleapis.com/css?family=Inconsolata);
 
@@ -545,6 +546,21 @@ form.code span {
   height: auto;
 }
 
+.big-error-icon {
+  font-size: 32px;
+  color: @brand-danger;
+}
+
+.big-success-icon {
+  font-size: 32px;
+  color: @brand-primary;
+}
+
+.test-output {
+  font-size: 14px;
+  font-family: "Ubuntu Mono";
+}
+
 #mainEditorPanel .panel-body {
   padding-bottom: 0px;
 }
@@ -579,6 +595,10 @@ div.CodeMirror-scroll {
   margin-bottom: 5px;
 }
 
+.test-vertical-center {
+  margin: 8px;
+}
+
 //uncomment this to see the dimensions of all elements outlined in red
 //* {
 //  border-color: red;
diff --git a/public/js/lib/bonfire/bonfireFramework.js b/public/js/lib/bonfire/bonfireFramework.js
index 4f19af70e4..ea832a18d0 100644
--- a/public/js/lib/bonfire/bonfireFramework.js
+++ b/public/js/lib/bonfire/bonfireFramework.js
@@ -176,19 +176,13 @@ var createTestDisplay = function() {
     for (var i = 0; i < userTests.length;i++) {
         var test = userTests[i];
         var testDoc = document.createElement("li");
-        $(testDoc)
-            //.addClass('list-group-item')
-            //.addClass('well img-rounded')
-            //.addClass('well-sm')
         if (test.err != null) {
             $(testDoc)
-                .html(test.text + "\n" + test.err)
-                .css("text-color", 'rgba(255,0,0,.2)')
-                .prependTo($('#testSuite'));
+                .html("<i class='ion-close-circled big-error-icon col-xs-2'></i>" + test.text + "\n" + test.err).addClass('test-output col-xs-10')
+                .prependTo($('#testSuite'))
         } else {
             $(testDoc)
-                .html(test.text)
-                .css('text-color', 'rgba(0,255,0,.2)')
+                .html("<i class='ion-checkmark-circled big-success-icon col-xs-2'></i><div class='test-vertical-center'>" + test.text + "</div>").addClass('test-output col-xs-10')
                 .appendTo($('#testSuite'));
         }
     };
@@ -208,7 +202,7 @@ var runTests = function(err, data) {
     pushed = false;
     $('#testSuite').children().remove();
     if (err && userTests.length > 0) {
-        userTests= [{text:"Program Execution Failure", err: "NouserTestswere run."}];
+        userTests= [{text:"Program Execution Failure", err: "No user tests were run."}];
         createTestDisplay();
     } else if (userTests) {