repair alert colors: green, pink, blue

Author: ShMcK

lib/components/Alert/index.js

@@ -23,8 +23,10 @@ var defaultAlert = {
     action: 'NOTE',
 };
 var styles = {
-    display: 'inline-block',
-    margin: '0px 10px',
+    snackbar: {
+        display: 'inline-block',
+        margin: '0px 10px',
+    },
 };
 var Alert = (function (_super) {
     __extends(Alert, _super);
@@ -33,8 +35,8 @@ var Alert = (function (_super) {
     }
     Alert.prototype.render = function () {
         var _a = this.props, alert = _a.alert, alertClose = _a.alertClose;
-        var action = alert.action, message = alert.message, open = alert.open, duration = alert.duration, color = alert.color;
-        return (React.createElement(Snackbar_1.default, {style: styles, bodyStyle: { color: color }, open: open, action: action || 'NOTE', message: message || '', autoHideDuration: duration || 2000, onActionTouchTap: alertClose, onRequestClose: alertClose}));
+        var action = alert.action, message = alert.message, open = alert.open, duration = alert.duration;
+        return (React.createElement(Snackbar_1.default, {className: 'cr-alert ' + action, style: styles.snackbar, open: open, action: action || 'NOTE', message: message || '', autoHideDuration: duration || 2000, onActionTouchTap: alertClose, onRequestClose: alertClose}));
     };
     Alert = __decorate([
         react_redux_1.connect(function (state) { return ({

lib/modules/alert/reducer.js

@@ -10,12 +10,12 @@ var _alert = {
     open: false,
     action: 'NOTE',
     duration: 1500,
-    color: colors.NOTE
+    color: colors.NOTE,
 };
 var open = {
     open: true,
     action: 'NOTE',
-    duration: 1500
+    duration: 1500,
 };
 var current = _alert;
 function setAlert(a) {

lib/store.js

@@ -4,6 +4,6 @@ var core_coderoad_1 = require('core-coderoad');
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = core_coderoad_1.configureStore({
     reducer: reducers_1.default,
-    devMode: false,
+    devMode: true,
     throttle: { TEST_RUN: 800 },
 });

src/components/Alert/_alert.less

@@ -0,0 +1,10 @@
+/* Style Alert Button */
+.cr-alert.PASS > div > div > button > div > span {
+  color: #73C990; // green
+}
+.cr-alert.FAIL > div > div > button > div > span {
+  color: #FF4081; // pink
+}
+.cr-alert.NOTE > div > div > button > div > span {
+  color: #9DA5B4; // blue
+}

src/components/Alert/index.tsx

@@ -11,8 +11,10 @@ const defaultAlert = {
 };
 
 const styles = {
-  display: 'inline-block',
-  margin: '0px 10px',
+  snackbar: {
+    display: 'inline-block',
+    margin: '0px 10px',
+  },
 };
 
 @connect(state => ({
@@ -23,11 +25,11 @@ export default class Alert extends React.Component<{
 }, {}> {
   public render() {
     const {alert, alertClose} = this.props;
-    const {action, message, open, duration, color} = alert;
+    const {action, message, open, duration} = alert;
     return (
       <Snackbar
-        style={styles}
-        bodyStyle={{color}}
+        className={'cr-alert ' + action}
+        style={styles.snackbar}
         open={open}
         action={action || 'NOTE'}
         message={message || ''}

src/components/styles/index.less

@@ -1,5 +1,6 @@
 @import 'ui-variables';
 @import '../AppMenu/_app-menu';
+@import '../Alert/_alert';
 #crv {
   position: relative;
   overflow-y: scroll;

src/modules/alert/reducer.ts

@@ -11,13 +11,13 @@ const _alert: CR.Alert = {
   open: false,
   action: 'NOTE',
   duration: 1500,
-  color: colors.NOTE
+  color: colors.NOTE,
 };
 
 const open = {
   open: true,
   action: 'NOTE',
-  duration: 1500
+  duration: 1500,
 };
 
 let current: CR.Alert = _alert;

src/store.ts

@@ -3,6 +3,6 @@ import {configureStore} from 'core-coderoad';
 
 export default configureStore({
   reducer,
-  devMode: false,
+  devMode: true,
   throttle: { TEST_RUN: 800 },
 });