From adeba643f4a1d59148fa78b71b9372b2f84766bd Mon Sep 17 00:00:00 2001
From: Juha Mustonen <juha.mustonen@sc5.io>
Date: Sun, 10 Jul 2016 10:38:53 +0300
Subject: [PATCH] Better default in channel component

---
 .gitignore                 |  1 +
 package.json               |  3 ++-
 src/components/Channel.jsx | 10 ++++++++--
 styl/_slack.styl           |  4 ++++
 4 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/.gitignore b/.gitignore
index 9f00468..55f68bb 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,4 @@
 node_modules
 .node-version
 .env
+.DS_Store
diff --git a/package.json b/package.json
index abb02a0..43c13c3 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/Channel.jsx b/src/components/Channel.jsx
index be0f346..dc3785e 100644
--- a/src/components/Channel.jsx
+++ b/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,18 +45,23 @@ 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>
@@ -63,7 +69,7 @@ class Channel extends Component {
       </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>
diff --git a/styl/_slack.styl b/styl/_slack.styl
index 91e153e..55ae1ae 100644
--- a/styl/_slack.styl
+++ b/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