From 4ded74765ab212223ab2943a92bf23f1be046473 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Sat, 18 Jul 2015 00:48:22 +0100
Subject: [PATCH] encore du lipstick

---
 examples/trivial/index.html                   |  2 +-
 skins/base/css/common.css                     |  7 ++---
 skins/base/css/molecules/MNoticeTile.css      |  3 +-
 skins/base/css/molecules/MessageComposer.css  |  2 +-
 skins/base/css/molecules/MessageTile.css      | 20 ++++++-------
 skins/base/css/molecules/RoomDropTarget.css   |  4 +--
 skins/base/css/molecules/RoomHeader.css       |  5 ++--
 skins/base/css/molecules/RoomTile.css         | 28 ++++++++++++-------
 skins/base/css/organisms/LeftPanel.css        | 10 +++----
 skins/base/css/organisms/MemberList.css       |  2 +-
 skins/base/css/organisms/RoomList.css         |  5 ++++
 skins/base/views/molecules/DirectoryMenu.js   |  2 +-
 skins/base/views/molecules/EventAsTextTile.js |  5 ++--
 skins/base/views/molecules/MRoomMemberTile.js |  2 +-
 skins/base/views/molecules/MessageTile.js     | 14 ++++++++--
 skins/base/views/molecules/RoomTile.js        |  9 ++++--
 .../views/molecules/voip/MCallAnswerTile.js   |  2 +-
 .../views/molecules/voip/MCallHangupTile.js   |  2 +-
 .../views/molecules/voip/MCallInviteTile.js   |  2 +-
 19 files changed, 76 insertions(+), 50 deletions(-)
diff --git a/examples/trivial/index.html b/examples/trivial/index.html
index b5a48296a4..c3f1ce149f 100644
--- a/examples/trivial/index.html
+++ b/examples/trivial/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8">
     <title>Matrix React SDK Example</title>
-    <link href='https://fonts.googleapis.com/css?family=Muli:300,400' rel='stylesheet' type='text/css'>
+    <link href='https://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
   </head>
   <body style="height: 100%;">
     <audio id="ringbackAudio" loop>
diff --git a/skins/base/css/common.css b/skins/base/css/common.css
index aa10e40988..1f34d5ac8f 100644
--- a/skins/base/css/common.css
+++ b/skins/base/css/common.css
@@ -15,10 +15,9 @@ limitations under the License.
 */
 
 body {
-    font-family: 'Muli', Helvetica, Arial, Sans-Serif;
-    font-weight: 300;
-    font-size: 15px;
-    color: #747474;
+    font-family: 'Lato', Helvetica, Arial, Sans-Serif;
+    font-size: 16px;
+    color: #454545;
     border: 0px;
     margin: 0px;
 }
diff --git a/skins/base/css/molecules/MNoticeTile.css b/skins/base/css/molecules/MNoticeTile.css
index cac13e9b89..1115c8f086 100644
--- a/skins/base/css/molecules/MNoticeTile.css
+++ b/skins/base/css/molecules/MNoticeTile.css
@@ -14,5 +14,6 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_MNoticeTile {
+.mx_MNoticeTile .mx_MessageTile_content {
+    opacity: 0.5;
 }
diff --git a/skins/base/css/molecules/MessageComposer.css b/skins/base/css/molecules/MessageComposer.css
index 1f2d703a1f..9a4cd29af6 100644
--- a/skins/base/css/molecules/MessageComposer.css
+++ b/skins/base/css/molecules/MessageComposer.css
@@ -64,7 +64,7 @@ limitations under the License.
     box-shadow: none;    
 
     /* needed for FF */
-    font-family: 'Muli', Helvetica, Arial, Sans-Serif;
+    font-family: 'Lato', Helvetica, Arial, Sans-Serif;
     font-weight: 300;
     font-size: 15px;    
 }
diff --git a/skins/base/css/molecules/MessageTile.css b/skins/base/css/molecules/MessageTile.css
index 4a4e122486..69a91fb8b3 100644
--- a/skins/base/css/molecules/MessageTile.css
+++ b/skins/base/css/molecules/MessageTile.css
@@ -39,22 +39,18 @@ limitations under the License.
     margin-top: 8px ! important;
 }
 
-.mx_MessageTile_continuation .mx_MessageTile_avatar,
-.mx_MessageTile_continuation .mx_SenderProfile
-{
-    display: none ! important;
-}
-
 .mx_MessageTile .mx_SenderProfile {
-    color: #acacac;
-    font-size: 13px;
+    color: #454545;
+    opacity: 0.5;
+    font-size: 14px;
     margin-bottom: 4px;
     display: block;
 }
 
 .mx_MessageTile .mx_MessageTimestamp {
-    color: #acacac;
-    font-size: 13px;
+    color: #454545;
+    opacity: 0.5;
+    font-size: 14px;
     float: right;
 }
 
