oops - wrong branch

Revert "WIP of new CSS" This reverts commit ad4e3418ff.
2015-10-23 02:38:32 +01:00 · 2015-10-23 02:38:32 +01:00 · 351a94b4a1
commit 351a94b4a1
parent ad4e3418ff
39 changed files with 98 additions and 156 deletions
--- a/.gitignore
+++ b/.gitignore
@ -1,8 +1,3 @@
 node_modules
 vector/bundle.*
 lib
-bundle.css
-.DS_Store
-key.pem
-cert.pem
-build
--- a/src/skins/vector/css/common.css
+++ b/src/skins/vector/css/common.css
@ -22,7 +22,7 @@ html {
 }

 body {
-    font-family: 'Myriad Pro', Helvetica, Arial, Sans-Serif;
+    font-family: 'Lato', Helvetica, Arial, Sans-Serif;
    font-size: 16px;
    color: #454545;
    border: 0px;
@ -34,7 +34,7 @@ div.error {
 }

 h2 {
-    color: #454545;
+    color: #80cef4;
    font-weight: 400;
    font-size: 20px;
    margin-top: 16px;
@ -44,7 +44,7 @@ h2 {
 a:hover,
 a:link,
 a:visited {
-    color: #76cfa6;
+    color: #80CEF4;
 }

 .mx_ContextualMenu_background {
@ -149,7 +149,7 @@ a:visited {
    font-weight: 400;
    font-size: 16px;
    color: #fff;
-    background-color: #76cfa6;
+    background-color: #80cef4;
    margin-left: 8px;
    margin-right: 8px;
    padding-left: 1em;
--- a/src/skins/vector/css/hide.css
+++ b/src/skins/vector/css/hide.css
@ -1,6 +1,6 @@
 .mx_RoomDropTarget,
-.mx_RoomList_favouritesLabel,
-.mx_RoomList_archiveLabel,
+.mx_RoomList_favourites_label,
+.mx_RoomList_archive_label,
 .mx_RoomHeader_search,
 .mx_RoomSettings_encrypt,
 .mx_CreateRoom_encrypt,
--- a/src/skins/vector/css/molecules/EventTile.css
+++ b/src/skins/vector/css/molecules/EventTile.css
@ -22,10 +22,10 @@ limitations under the License.
 }

 .mx_EventTile_avatar {
-    padding-left: 18px;
+    padding-left: 12px;
    padding-right: 12px;
    margin-left: -64px;
-    margin-top: -4px;
+    margin-top: -7px;
    float: left;
 }

@ -48,8 +48,9 @@ limitations under the License.
 }

 .mx_EventTile .mx_MessageTimestamp {
-    color: #acacac;
-    font-size: 12px;
+    color: #454545;
+    opacity: 0.5;
+    font-size: 14px;
    float: right;
 }

--- a/src/skins/vector/css/molecules/MImageTile.css
+++ b/src/skins/vector/css/molecules/MImageTile.css
@ -23,12 +23,12 @@ limitations under the License.
 }

 .mx_MImageTile_download {
-    color: #76cfa6;
+    color: #80cef4;
    cursor: pointer;
 }

 .mx_MImageTile_download a {
-    color: #76cfa6;
+    color: #80cef4;
    text-decoration: none;
 }

--- a/src/skins/vector/css/molecules/MemberTile.css
+++ b/src/skins/vector/css/molecules/MemberTile.css
@ -27,8 +27,8 @@ limitations under the License.
    padding-top: 3px;
    padding-bottom: 3px;
    vertical-align: middle;
-    width: 36px;
-    height: 36px;
+    width: 40px;
+    height: 40px;
    position: relative;
 }

@ -60,8 +60,8 @@ limitations under the License.

 .mx_MemberTile_power {
    position: absolute;
-    width: 44px;
-    height: 44px;
+    width: 48px;
+    height: 48px;
    left: 10px;
    top: -1px;
 }
--- a/src/skins/vector/css/molecules/MessageComposer.css
+++ b/src/skins/vector/css/molecules/MessageComposer.css
@ -15,29 +15,30 @@ limitations under the License.
 */

 .mx_MessageComposer_wrapper {
-    max-width: 960px;
-    height: 70px;
+    max-width: 720px;
+    height: 50px;
    vertical-align: middle;
    margin: auto;
    background-color: #fff;
-    border-top: 2px solid #e1dddd;
+    border-radius: 25px;
+    border: 1px solid #a9dbf4;
 }

 .mx_MessageComposer_row {
    display: table-row;
    width: 100%;
-    height: 70px;
+    height: 50px;
 }

 .mx_MessageComposer .mx_MessageComposer_avatar {
    display: table-cell;
-    padding-left: 10px;
-    padding-right: 20px;
-    height: 70px;
+    padding-left: 5px;
+    padding-right: 10px;
+    height: 50px;
 }

 .mx_MessageComposer .mx_MessageComposer_avatar img {
-    margin-top: 18px;
+    margin-top: 5px;
    border-radius: 20px;
    background-color: #dbdbdb;
 }
@ -46,7 +47,7 @@ limitations under the License.
    display: table-cell;
    width: 100%;
    vertical-align: middle;
-    height: 70px;
+    height: 50px;
 }

 .mx_MessageComposer_input textarea {
@ -63,16 +64,12 @@ limitations under the License.
    box-shadow: none;    

    /* needed for FF */
-    font-family: 'Myriad Pro', Helvetica, Arial, Sans-Serif;
+    font-family: 'Lato', Helvetica, Arial, Sans-Serif;
 }

 /* hack for FF as vertical alignment of custom placeholder text is broken */
 .mx_MessageComposer_input textarea::-moz-placeholder {
    line-height: 100%;
-    color: #76cfa6;
-}
-.mx_MessageComposer_input textarea::-webkit-input-placeholder {
-    color: #76cfa6;
 }

 .mx_MessageComposer_upload {
--- a/src/skins/vector/css/molecules/RoomHeader.css
+++ b/src/skins/vector/css/molecules/RoomHeader.css
@ -18,10 +18,10 @@ limitations under the License.
 }

 .mx_RoomHeader_wrapper {
-    max-width: 960px;
+    max-width: 720px;
    margin: auto;
    height: 88px;
-    border-bottom: 1px solid #eeeeee;
+    border-bottom: 1px solid #a8dbf3;

    display: -webkit-box;
    display: -moz-box;
@ -47,7 +47,7 @@ limitations under the License.
 .mx_RoomHeader_textButton {
    height: 48px;
    margin-top: 18px;
-    background-color: #76cfa6;
+    background-color: #80cef4;
    border-radius: 48px;
    margin-right: 8px;
    color: #fff;
@ -92,7 +92,7 @@ limitations under the License.

 .mx_RoomHeader_simpleHeader {
    line-height: 88px;
-    color: #76cfa6;
+    color: #80cef4;
    font-weight: 400;
    font-size: 20px;
    overflow: hidden;
@ -102,8 +102,8 @@ limitations under the License.
 .mx_RoomHeader_name {
    vertical-align: middle;
    height: 28px;
-    color: #454545;
-    font-weight: 800;
+    color: #80cef4;
+    font-weight: 400;
    font-size: 20px;
    padding-left: 16px;
    padding-right: 16px;
@ -133,7 +133,7 @@ limitations under the License.
    vertical-align: bottom;
    float: left;
    max-height: 38px;
-    color: #454545;
+    color: #70b5d7;  
    font-weight: 300;  
    padding-left: 16px;
    padding-right: 16px;
--- a/src/skins/vector/css/molecules/RoomSettings.css
+++ b/src/skins/vector/css/molecules/RoomSettings.css
@ -61,7 +61,7 @@ limitations under the License.
    font-weight: 400;
    font-size: 16px;
    color: #fff;
-    background-color: #76cfa6;
+    background-color: #80cef4;
    width: auto;
    margin: auto;
    padding: 6px;
--- a/src/skins/vector/css/molecules/RoomTile.css
+++ b/src/skins/vector/css/molecules/RoomTile.css
@ -17,19 +17,18 @@ limitations under the License.
 .mx_RoomTile {
    cursor: pointer;
    display: table-row;
-    font-size: 14px;
+    color: #818794;
 }

 .mx_RoomTile_avatar {
    display: table-cell;
-    background: #eaf5f0;
-    padding-right: 8px;
+    padding-right: 10px;
    padding-top: 3px;
    padding-bottom: 3px;
-    padding-left: 18px;
+    padding-left: 10px;
    vertical-align: middle;
-    width: 24px;
-    height: 24px;
+    width: 36px;
+    height: 36px;
    position: relative;
 }

@ -44,8 +43,6 @@ limitations under the License.
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 16px;    
-    color: #454545;
-    opacity: 0.8;
 }

 .collapsed .mx_RoomTile_name {
@ -66,7 +63,7 @@ limitations under the License.
 }

 .mx_RoomTile_badge {    
-    background-color: #76cfa6;
+    background-color: #80cef4;
    color: #fff;
    border-radius: 26px;
    font-weight: 400;
@ -78,7 +75,6 @@ limitations under the License.
 }
 */

-/*
 .mx_RoomTile_badge {    
    background-color: #ff0064;
    border: 3px solid #fff;
@ -89,37 +85,20 @@ limitations under the License.
    right: 9px;
    bottom: 3px;
 }
-*/
-
-.mx_RoomTile_highlight .mx_RoomTile_sidebadge,
-.mx_RoomTile_unread    .mx_RoomTile_sidebadge  {
-    background-color: #76cfa6;
-    width: 4px;
-    position: absolute;
-    left: 0px;
-}

 .mx_RoomTile_unread,
 .mx_RoomTile_highlight,
 .mx_RoomTile_invited
 {
    font-weight: bold;
+    color: #000;
 }

 .mx_RoomTile_selected {
+    background-color: #f3f8fa;
+    color: #80cef4;
    font-weight: bold;
 }

-.mx_RoomTile.mx_RoomTile_selected {
-    background: url('img/selected.png');
-    background-repeat: no-repeat;
-    background-position: right center;
-}
-
-.mx_RoomTile_arrow {
-    position: absolute;
-    right: 0px;
-}
-
 .mx_RoomTile:hover {
 }
--- a/src/skins/vector/css/organisms/CreateRoom.css
+++ b/src/skins/vector/css/organisms/CreateRoom.css
@ -15,7 +15,7 @@ limitations under the License.
 */

 .mx_CreateRoom {
-    width: 960px;
+    width: 720px;
    margin-left: auto;
    margin-right: auto;
    color: #4a4a4a;    
--- a/src/skins/vector/css/organisms/LeftPanel.css
+++ b/src/skins/vector/css/organisms/LeftPanel.css
@ -53,20 +53,17 @@ limitations under the License.
    -webkit-order: 3;
    order: 3;

-    -webkit-flex: 0 0 126px;
-    flex: 0 0 126px;
+    -webkit-flex: 0 0 170px;
+    flex: 0 0 170px;
+
+    border-top: 1px solid #f3f8fa;
 }

 .mx_LeftPanel .mx_BottomLeftMenu .mx_RoomTile {
-    color: #454545;
+    color: #378bb4;
 }

 .mx_LeftPanel .mx_BottomLeftMenu .mx_BottomLeftMenu_options {
    margin-top: 12px;
    width: 100%;
 }
-
-.mx_LeftPanel .mx_BottomLeftMenu img {
-    border-radius: 0px;
-    background-color: transparent;
-}
--- a/src/skins/vector/css/organisms/MemberList.css
+++ b/src/skins/vector/css/organisms/MemberList.css
@ -16,6 +16,8 @@ limitations under the License.

 .mx_MemberList {
    height: 100%;
+    margin-bottom: 100px;
+    padding: 8px;

    -webkit-flex: 1;
    flex: 1;
@ -37,7 +39,10 @@ limitations under the License.
 }

 .mx_MemberList_border {
+    border: 1px solid #a9dbf4;
    overflow-y: auto;
+    border-radius: 8px;
+    background-color: #fff;

    order: 1;
    -webkit-flex: 1 1 0;
--- a/src/skins/vector/css/organisms/RoomDirectory.css
+++ b/src/skins/vector/css/organisms/RoomDirectory.css
@ -15,7 +15,7 @@ limitations under the License.
 */

 .mx_RoomDirectory {
-    width: 960px;
+    width: 720px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 12px;
--- a/src/skins/vector/css/organisms/RoomList.css
+++ b/src/skins/vector/css/organisms/RoomList.css
@ -15,7 +15,6 @@ limitations under the License.
 */

 .mx_RoomList {
-    padding-top: 24px;
 }

 .mx_RoomList_recents {
@ -25,15 +24,8 @@ limitations under the License.
    width: 100%;
 }

-.mx_RoomList_recentsLabel img {
-    margin-left: 8px;
-}
-
 .mx_RoomList h2 {
-    text-transform: uppercase;
-    color: #3d3b39;
-    font-weight: 600;
-    font-size: 14px;
-    padding-left: 12px;
-    padding-right: 12px;
+    padding-left: 16px;
+    padding-right: 16px;
+    padding-bottom: 10px;
 }
--- a/src/skins/vector/css/organisms/RoomView.css
+++ b/src/skins/vector/css/organisms/RoomView.css
@ -42,7 +42,7 @@ limitations under the License.

 .mx_RoomView_fileDropTarget {
    min-width: 0px;
-    max-width: 960px;
+    max-width: 720px;
    width: 100%;
    font-size: 20px;
    text-align: center;
@ -61,7 +61,7 @@ limitations under the License.
    border-top-right-radius: 10px;

    background-color: rgba(255, 255, 255, 0.9);
-    border: 2px dashed #76cfa6;
+    border: 2px dashed #80cef4;
    border-bottom: none;
    position: absolute;
    top: 88px;
@ -84,12 +84,12 @@ limitations under the License.
    order: 2;

    min-width: 0px;
-    max-width: 960px;
+    max-width: 720px;
    width: 100%;
    margin: auto;

    overflow: auto;
-    border-bottom: 1px solid #eee;
+    border-bottom: 1px solid #a8dbf3;

    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
@ -111,7 +111,7 @@ limitations under the License.
 }

 .mx_RoomView_messageListWrapper {
-    max-width: 960px;
+    max-width: 720px;
    margin: auto;
 }

@ -129,9 +129,8 @@ limitations under the License.
    clear: both;
    margin-top: 32px;
    margin-bottom: 8px;
-    margin-left: 54px;
    padding-bottom: 6px;
-    border-bottom: 1px solid #eee;
+    border-bottom: 1px solid #a8dbf3;
 }

 .mx_RoomView_invitePrompt {
@ -142,7 +141,7 @@ limitations under the License.
    order: 2;

    min-width: 0px;
-    max-width: 960px;
+    max-width: 720px;
    width: 100%;
    margin: auto;

@ -158,19 +157,14 @@ limitations under the License.
    order: 4;

    width: 100%;
-    -webkit-flex: 0 0 36px;
-    flex: 0 0 36px;
+    -webkit-flex: 0 0 58px;
+    flex: 0 0 58px;
 }

 .mx_RoomView_statusAreaBox {
-    max-width: 960px;
+    max-width: 720px;
    margin: auto;
-}
-
-.mx_RoomView_statusAreaBox_line {
-    border-top: 1px solid #eee;
-    margin-left: 54px;
-    height: 1px;
+    border-top: 1px solid #a8dbf3;
 }

 .mx_RoomView_unreadMessagesBar {
@ -211,8 +205,8 @@ limitations under the License.
    order: 5;

    width: 100%;
-    -webkit-flex: 0 0 70px;
-    flex: 0 0 70px;
+    -webkit-flex: 0 0 63px;
+    flex: 0 0 63px;
    margin-right: 2px;
 }

@ -223,7 +217,7 @@ limitations under the License.
 }

 .mx_RoomView_uploadProgressInner {
-    background-color: #76cfa6;
+    background-color: #80cef4;
    height: 4px;
 }

--- a/src/skins/vector/css/organisms/UserSettings.css
+++ b/src/skins/vector/css/organisms/UserSettings.css
@ -15,7 +15,7 @@ limitations under the License.
 */

 .mx_UserSettings {
-    width: 960px;
+    width: 720px;
    margin-left: auto;
    margin-right: auto;
 }
--- a/src/skins/vector/css/pages/MatrixChat.css
+++ b/src/skins/vector/css/pages/MatrixChat.css
@ -69,8 +69,6 @@ limitations under the License.
    -webkit-order: 1;
    order: 1;

-    background-color: #eaf5f0;
-
    -webkit-flex: 0 0 230px;
    flex: 0 0 230px;
 }
@ -89,7 +87,7 @@ limitations under the License.

    padding-left: 12px;
    padding-right: 12px;
-    background-color: #fff;
+    background-color: #f3f8fa;

    -webkit-flex: 1;
    flex: 1;
@ -116,6 +114,7 @@ limitations under the License.
    -webkit-order: 3;
    order: 3;

+    background-color: #f3f8fa;
    -webkit-flex: 0 0 230px;
    flex: 0 0 230px;
 }
--- a/src/skins/vector/fonts/MyriadPro-Bold.woff
+++ b/src/skins/vector/fonts/MyriadPro-Bold.woff
--- a/src/skins/vector/fonts/MyriadPro-BoldIt.woff
+++ b/src/skins/vector/fonts/MyriadPro-BoldIt.woff
--- a/src/skins/vector/fonts/MyriadPro-It.woff
+++ b/src/skins/vector/fonts/MyriadPro-It.woff
--- a/src/skins/vector/fonts/MyriadPro-Regular.woff
+++ b/src/skins/vector/fonts/MyriadPro-Regular.woff
--- a/src/skins/vector/fonts/MyriadPro-SemiBold.woff
+++ b/src/skins/vector/fonts/MyriadPro-SemiBold.woff
--- a/src/skins/vector/fonts/MyriadPro.css
+++ b/src/skins/vector/fonts/MyriadPro.css
@ -1,20 +0,0 @@
-@font-face {
-  font-family: 'Myriad Pro';
-  font-style: normal;
-  font-weight: normal;
-  src: local('Myriad Pro'), local('MyriadPro'), url(MyriadPro-Regular.woff) format('woff');
-}
-
-@font-face {
-  font-family: 'Myriad Pro';
-  font-style: normal;
-  font-weight: 600;
-  src: local('Myriad Pro SemiBold'), local('MyriadPro-SemiBold'), url(MyriadPro-SemiBold.woff) format('woff');
-}
-
-@font-face {
-  font-family: 'Myriad Pro';
-  font-style: normal;
-  font-weight: bold;
-  src: local('Myriad Pro Bold'), local('MyriadPro-Bold'), url(MyriadPro-Bold.woff) format('woff');
-}
--- a/src/skins/vector/img/create-big.png
+++ b/src/skins/vector/img/create-big.png
--- a/src/skins/vector/img/directory-big.png
+++ b/src/skins/vector/img/directory-big.png
--- a/src/skins/vector/img/selected.png
+++ b/src/skins/vector/img/selected.png
--- a/src/skins/vector/img/settings-big.png
+++ b/src/skins/vector/img/settings-big.png
--- a/src/skins/vector/views/atoms/RoomAvatar.js
+++ b/src/skins/vector/views/atoms/RoomAvatar.js
@ -34,7 +34,7 @@ module.exports = React.createClass({
    },

    getFallbackAvatar: function() {
-        var images = [ '76cfa6', '50e2c2', 'f4c371' ];
+        var images = [ '80cef4', '50e2c2', 'f4c371' ];
        var total = 0;
        for (var i = 0; i < this.props.room.roomId.length; ++i) {
            total += this.props.room.roomId.charCodeAt(i);
--- a/src/skins/vector/views/molecules/BottomLeftMenuTile.js
+++ b/src/skins/vector/views/molecules/BottomLeftMenuTile.js
@ -48,7 +48,7 @@ module.exports = React.createClass({
        return (
            <div className="mx_RoomTile" onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave} onClick={this.props.onClick}>
                <div className="mx_RoomTile_avatar">
-                    <img src={ this.props.img } width="24" height="24"/>
+                    <img src={ this.props.img } width="36" height="36"/>
                </div>
                { label }
            </div>
--- a/src/skins/vector/views/molecules/EventTile.js
+++ b/src/skins/vector/views/molecules/EventTile.js
@ -110,7 +110,7 @@ module.exports = React.createClass({
            if (this.props.mxEvent.sender) {
                avatar = (
                    <div className="mx_EventTile_avatar">
-                        <MemberAvatar member={this.props.mxEvent.sender} width="24" height="24" />
+                        <MemberAvatar member={this.props.mxEvent.sender} />
                    </div>
                );
            }
--- a/src/skins/vector/views/molecules/MemberTile.js
+++ b/src/skins/vector/views/molecules/MemberTile.js
@ -121,7 +121,7 @@ module.exports = React.createClass({
        var power;
        if (this.props.member && this.props.member.powerLevelNorm > 0) {
            var img = "img/p/p" + Math.floor(20 * this.props.member.powerLevelNorm / 100) + ".png";
-            power = <img src={ img } className="mx_MemberTile_power" width="44" height="44" alt=""/>;
+            power = <img src={ img } className="mx_MemberTile_power" width="48" height="48" alt=""/>;
        }
        var presenceClass = "mx_MemberTile_offline";
        var mainClassName = "mx_MemberTile ";
@ -177,7 +177,7 @@ module.exports = React.createClass({
        return (
            <div className={mainClassName} title={ this.getPowerLabel() } onClick={ this.onClick } onMouseEnter={ this.mouseEnter } onMouseLeave={ this.mouseLeave }>
                <div className="mx_MemberTile_avatar">
-                    <MemberAvatar member={this.props.member} width="36" height="36" />
+                    <MemberAvatar member={this.props.member} />
                     { power }
                </div>
                { nameEl }
--- a/src/skins/vector/views/molecules/MessageComposer.js
+++ b/src/skins/vector/views/molecules/MessageComposer.js
@ -49,10 +49,10 @@ module.exports = React.createClass({
                <div className="mx_MessageComposer_wrapper">
                    <div className="mx_MessageComposer_row">
                        <div className="mx_MessageComposer_avatar">
-                            <MemberAvatar member={me} width="24" height="24" />
+                            <MemberAvatar member={me} />
                        </div>
                        <div className="mx_MessageComposer_input">
-                            <textarea ref="textarea" onKeyDown={this.onKeyDown} placeholder="Type a message..." />
+                            <textarea ref="textarea" onKeyDown={this.onKeyDown} placeholder="Type a message" />
                        </div>
                        <div className="mx_MessageComposer_upload" onClick={this.onUploadClick}>
                            <img src="img/upload.png" width="32" height="32"/>
--- a/src/skins/vector/views/molecules/RoomTile.js
+++ b/src/skins/vector/views/molecules/RoomTile.js
@ -84,7 +84,7 @@ module.exports = React.createClass({
        return (
            <div className={classes} onClick={this.onClick} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
                <div className="mx_RoomTile_avatar">
-                    <RoomAvatar room={this.props.room} width="24" height="24" />
+                    <RoomAvatar room={this.props.room} />
                    { badge }
                </div>
                { label }
--- a/src/skins/vector/views/organisms/LeftPanel.js
+++ b/src/skins/vector/views/organisms/LeftPanel.js
@ -40,7 +40,7 @@ module.exports = React.createClass({
            classes += " collapsed";
        }
        else {
-            //collapseButton = <img className="mx_LeftPanel_hideButton" onClick={ this.onHideClick } src="img/hide.png" width="12" height="20" alt="<"/>   
+            collapseButton = <img className="mx_LeftPanel_hideButton" onClick={ this.onHideClick } src="img/hide.png" width="12" height="20" alt="<"/>   
        }

        return (
--- a/src/skins/vector/views/organisms/MemberList.js
+++ b/src/skins/vector/views/organisms/MemberList.js
@ -103,7 +103,7 @@ module.exports = React.createClass({
        } else {
            return (
                <div className={ classes } onClick={ this.onClickInvite } >
-                    <div className="mx_MemberTile_avatar"><img src="img/create-big.png" width="36" height="36" alt=""/></div>
+                    <div className="mx_MemberTile_avatar"><img src="img/create-big.png" width="40" height="40" alt=""/></div>
                    <div className="mx_MemberTile_name">
                        <EditableText ref="invite" label="Invite" placeHolder="@user:domain.com" initialValue="" onValueChanged={this.onPopulateInvite}/>
                    </div>
@ -127,8 +127,12 @@ module.exports = React.createClass({
        }
        return (
            <div className="mx_MemberList">
+                <div className="mx_MemberList_chevron">
+                    <img src="img/chevron.png" width="24" height="13"/>
+                </div>
                <div className="mx_MemberList_border">
                    <div>
+                        <h2>Members</h2>
                        <div className="mx_MemberList_wrapper">
                            {this.makeMemberTiles('join')}
                        </div>
--- a/src/skins/vector/views/organisms/RoomList.js
+++ b/src/skins/vector/views/organisms/RoomList.js
@ -42,21 +42,21 @@ module.exports = React.createClass({
        }

        var recentsLabel = this.props.collapsed ? 
-                           <img style={{cursor: 'pointer'}} onClick={ this.onShowClick } src="img/menu.png" width="20" alt=">"/> :
-                           "Recent";
+                           <img style={{cursor: 'pointer'}} onClick={ this.onShowClick } src="img/menu.png" width="27" height="20" alt=">"/> :
+                           "Recents";

        return (
            <div className="mx_RoomList" onScroll={this._repositionTooltip}>
                {callElement}
-                <h2 className="mx_RoomList_favouritesLabel">Favourites</h2>
+                <h2 className="mx_RoomList_favourites_label">Favourites</h2>
                <RoomDropTarget text="Drop here to favourite"/>

-                <h2 className="mx_RoomList_recentsLabel">{ recentsLabel }</h2>
+                <h2 className="mx_RoomList_recents_label">{ recentsLabel }</h2>
                <div className="mx_RoomList_recents">
                    {this.makeRoomTiles()}
                </div>

-                <h2 className="mx_RoomList_archiveLabel">Archive</h2>
+                <h2 className="mx_RoomList_archive_label">Archive</h2>
                <RoomDropTarget text="Drop here to archive"/>
            </div>
        );
--- a/src/skins/vector/views/organisms/RoomView.js
+++ b/src/skins/vector/views/organisms/RoomView.js
@ -238,7 +238,6 @@ module.exports = React.createClass({
                    </div>
                    <div className="mx_RoomView_statusArea">
                        <div className="mx_RoomView_statusAreaBox">
-                            <div className="mx_RoomView_statusAreaBox_line"></div>
                            {statusBar}
                        </div>
                    </div>
--- a/vector/index.html
+++ b/vector/index.html
@ -3,7 +3,7 @@
  <head>
    <meta charset="utf-8">
    <title>Vector</title>
-    <link href='fonts/MyriadPro.css' rel='stylesheet' type='text/css'>
+    <link href='fonts/Lato.css' rel='stylesheet' type='text/css'>
    <link rel="apple-touch-icon" sizes="57x57" href="/icons/apple-touch-icon-57x57.png">
    <link rel="apple-touch-icon" sizes="60x60" href="/icons/apple-touch-icon-60x60.png">
    <link rel="apple-touch-icon" sizes="72x72" href="/icons/apple-touch-icon-72x72.png">