Use message timestamp, if available

README.md

@@ -139,3 +139,15 @@ key           | required | description
 ## License
 
 Distributed under the MIT license
+
+## Changelog
+
+# Release 0.2.0
+
+- Added since time information
+- Fixed issue when having multiple pulse widgets
+- Improved style
+
+# Release 0.1.0
+
+- Initial somewhat working version

src/components/Channel.jsx

@@ -3,6 +3,7 @@ import reactMixin from 'react-mixin';
 import { ListenerMixin } from 'reflux';
 import Mozaik from 'mozaik/browser';
 import classNames from 'classnames';
+import moment from 'moment';
 import Since from './Since.jsx';
 
 class Channel extends Component {
@@ -54,12 +55,12 @@ class Channel extends Component {
 
     // Override actual content
     if (message) {
-      const now = new Date();
+      const time = message.ts ? moment.unix(message.ts) : new Date();
       content.empty = false;
       content.text = message.text;
       content.author = message.user.real_name;
       content.avatar = message.user.profile.image_48;
-      content.date = (<Since time={now}></Since>);
+      content.date = (<Since time={time}></Since>);
     }
 
     // Construct classes

styl/_slack.styl

@@ -1,17 +1,18 @@
 .slack-channel__message
   position: absolute
-  top: 45%
+  top: 20%
   width: 100%
   text-align: center
   font-size 2rem
+  line-height 2.5rem
 
 .slack-channel__message--value
   color white
   margin: 0 1.6vmin
 
 .slack-channel__message--empty
   color: lighten($widget-bg-color, 20);
-  text-shadow: 0 2px 0 $label-bg-color;
+  text-shadow: 0 -2px 0 $label-bg-color;
 
 .slack-channel__footer
   position absolute