From 847e816035c6bebac4d481384c9a9276e8bc6f60 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Thu, 18 Jun 2015 15:49:41 +0100
Subject: [PATCH] grey out sending messages (although they don't go black until
 you send another message currently: awaiting fix in js sdk).

---
 css/molecules/MessageTile.css | 8 ++++++++
 src/molecules/MessageTile.js  | 9 ++++++++-
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/css/molecules/MessageTile.css b/css/molecules/MessageTile.css
index 777c18a7..ec4a7f64 100644
--- a/css/molecules/MessageTile.css
+++ b/css/molecules/MessageTile.css
@@ -1,3 +1,11 @@
 .mx_MessageTile {
     border-bottom: 1px solid #eee;
 }
+
+.mx_MessageTile.sending {
+    color: #ddd;
+}
+
+.mx_MessageTile.not_sent {
+    color: #f11;
+}
diff --git a/src/molecules/MessageTile.js b/src/molecules/MessageTile.js
index 8207f743..a4e8f742 100644
--- a/src/molecules/MessageTile.js
+++ b/src/molecules/MessageTile.js
@@ -1,5 +1,7 @@
 var React = require('react');
 
+var classNames = require("classnames");
+
 var ComponentBroker = require('../ComponentBroker');
 
 var MessageTimestamp = ComponentBroker.get('atoms/MessageTimestamp');
@@ -20,8 +22,13 @@ module.exports = React.createClass({
         if (msgtype && tileTypes[msgtype]) {
             TileType = tileTypes[msgtype];
         }
+        var classes = classNames({
+            mx_MessageTile: true,
+            sending: this.props.mxEvent.status == 'sending',
+            not_sent: this.props.mxEvent.status == 'not_sent'
+        });
         return (
-            <div className="mx_MessageTile">
+            <div className={classes}>
                 <MessageTimestamp ts={this.props.mxEvent.getTs()} />
                 <SenderProfile mxEvent={this.props.mxEvent} />
                 <TileType mxEvent={this.props.mxEvent} />