Menu colour now changeable, and leave room item hooked up. Some additional CSS tweaks to fit current design changes

src/components/views/context_menus/RoomTagContextMenu.js

@@ -114,11 +114,21 @@ module.exports = React.createClass({
     },
 
     _onClickLeave: function() {
-        // Leave room - tag room as 'Archive'?
+        // Leave room
+        dis.dispatch({
+            action: 'leave_room',
+            room_id: this.props.room.roomId,
+        });
+
+        // Close the context menu
+        if (this.props.onFinished) {
+            this.props.onFinished();
+        };
     },
 
     render: function() {
-        var cli = MatrixClientPeg.get();
+        var myUserId = MatrixClientPeg.get().credentials.userId;
+        var myMember = this.props.room.getMember(myUserId);
 
         var favouriteClasses = classNames({
             'mx_RoomTagContextMenu_field': true,
@@ -151,7 +161,7 @@ module.exports = React.createClass({
                     Low Priority
                 </div>
                 <hr className="mx_RoomTagContextMenu_separator" />
-                <div className={ leaveClasses } onClick={this._onClickLeave} >
+                <div className={ leaveClasses } onClick={(myMember && myMember.membership === "join") ? this._onClickLeave : null} >
                     <img className="mx_RoomTagContextMenu_icon" src="img/icon_context_delete.svg" width="15" height="15" />
                     Leave
                 </div>

src/skins/vector/css/matrix-react-sdk/structures/ContextualMenu.css

@@ -55,7 +55,7 @@ limitations under the License.
     border-bottom: 8px solid transparent;
 }
 
-.mx_ContextualMenu_chevron_right:after{
+.mx_ContextualMenu_chevron_right:after {
     content:'';
     width: 0;
     height: 0;

src/skins/vector/css/matrix-react-sdk/structures/SearchBox.css

@@ -16,8 +16,8 @@ limitations under the License.
 
 .mx_SearchBox {
     height: 24px;
-    margin-left: 18px;
+    margin-left: 16px;
-    margin-right: 18px;
+    margin-right: 16px;
     padding-top: 24px;
     padding-bottom: 22px;
     border-bottom: 1px solid rgba(0, 0, 0, 0.1);

src/skins/vector/css/matrix-react-sdk/views/avatars/BaseAvatar.css

@@ -23,6 +23,7 @@ limitations under the License.
     z-index: 1;
     color: #fff;
     text-align: center;
+    padding-top: 1px;
     speak: none;
     pointer-events: none;
     font-weight: normal;

src/skins/vector/css/matrix-react-sdk/views/rooms/RoomHeader.css

@@ -233,7 +233,7 @@ limitations under the License.
 }
 
 .mx_RoomHeader_button {
-    margin-left: 8px;
+    margin-left: 12px;
     cursor: pointer;
 }
 

src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css

@@ -19,23 +19,23 @@ limitations under the License.
     cursor: pointer;
     font-size: 13px;
     display: block;
-    height: 34px;
+    height: 35px;
 }
 
 .mx_RoomTile_nameContainer {
     display: inline-block;
     width: 180px;
-    height: 24px;
+    height: 25px;
 }
 
 .mx_RoomTile_avatar {
     display: inline-block;
     padding-top: 5px;
     padding-bottom: 5px;
-    padding-left: 18px;
+    padding-left: 16px;
     padding-right: 6px;
-    width: 24px;
+    width: 25px;
-    height: 24px;
+    height: 25px;
     vertical-align: middle;
 }
 
@@ -47,9 +47,9 @@ limitations under the License.
     border-radius: 40px;
     background-image: url("img/icons_ellipsis.svg");
     background-size: 25px;
-    left: 17px;
+    left: 16px;
-    width: 24px;
+    width: 25px;
-    height: 24px;
+    height: 25px;
     z-index: 4;
 }
 
@@ -61,8 +61,8 @@ limitations under the License.
     border-radius: 40px;
     background: #4A4A4A;
     top: 5px;
-    width: 24px;
+    width: 25px;
-    height: 24px;
+    height: 25px;
     opacity: 0.6;
     z-index: 2;
 }

src/skins/vector/css/vector-web/views/context_menus/RoomTagContextMenu.css

@@ -15,13 +15,14 @@ limitations under the License.
 */
 
 .mx_RoomTagContextMenu_field {
-    padding-top: 8px;
+    padding-top: 10px;
     padding-right: 20px;
-    padding-bottom: 8px;
+    padding-bottom: 10px;
     cursor: pointer;
     white-space: nowrap;
     display: flex;
     align-items: center;
+    line-height: 10px;
 }
 
 .mx_RoomTagContextMenu_field:first-child {