@@ -63,6 +59,10 @@ limitations under the License.
     display: block;
 }
 
+.mx_MessageTile_notice {
+    opacity: 0.5;
+}
+
 .mx_MessageTile_sending {
     color: #ddd;
 }
diff --git a/skins/base/css/molecules/RoomDropTarget.css b/skins/base/css/molecules/RoomDropTarget.css
index a30d7b4659..c42d44995d 100644
--- a/skins/base/css/molecules/RoomDropTarget.css
+++ b/skins/base/css/molecules/RoomDropTarget.css
@@ -17,8 +17,8 @@ limitations under the License.
 .mx_RoomDropTarget {
     font-size: 14px;
     text-align: center;
-    margin-left: -8px;
-    margin-right: -8px;
+    margin-left: 8px;
+    margin-right: 8px;
     padding-top: 16px;
     padding-bottom: 16px;
     background-color: #fbfbfb;
diff --git a/skins/base/css/molecules/RoomHeader.css b/skins/base/css/molecules/RoomHeader.css
index 292c7d2b3b..c107e18157 100644
--- a/skins/base/css/molecules/RoomHeader.css
+++ b/skins/base/css/molecules/RoomHeader.css
@@ -71,7 +71,7 @@ limitations under the License.
     height: 28px;
     color: #80cef4;
     font-weight: 400;
-    font-size: 18px;
+    font-size: 20px;
     padding-left: 16px;
     padding-right: 16px;
     overflow: scroll;
@@ -82,7 +82,8 @@ limitations under the License.
     vertical-align: bottom;
     float: left;
     max-height: 38px;
-    color: #80cef4;    
+    color: #70b5d7;  
+    font-weight: 300;  
     padding-left: 16px;
     padding-right: 16px;
     overflow: scroll;
diff --git a/skins/base/css/molecules/RoomTile.css b/skins/base/css/molecules/RoomTile.css
index b258ea33e4..266e8430ea 100644
--- a/skins/base/css/molecules/RoomTile.css
+++ b/skins/base/css/molecules/RoomTile.css
@@ -17,10 +17,7 @@ limitations under the License.
 .mx_RoomTile {
     cursor: pointer;
     display: table-row;
-}
-
-.mx_RoomTile_selected {
-    text-decoration: underline;
+    color: #818794;
 }
 
 .mx_RoomTile_avatar {
@@ -28,6 +25,7 @@ limitations under the License.
     padding-right: 12px;
     padding-top: 3px;
     padding-bottom: 3px;
+    padding-left: 16px;
     vertical-align: middle;
     width: 40px;
     height: 40px;
@@ -38,17 +36,19 @@ limitations under the License.
     background-color: #dbdbdb;
 }
 
-.mx_RoomTile_nameBadge {
-    display: table;
-    width: 100%;
-    height: 50px;
-}
-
 .mx_RoomTile_name {
     display: table-cell;
     vertical-align: middle;
     overflow: hidden;
     text-overflow: ellipsis;
+    padding-right: 16px;    
+}
+
+/*
+.mx_RoomTile_nameBadge {
+    display: table;
+    width: 100%;
+    height: 50px;
 }
 
 .mx_RoomTile_badgeCell {
@@ -68,8 +68,10 @@ limitations under the License.
     height: 26px;
     text-align: center;
 }
+*/
 
 .mx_RoomTile_unread {
+    font-weight: bold;
 }
 
 .mx_RoomTile_highlight {
@@ -79,5 +81,11 @@ limitations under the License.
     font-weight: bold;
 }
 
+.mx_RoomTile_selected {
+    background-color: #f3f8fa;
+    color: #80cef4;
+    font-weight: bold;
+}
+
 .mx_RoomTile:hover {
 }
diff --git a/skins/base/css/organisms/LeftPanel.css b/skins/base/css/organisms/LeftPanel.css
index 4cd03bc3de..7101d2e3ed 100644
--- a/skins/base/css/organisms/LeftPanel.css
+++ b/skins/base/css/organisms/LeftPanel.css
@@ -39,9 +39,6 @@ limitations under the License.
     -webkit-order: 1;
     order: 1;
 
-    padding-left: 16px;
-    padding-right: 16px;
-
     height: 100%;
     overflow-y: scroll;
 }
@@ -56,12 +53,13 @@ limitations under the License.
     -webkit-flex: 0 0 170px;
     flex: 0 0 170px;
 
-    padding-left: 16px;
-    padding-right: 16px;
-
     border-top: 1px solid #f3f8fa;
 }
 
