diff --git a/skins/base/css/molecules/MNoticeTile.css b/skins/base/css/molecules/MNoticeTile.css
index 1115c8f086..0e9c3ca144 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 69a91fb8b3..9b548c5e9d 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 266e8430ea..b7c8448e56 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 150aed0069..44a91e19e9 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 3fe3f64fd3..6b80fc8a13 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 = ;
+ badge =