diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js
index 74ddb879a4..6fa8a28bb6 100644
--- a/src/components/structures/RoomSubList.js
+++ b/src/components/structures/RoomSubList.js
@@ -17,6 +17,7 @@ limitations under the License.
'use strict';
var React = require('react');
+var classNames = require('classnames');
var DropTarget = require('react-dnd').DropTarget;
var sdk = require('matrix-react-sdk')
var dis = require('matrix-react-sdk/lib/dispatcher');
@@ -300,13 +301,16 @@ var RoomSubList = React.createClass({
_getHeaderJsx: function() {
var TintableSvg = sdk.getComponent("elements.TintableSvg");
+ var classes = classNames({
+ 'mx_RoomSubList_chevron': true,
+ 'mx_RoomSubList_chevronUp': this.state.hidden,
+ 'mx_RoomSubList_chevronDown': !this.state.hidden,
+ });
return (
-
+
{ this.props.collapsed ? '' : this.props.label }
-
-
+
+
);
},
diff --git a/src/skins/vector/css/matrix-react-sdk/structures/SearchBox.css b/src/skins/vector/css/matrix-react-sdk/structures/SearchBox.css
index d9e4e05fd4..0b5362593b 100644
--- a/src/skins/vector/css/matrix-react-sdk/structures/SearchBox.css
+++ b/src/skins/vector/css/matrix-react-sdk/structures/SearchBox.css
@@ -20,7 +20,6 @@ limitations under the License.
margin-right: 16px;
padding-top: 24px;
padding-bottom: 22px;
- border-bottom: 1px solid rgba(0, 0, 0, 0.1);
display: flex;
display: -webkit-flex;
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomList.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomList.css
index a224185345..a339d80f96 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomList.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomList.css
@@ -15,7 +15,6 @@ limitations under the License.
*/
.mx_RoomList {
- padding-top: 8px;
padding-bottom: 12px;
min-height: 400px;
}
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css
index c266b027d7..2545650350 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css
@@ -109,9 +109,8 @@ limitations under the License.
}
.collapsed .mx_RoomTile_badge {
- top: -2px;
+ top: 0px;
min-width: 12px;
- height: 16px;
border-radius: 16px;
padding: 0px 4px 0px 4px;
z-index: 200;
@@ -129,22 +128,22 @@ limitations under the License.
display: block;
width: 0;
height: 0;
- margin-left: 6px;
- border-top: 8px solid #ff0064;
- border-right: 10px solid transparent;
+ margin-left: 5px;
+ border-top: 5px solid #ff0064;
+ border-right: 7px solid transparent;
}
.mx_RoomTile_badge {
display: inline-block;
- min-width: 19px;
- height: 17px;
+ min-width: 15px;
+ height: 15px;
position: absolute;
right: 8px; /*gutter */
top: 9px;
- border-radius: 14px;
+ border-radius: 8px;
color: #fff;
font-weight: 600;
- font-size: 11px;
+ font-size: 10px;
text-align: center;
padding-top: 1px;
padding-left: 4px;
@@ -175,7 +174,7 @@ limitations under the License.
}
.mx_RoomTile_selected {
- background-color: rgba(118,207,166,0.2);
+ background-color: rgba(255, 255, 255, 0.8);
}
.mx_RoomTile .mx_RoomTile_name.mx_RoomTile_badgeShown {
@@ -187,5 +186,3 @@ limitations under the License.
right: 0px;
}
-.mx_RoomTile:hover {
-}
diff --git a/src/skins/vector/css/vector-web/structures/RoomSubList.css b/src/skins/vector/css/vector-web/structures/RoomSubList.css
index b54fea9818..cd232181c8 100644
--- a/src/skins/vector/css/vector-web/structures/RoomSubList.css
+++ b/src/skins/vector/css/vector-web/structures/RoomSubList.css
@@ -21,22 +21,50 @@ limitations under the License.
}
.mx_RoomSubList_label {
+ position: relative;
text-transform: uppercase;
color: #3d3b39;
font-weight: 600;
- font-size: 13px;
+ font-size: 12px;
padding-left: 16px; /* gutter */
padding-right: 16px; /* gutter */
- margin-top: 8px;
- margin-bottom: 4px;
+ padding-top: 6px;
+ padding-bottom: 6px;
cursor: pointer;
+ background-color: rgba(118, 207, 166, 0.2);
+}
+
+.collapsed .mx_RoomSubList_label {
+ height: 16px;
}
.mx_RoomSubList_chevron {
- padding-left: 4px;
pointer-events: none;
+ position: absolute;
+ right: 41px;
+ top: 11px;
}
-.collapsed .mx_RoomSubList_chevron {
- padding-left: 12px;
+.mx_RoomSubList_chevronDown {
+ width: 0;
+ height: 0;
+ border-left: 5px solid transparent;
+ border-right: 5px solid transparent;
+ border-top: 6px solid #76cfa6;
+}
+
+.mx_RoomSubList_chevronUp {
+ width: 0;
+ height: 0;
+ border-left: 5px solid transparent;
+ border-right: 5px solid transparent;
+ border-bottom: 6px solid #76cfa6;
+}
+
+.mx_RoomSubList_chevronRight {
+ width: 0;
+ height: 0;
+ border-top: 5px solid transparent;
+ border-left: 6px solid #76cfa6;
+ border-bottom: 5px solid transparent;
}