update to new bottomleftmenu. update header and composer heights

src/components/structures/BottomLeftMenu.js

@@ -47,12 +47,19 @@ module.exports = React.createClass({
 
     render: function() {
         var BottomLeftMenuTile = sdk.getComponent('rooms.BottomLeftMenuTile');
+        var TintableSvg = sdk.getComponent('elements.TintableSvg');
         return (
             <div className="mx_BottomLeftMenu">
                 <div className="mx_BottomLeftMenu_options">
-                    <BottomLeftMenuTile collapsed={ this.props.collapsed } img="img/create-big.svg" label="Start chat" onClick={ this.onCreateRoomClick }/>
-                    <BottomLeftMenuTile collapsed={ this.props.collapsed } img="img/directory-big.svg" label="Directory" onClick={ this.onRoomDirectoryClick }/>
-                    <BottomLeftMenuTile collapsed={ this.props.collapsed } img="img/settings-big.svg" label="Settings" onClick={ this.onSettingsClick }/>
+                    <div className="mx_BottomLeftMenu_createRoom" title="Start chat" onClick={ this.onCreateRoomClick }>
+                        <TintableSvg  src="img/icons-create-room.svg" width="24" height="24"/>
+                    </div>
+                    <div className="mx_BottomLeftMenu_directory" title="Room directory" onClick={ this.onRoomDirectoryClick }>
+                        <TintableSvg  src="img/icons-directory.svg" width="24" height="24"/>
+                    </div>
+                    <div className="mx_BottomLeftMenu_settings" title="Settings" onClick={ this.onSettingsClick }>
+                        <TintableSvg  src="img/icons-settings.svg" width="24" height="24"/>
+                    </div>
                 </div>
             </div>
         );

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

@@ -36,8 +36,8 @@ limitations under the License.
     -webkit-order: 1;
     order: 1;
 
-    -webkit-flex: 0 0 83px;
-    flex: 0 0 83px;
+    -webkit-flex: 0 0 70px;
+    flex: 0 0 70px;
 }
 
 .mx_RoomView_fileDropTarget {
@@ -64,7 +64,7 @@ limitations under the License.
     border: 2px #e1dddd solid;
     border-bottom: none;
     position: absolute;
-    top: 83px;
+    top: 70px;
     bottom: 0px;
     z-index: 3000;
 }

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

@@ -36,8 +36,8 @@ limitations under the License.
     -webkit-order: 1;
     order: 1;
 
-    -webkit-flex: 0 0 83px;
-    flex: 0 0 83px;
+    -webkit-flex: 0 0 70px;
+    flex: 0 0 70px;
 }
 
 .mx_UserSettings_body {

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

@@ -79,8 +79,8 @@ limitations under the License.
 
 .mx_MemberList_bottom {
     order: 4;
-    flex: 0 0 72px;
-    -webkit-flex: 0 0 72px;
+    flex: 0 0 60px;
+    -webkit-flex: 0 0 60px;
 }
 
 .mx_MemberList_bottomRule {

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

@@ -45,7 +45,7 @@ limitations under the License.
     display: table-cell;
     width: 100%;
     vertical-align: middle;
-    height: 70px;
+    height: 60px;
     text-align: center;
     font-style: italic;
     color: #888;
@@ -55,7 +55,7 @@ limitations under the License.
     display: table-cell;
     width: 100%;
     vertical-align: middle;
-    height: 70px;
+    height: 60px;
 }
 
 .mx_MessageComposer_input textarea {

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

@@ -23,7 +23,7 @@ limitations under the License.
 .mx_RoomHeader_wrapper {
     max-width: 960px;
     margin: auto;
-    height: 83px;
+    height: 70px;
 
     -webkit-align-items: center;
     align-items: center;
@@ -118,7 +118,7 @@ limitations under the License.
 }
 
 .mx_RoomHeader_simpleHeader {
-    line-height: 83px;
+    line-height: 70px;
     color: #454545;
     font-size: 22px;
     font-weight: bold;

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

@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 .mx_RoomList {
-    padding-top: 24px;
+    padding-top: 8px;
     padding-bottom: 12px;
     min-height: 400px;
 }

src/skins/vector/css/vector-web/structures/LeftPanel.css

@@ -58,23 +58,29 @@ limitations under the License.
     -webkit-order: 3;
     order: 3;
 
-    -webkit-flex: 0 0 140px;
-    flex: 0 0 140px;
-
-    background-color: rgba(118,207,166,0.2);
+    border-top: 1px solid rgba(0,0,0,0.1);
+    margin-left: 20px;
+    margin-right: 20px;
+    -webkit-flex: 0 0 60px;
+    flex: 0 0 60px;
 }
 
-.mx_LeftPanel .mx_BottomLeftMenu .mx_RoomTile {
-    color: #454545;
-}
-
-.mx_LeftPanel .mx_BottomLeftMenu .mx_BottomLeftMenu_options {
-    margin-top: 15px;
+.mx_LeftPanel .mx_BottomLeftMenu_options {
+    margin-top: 18px;
     width: 100%;
 }
 
-.mx_LeftPanel .mx_BottomLeftMenu img {
-    border-radius: 0px;
-    background-color: transparent;
-    vertical-align: middle;
+.mx_LeftPanel .mx_BottomLeftMenu_createRoom,
+.mx_LeftPanel .mx_BottomLeftMenu_directory,
+.mx_LeftPanel .mx_BottomLeftMenu_settings {
+    display: inline-block;
+    cursor: pointer;
+}
+
+.mx_LeftPanel .mx_BottomLeftMenu_directory {
+    margin-left: 10px;
+}
+
+.mx_LeftPanel .mx_BottomLeftMenu_settings {
+    float: right;
 }

src/skins/vector/css/vector-web/structures/RightPanel.css

@@ -33,14 +33,14 @@ limitations under the License.
     -webkit-order: 1;
     order: 1;
 
-    -webkit-flex: 0 0 83px;
-    flex: 0 0 83px;
+    -webkit-flex: 0 0 70px;
+    flex: 0 0 70px;
 }
 
 /** Fixme - factor this out with the main header **/
 
 .mx_RightPanel_headerButtonGroup {
-    margin-top: 32px;
+    margin-top: 25px;
     float: left;
     background-color: #fff;
     margin-left: -4px;