fix alert styles

Author: ShMcK

lib/actions/test.js

@@ -18,7 +18,7 @@ function testResult(result) {
         var filter = getTestFilter(result);
         var alert = {
             message: result.msg,
-            action: 'note',
+            action: 'NOTE',
         };
         if (filter === 'PASS' || filter === 'FAIL') {
             dispatch(hint_1.hintPositionSet(0));
@@ -27,7 +27,7 @@ function testResult(result) {
                 duration: 1200,
             });
         }
-        else if (filter === 'FAIL' && progress.pages[pagePosition]) {
+        if (filter === 'FAIL' && progress.pages[pagePosition]) {
             dispatch(progress_1.completePage(false));
             alert = Object.assign({}, alert, {
                 action: filter,
@@ -43,7 +43,7 @@ function getTestFilter(result) {
     switch (true) {
         case result.pass && result.change > 0:
             return 'PASS';
-        case result.pass === false && result.change < 1:
+        case result.pass === false && result.change <= 0:
             return 'FAIL';
         default:
             return 'NOTE';

lib/reducers/alert/index.js

@@ -17,13 +17,11 @@ var colors = {
     NOTE: '#9DA5B4',
 };
 var current = _alert;
-function setAlert(options, color) {
-    if (color) {
-        var statusBarAlert = document.getElementsByClassName('cr-alert-replay')[0];
-        statusBarAlert.style.color = color;
-    }
-    current = Object.assign({}, open, options);
-    return current;
+function setAlert(a) {
+    var color = colors[a.action] || colors.NOTE;
+    var statusBarAlert = document.getElementsByClassName('cr-alert-replay')[0];
+    statusBarAlert.style.color = color;
+    return Object.assign({}, open, a);
 }
 function alertReducer(alert, action) {
     if (alert === void 0) { alert = _alert; }
@@ -35,7 +33,7 @@ function alertReducer(alert, action) {
             if (!a) {
                 return _alert;
             }
-            return setAlert(a, colors[a.action] || colors.NOTE);
+            return setAlert(a);
         default:
             return alert;
     }

src/actions/test.ts

@@ -20,15 +20,18 @@ export function testResult(result: Test.Result): ReduxThunk.ThunkInterface {
     const filter: string = getTestFilter(result);
     let alert: CR.Alert = {
       message: result.msg,
-      action: 'note',
+      action: 'NOTE',
     };
+    // passes or fails
     if (filter === 'PASS' || filter === 'FAIL') {
       dispatch(hintPositionSet(0));
       alert = Object.assign({}, alert, {
         action: filter,
         duration: 1200,
       });
-    } else if (filter === 'FAIL' && progress.pages[pagePosition]) {
+    }
+    // previously passed, but now fails
+    if (filter === 'FAIL' && progress.pages[pagePosition]) {
       dispatch(completePage(false));
       alert = Object.assign({}, alert, {
         action: filter,
@@ -44,7 +47,7 @@ function getTestFilter(result: Test.Result): string {
   switch (true) {
     case result.pass && result.change > 0:
       return 'PASS';
-    case result.pass === false && result.change < 1:
+    case result.pass === false && result.change <= 0:
       return 'FAIL';
     default:
       return 'NOTE';

src/components/Alert/_alert.less

@@ -1,11 +1,11 @@
 @import "ui-variables";
-.cr-alert.pass button span {
+.cr-alert.PASS button span {
   color: @background-color-success;
 }
-.cr-alert.fail button span {
+.cr-alert.FAIL button span {
   color: @background-color-error;
 }
-.cr-alert.note button span {
+.cr-alert.NOTE button span {
   color: @background-color-info;
 }
 .cr-alert-replay {

src/reducers/alert/index.ts

@@ -17,20 +17,19 @@ const open = {
 };
 
 const colors = {
-  PASS: '#73C990',
-  FAIL: '#FF4081',
-  NOTE: '#9DA5B4',
+  PASS: '#73C990', // green
+  FAIL: '#FF4081', // red
+  NOTE: '#9DA5B4', // blue
 };
 
 let current: CR.Alert = _alert;
 
-function setAlert(options: Object, color?: string) {
-  if (color) {
-    let statusBarAlert = <HTMLElement>document.getElementsByClassName('cr-alert-replay')[0];
-    statusBarAlert.style.color = color;
-  }
-  current = Object.assign({}, open, options);
-  return current;
+function setAlert(a: CR.Alert): CR.Alert {
+
+  const color = colors[a.action] || colors.NOTE;
+  let statusBarAlert = <HTMLElement>document.getElementsByClassName('cr-alert-replay')[0];
+  statusBarAlert.style.color = color;
+  return Object.assign({}, open, a);
 }
 
 export default function alertReducer(
@@ -48,8 +47,7 @@ export default function alertReducer(
         // close alert
         return _alert;
       }
-
-      return setAlert(a, colors[a.action] || colors.NOTE);
+      return setAlert(a);
 
     default:
       return alert;