new style badges, hr, notices

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;
 }

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;
 }
 

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;
 }

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;

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) {

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>
             );