PLT-2616 making dev mode javascript error red (#2787)

webapp/components/error_bar.jsx

@@ -67,8 +67,14 @@ export default class ErrorBar extends React.Component {
             return <div/>;
         }
 
+        var errClass = 'error-bar';
+
+        if (this.state.type && this.state.type === 'developer') {
+            errClass = 'error-bar-developer';
+        }
+
         return (
-            <div className='error-bar'>
+            <div className={errClass}>
                 <span>{this.state.message}</span>
                 <a
                     href='#'

webapp/root.jsx

@@ -88,7 +88,7 @@ function preRenderSetup(callwhendone) {
         });
 
         if (window.mm_config && window.mm_config.EnableDeveloper === 'true') {
-            window.ErrorStore.storeLastError({message: 'DEVELOPER MODE: A javascript error has occured.  Please use the javascript console to capture and report the error (row: ' + line + ' col: ' + column + ').'});
+            window.ErrorStore.storeLastError({type: 'developer', message: 'DEVELOPER MODE: A javascript error has occured.  Please use the javascript console to capture and report the error (row: ' + line + ' col: ' + column + ').'});
             window.ErrorStore.emitChange();
         }
     };

webapp/sass/components/_error-bar.scss

@@ -29,3 +29,33 @@
         }
     }
 }
+
+.error-bar-developer {
+    background-color: #B0171F;
+    color: white;
+    padding: 5px 30px;
+    position: absolute;
+    text-align: center;
+    top: 0;
+    width: 100%;
+    z-index: 9999;
+
+    a {
+        &.error-bar__close {
+            color: $white;
+            font-family: 'Open Sans', sans-serif;
+            font-size: 20px;
+            font-weight: 600;
+            padding: 0 10px;
+            position: absolute;
+            right: 0;
+            text-decoration: none;
+            top: 0;
+
+            &:hover {
+                color: $white;
+                text-decoration: none;
+            }
+        }
+    }
+}