+.mx_LeftPanel .mx_DirectoryMenu .mx_RoomTile {
+    color: #378bb4;
+}
+
 .mx_LeftPanel .mx_DirectoryMenu .mx_DirectoryMenu_options {
     margin-top: 12px;
     width: 100%;
diff --git a/skins/base/css/organisms/MemberList.css b/skins/base/css/organisms/MemberList.css
index fb55176ead..f65fec8114 100644
--- a/skins/base/css/organisms/MemberList.css
+++ b/skins/base/css/organisms/MemberList.css
@@ -23,7 +23,7 @@ limitations under the License.
 .mx_MemberList_chevron {
     position: absolute;
     right: 35px;
-    margin-top: -13px;
+    margin-top: -15px;
 }
 
 .mx_MemberList_border {
diff --git a/skins/base/css/organisms/RoomList.css b/skins/base/css/organisms/RoomList.css
index f73eab686e..35978e5be3 100644
--- a/skins/base/css/organisms/RoomList.css
+++ b/skins/base/css/organisms/RoomList.css
@@ -22,4 +22,9 @@ limitations under the License.
     display: table;
     table-layout: fixed;
     width: 100%;
+}
+
+.mx_RoomList h2 {
+    padding-left: 16px;
+    padding-right: 16px;
 }
\ No newline at end of file
diff --git a/skins/base/views/molecules/DirectoryMenu.js b/skins/base/views/molecules/DirectoryMenu.js
index 60b5542d4b..461ec1c649 100644
--- a/skins/base/views/molecules/DirectoryMenu.js
+++ b/skins/base/views/molecules/DirectoryMenu.js
@@ -45,7 +45,7 @@ module.exports = React.createClass({
                         <div className="mx_RoomTile_avatar">
                             <img src="img/create-big.png" width="42" height="42"/>
                         </div>
-                        <div className="mx_RoomTile_name">Create Room</div>
+                        <div className="mx_RoomTile_name">Create new room</div>
                     </div>
                     <div className="mx_RoomTile">
                         <div className="mx_RoomTile_avatar">
diff --git a/skins/base/views/molecules/EventAsTextTile.js b/skins/base/views/molecules/EventAsTextTile.js
index e32ec4c5df..f53d83c6d7 100644
--- a/skins/base/views/molecules/EventAsTextTile.js
+++ b/skins/base/views/molecules/EventAsTextTile.js
@@ -20,7 +20,8 @@ var React = require('react');
 
 var MatrixClientPeg = require("../../../../src/MatrixClientPeg");
 var EventAsTextTileController = require("../../../../src/controllers/molecules/EventAsTextTile");
-
+var ComponentBroker = require('../../../../src/ComponentBroker');
+var MessageTimestamp = ComponentBroker.get('atoms/MessageTimestamp');
 var TextForEvent = require("../../../../src/TextForEvent");
 
 module.exports = React.createClass({
@@ -31,7 +32,7 @@ module.exports = React.createClass({
         var text = TextForEvent.textForEvent(this.props.mxEvent);
         var timestamp = this.props.last ? <MessageTimestamp ts={this.props.mxEvent.getTs()} /> : null;
         return (
-            <div className="mx_MessageTile">
+            <div className="mx_MessageTile mx_MessageTile_notice">
                 <div className="mx_MessageTile_avatar">
                     <img src={ this.props.mxEvent.sender ? MatrixClientPeg.get().getAvatarUrlForMember(this.props.mxEvent.sender, 40, 40, "crop") : null } width="40" height="40" alt=""/>
                 </div>            
diff --git a/skins/base/views/molecules/MRoomMemberTile.js b/skins/base/views/molecules/MRoomMemberTile.js
index 7a19347da4..41923e7e6c 100644
--- a/skins/base/views/molecules/MRoomMemberTile.js
+++ b/skins/base/views/molecules/MRoomMemberTile.js
@@ -38,7 +38,7 @@ module.exports = React.createClass({
         var timestamp = this.props.last ? <MessageTimestamp ts={this.props.mxEvent.getTs()} /> : null;
 
         return (
-            <div className="mx_MessageTile">
+            <div className="mx_MessageTile mx_MessageTile_notice">
                 <div className="mx_MessageTile_avatar">
                     <img src={ this.props.mxEvent.target ? MatrixClientPeg.get().getAvatarUrlForMember(this.props.mxEvent.target, 40, 40, "crop") : null } width="40" height="40" alt=""/>
                 </div>            
diff --git a/skins/base/views/molecules/MessageTile.js b/skins/base/views/molecules/MessageTile.js
index 03af0d51f8..7eca203056 100644
--- a/skins/base/views/molecules/MessageTile.js
+++ b/skins/base/views/molecules/MessageTile.js
@@ -57,13 +57,21 @@ module.exports = React.createClass({
             mx_MessageTile_continuation: this.props.continuation,
         });
         var timestamp = this.props.last ? <MessageTimestamp ts={this.props.mxEvent.getTs()} /> : null;
-        return (
-            <div className={classes}>
+        var avatar;
+        var sender;
+        if (!this.props.continuation) {
+            avatar = (
                 <div className="mx_MessageTile_avatar">
                     <img src={ this.props.mxEvent.sender ? MatrixClientPeg.get().getAvatarUrlForMember(this.props.mxEvent.sender, 40, 40, "crop") : null } width="40" height="40" alt=""/>
                 </div>
+            );
+            sender = <SenderProfile mxEvent={this.props.mxEvent} />;
+        }
+        return (
+            <div className={classes}>
+                { avatar }
                 { timestamp }
-                <SenderProfile mxEvent={this.props.mxEvent} />
+                { sender }
                 <TileType mxEvent={this.props.mxEvent} />
             </div>
         );
diff --git a/skins/base/views/molecules/RoomTile.js b/skins/base/views/molecules/RoomTile.js
index 763893f9b0..3fe3f64fd3 100644
--- a/skins/base/views/molecules/RoomTile.js
+++ b/skins/base/views/molecules/RoomTile.js
@@ -37,6 +37,10 @@ module.exports = React.createClass({
         });
         var name = this.props.room.name.replace(":", ":\u200b");
         var badge;
+        if (this.props.highlight) {
+            badge = <img src="/img/badge.png" width="15" height="15" alt=""/>;
+        }
+        /*
         if (this.props.highlight) {
             badge = <div className="mx_RoomTile_badge">!</div>;
         }
@@ -50,10 +54,11 @@ module.exports = React.createClass({
         else {
             nameCell = <div className="mx_RoomTile_name">{name}</div>;
         }
+        */
         return (
             <div className={classes} onClick={this.onClick}>
-                <div className="mx_RoomTile_avatar"><img src={ MatrixClientPeg.get().getAvatarUrlForRoom(this.props.room, 40, 40, "crop") } width="40" height="40" alt=""/></div>
-                { nameCell }
+                <div className="mx_RoomTile_avatar"><img src={ MatrixClientPeg.get().getAvatarUrlForRoom(this.props.room, 40, 40, "crop") } width="40" height="40" alt=""/>{ badge }</div>
+                <div className="mx_RoomTile_name">{name}</div>
             </div>
         );
     }
diff --git a/skins/base/views/molecules/voip/MCallAnswerTile.js b/skins/base/views/molecules/voip/MCallAnswerTile.js
index e3ef46a4c1..b7ea3cad3e 100644
--- a/skins/base/views/molecules/voip/MCallAnswerTile.js
+++ b/skins/base/views/molecules/voip/MCallAnswerTile.js
@@ -34,7 +34,7 @@ module.exports = React.createClass({
     render: function() {
         // XXX: for now, just cheekily borrow the css from message tile...
         return (
-            <div className="mx_MessageTile">
+            <div className="mx_MessageTile mx_MessageTile_notice">
                 <div className="mx_MessageTile_avatar">
                     <img src={ this.props.mxEvent.sender ? MatrixClientPeg.get().getAvatarUrlForMember(this.props.mxEvent.sender, 40, 40, "crop") : null } width="40" height="40" alt=""/>
                 </div>            
diff --git a/skins/base/views/molecules/voip/MCallHangupTile.js b/skins/base/views/molecules/voip/MCallHangupTile.js
index 921f88cc05..261bd8d1b0 100644
--- a/skins/base/views/molecules/voip/MCallHangupTile.js
+++ b/skins/base/views/molecules/voip/MCallHangupTile.js
@@ -34,7 +34,7 @@ module.exports = React.createClass({
     render: function() {
         // XXX: for now, just cheekily borrow the css from message tile...
         return (
-            <div className="mx_MessageTile">
+            <div className="mx_MessageTile mx_MessageTile_notice">
                 <div className="mx_MessageTile_avatar">
                     <img src={ this.props.mxEvent.sender ? MatrixClientPeg.get().getAvatarUrlForMember(this.props.mxEvent.sender, 40, 40, "crop") : null } width="40" height="40" alt=""/>
                 </div>            
diff --git a/skins/base/views/molecules/voip/MCallInviteTile.js b/skins/base/views/molecules/voip/MCallInviteTile.js
index 8487d282a5..4e8f6baf63 100644
--- a/skins/base/views/molecules/voip/MCallInviteTile.js
+++ b/skins/base/views/molecules/voip/MCallInviteTile.js
@@ -40,7 +40,7 @@ module.exports = React.createClass({
     render: function() {
         // XXX: for now, just cheekily borrow the css from message tile...
         return (
-            <div className="mx_MessageTile">
+            <div className="mx_MessageTile mx_MessageTile_notice">
                 <div className="mx_MessageTile_avatar">
                     <img src={ this.props.mxEvent.sender ? MatrixClientPeg.get().getAvatarUrlForMember(this.props.mxEvent.sender, 40, 40, "crop") : null } width="40" height="40" alt=""/>
                 </div>            
