Better default in channel component

.gitignore

@@ -1,3 +1,4 @@
 node_modules
 .node-version
 .env
+.DS_Store

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mozaik-ext-slack",
-  "version": "0.1.0",
+  "version": "0.2.0-beta.1",
   "description": "Slack widgets to Mozaik dashboard",
   "main": "./components.js",
   "scripts": {
@@ -21,6 +21,7 @@
     "babelify": "7.2.0",
     "bluebird": "3.3.5",
     "chalk": "1.1.3",
+    "classnames": "^2.2.5",
     "convict": "^0.6.1",
     "d3": "^4.1.0",
     "d3-ease": "^1.0.0",

src/components/Channel.jsx

@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import reactMixin from 'react-mixin';
 import { ListenerMixin } from 'reflux';
 import Mozaik from 'mozaik/browser';
+import classNames from 'classnames';
 
 class Channel extends Component {
   constructor(props) {
@@ -44,26 +45,31 @@ class Channel extends Component {
   render() {
     const { message } = this.state;
     let content = {
+      empty: true,
       title: this.props.title || (this.props.channel ? `Slack ${this.props.channel}` : 'Slack'),
-      text: '--',
+      text: 'Send msg in Slack',
       avatar: ''
     };
 
     // Override actual content
     if (message) {
+      content.empty = false;
       content.text = message.text;
       content.author = message.user.real_name;
       content.avatar = message.user.profile.image_48;
     }
 
+    // Construct classes
+    content.class = classNames('slack-channel__message--value', { 'slack-channel__message--empty': content.empty });
+
     return (<div>
       <div className="widget__header">
         <span className="widget__header__subject">{content.title}</span>
         <i className="fa fa-comment-o" />
       </div>
       <div className="widget__body">
         <div className="slack-channel__message">
-          <div className="slack-channel__message--value">{content.text}</div>
+          <div className={content.class}>{content.text}</div>
         </div>
         <div className="slack-channel__footer">
           <div className="slack-channel__footer--avatar"><img src={content.avatar} /></div>

styl/_slack.styl

@@ -9,6 +9,10 @@
   color white
   margin: 0 1.6vmin
 
+.slack-channel__message--empty
+  color: lighten($widget-bg-color, 20);
+  text-shadow: 0 2px 0 $label-bg-color;
+
 .slack-channel__footer
   position absolute
   bottom 0