From 00d2d82a1497221d5d8f6b6a86e68ab4f6ca7303 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Sat, 18 Jul 2015 01:21:56 +0100
Subject: [PATCH] new style badges, hr, notices

---
 skins/base/css/molecules/MNoticeTile.css |  2 +-
 skins/base/css/molecules/MessageTile.css |  2 +-
 skins/base/css/molecules/RoomTile.css    | 12 ++++++++++++
 skins/base/css/organisms/RoomView.css    | 23 +++++++++++++++++++++--
 skins/base/views/molecules/RoomTile.js   |  2 +-
 skins/base/views/organisms/RoomView.js   |  4 ++++
 6 files changed, 40 insertions(+), 5 deletions(-)

diff --git a/skins/base/css/molecules/MNoticeTile.css b/skins/base/css/molecules/MNoticeTile.css
index 1115c8f0..0e9c3ca1 100644
--- a/skins/base/css/molecules/MNoticeTile.css
+++ b/skins/base/css/molecules/MNoticeTile.css
@@ -14,6 +14,6 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_MNoticeTile .mx_MessageTile_content {
+.mx_MNoticeTile {
     opacity: 0.5;
 }
diff --git a/skins/base/css/molecules/MessageTile.css b/skins/base/css/molecules/MessageTile.css
index 69a91fb8..9b548c5e 100644
--- a/skins/base/css/molecules/MessageTile.css
+++ b/skins/base/css/molecules/MessageTile.css
@@ -59,7 +59,7 @@ limitations under the License.
     display: block;
 }
 
-.mx_MessageTile_notice {
+.mx_MessageTile_notice .mx_MessageTile_content {
     opacity: 0.5;
 }
 
diff --git a/skins/base/css/molecules/RoomTile.css b/skins/base/css/molecules/RoomTile.css
index 266e8430..b7c8448e 100644
--- a/skins/base/css/molecules/RoomTile.css
+++ b/skins/base/css/molecules/RoomTile.css
@@ -29,6 +29,7 @@ limitations under the License.
     vertical-align: middle;
     width: 40px;
     height: 40px;
+    position: relative;
 }
 
 .mx_RoomTile_avatar img {
@@ -70,6 +71,17 @@ limitations under the License.
 }
 */
 
+.mx_RoomTile_badge {    
+    background-color: #ff0064;
+    border: 3px solid #fff;
+    border-radius: 16px;
+    width: 9px;
+    height: 9px;
+    position: absolute;
+    right: 10px;
+    bottom: 4px;
+}
+
 .mx_RoomTile_unread {
     font-weight: bold;
 }
diff --git a/skins/base/css/organisms/RoomView.css b/skins/base/css/organisms/RoomView.css
index 150aed00..44a91e19 100644
--- a/skins/base/css/organisms/RoomView.css
+++ b/skins/base/css/organisms/RoomView.css
@@ -62,7 +62,8 @@ limitations under the License.
 
     width: 100%;
     height: 100%;
-    margin-bottom: 60px;
+    margin-top: 1px;
+    margin-bottom: 18px;
 
     overflow-y: scroll;
 }
@@ -87,13 +88,31 @@ limitations under the License.
 .mx_RoomView_invitePrompt {
 }
 
-.mx_RoomView .mx_MessageComposer {
+.mx_RoomView_statusArea {
     -webkit-box-ordinal-group: 4;
     -moz-box-ordinal-group: 4;
     -ms-flex-order: 4;
     -webkit-order: 4;
     order: 4;
 
+    width: 100%;
+    -webkit-flex: 0 0 58px;
+    flex: 0 0 58px;
+}
+
+.mx_RoomView_statusAreaBox {
+    max-width: 720px;
+    margin: auto;    
+    border-top: 1px solid #a8dbf3;
+}
+
+.mx_RoomView .mx_MessageComposer {
+    -webkit-box-ordinal-group: 5;
+    -moz-box-ordinal-group: 5;
+    -ms-flex-order: 5;
+    -webkit-order: 5;
+    order: 5;
+
     width: 100%;
     -webkit-flex: 0 0 63px;
     flex: 0 0 63px;
diff --git a/skins/base/views/molecules/RoomTile.js b/skins/base/views/molecules/RoomTile.js
index 3fe3f64f..6b80fc8a 100644
--- a/skins/base/views/molecules/RoomTile.js
+++ b/skins/base/views/molecules/RoomTile.js
@@ -38,7 +38,7 @@ 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=""/>;
+            badge = <div className="mx_RoomTile_badge"/>;
         }
         /*
         if (this.props.highlight) {
diff --git a/skins/base/views/organisms/RoomView.js b/skins/base/views/organisms/RoomView.js
index 27b37138..88adfdaa 100644
--- a/skins/base/views/organisms/RoomView.js
+++ b/skins/base/views/organisms/RoomView.js
@@ -86,6 +86,10 @@ module.exports = React.createClass({
                             </div>
                         </div>
                     </div>
+                    <div className="mx_RoomView_statusArea">
+                        <div className="mx_RoomView_statusAreaBox">
+                        </div>
+                    </div>
                     <MessageComposer room={this.state.room} />
                 </div>
             );