droptarget and usersettings and roomsettings layout tweaks

src/components/structures/BottomLeftMenu.js

@@ -50,7 +50,7 @@ module.exports = React.createClass({
         return (
             <div className="mx_BottomLeftMenu">
                 <div className="mx_BottomLeftMenu_options">
-                    <BottomLeftMenuTile collapsed={ this.props.collapsed } img="img/create-big.svg" label="Create new room" onClick={ this.onCreateRoomClick }/>
+                    <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>

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

@@ -44,7 +44,7 @@ limitations under the License.
     min-width: 0px;
     max-width: 960px;
     width: 100%;
-    font-size: 20px;
+    font-size: 18px;
     text-align: center;
 
     pointer-events: none;

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

@@ -18,7 +18,38 @@ limitations under the License.
     width: 960px;
     margin-left: auto;
     margin-right: auto;
-    overflow-y: auto;
+
+    display: -webkit-box;
+    display: -moz-box;
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;
+    flex-direction: column;
+    -webkit-flex-direction: column;    
+}
+
+.mx_UserSettings .mx_RoomHeader {
+    -webkit-box-ordinal-group: 1;
+    -moz-box-ordinal-group: 1;
+    -ms-flex-order: 1;
+    -webkit-order: 1;
+    order: 1;
+
+    -webkit-flex: 0 0 83px;
+    flex: 0 0 83px;
+}
+
+.mx_UserSettings_body {
+    -webkit-box-ordinal-group: 2;
+    -moz-box-ordinal-group: 2;
+    -ms-flex-order: 2;
+    -webkit-order: 2;
+    order: 2;
+
+    -webkit-flex: 1 1 0;
+    flex: 1 1 0;
+
+    overflow-y: auto;    
 }
 
 .mx_UserSettings_spinner {
@@ -96,6 +127,7 @@ limitations under the License.
 .mx_UserSettings_profileInputCell input,
 .mx_UserSettings_profileInputCell .mx_EditableText
 {
+    display: inline-block;
     border: 0px;
     border-bottom: 1px solid rgba(151, 151, 151, 0.5);
     padding: 0px;
@@ -105,6 +137,10 @@ limitations under the License.
     font-size: 16px;
 }
 
+.mx_UserSettings_profileInputCell .mx_EditableText_placeholder {
+    color: rgba(74, 74, 74, 0.5);    
+}
+
 .mx_UserSettings_notifInputCell {
     display: table-cell;
     padding-bottom: 21px;

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

@@ -14,7 +14,10 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_RoomHeader {
+/* add 12px to the height of the header when editing */
+.mx_RoomHeader_editing {
+    -webit-flex: 0 0 95px ! important;
+    flex: 0 0 95px ! important;
 }
 
 .mx_RoomHeader_wrapper {
@@ -33,6 +36,10 @@ limitations under the License.
     display: flex;
 }
 
+.mx_RoomHeader_editing .mx_RoomHeader_wrapper {
+    border-bottom: 1px solid transparent;
+}
+
 .mx_RoomHeader_leftRow {
     margin-left: -2px;
 
@@ -98,7 +105,7 @@ limitations under the License.
 
 .mx_RoomHeader_info {
     display: table-cell;
-    /* height: 48px; */
+    width: 100%;
     vertical-align: middle;
 }
 
@@ -122,6 +129,7 @@ limitations under the License.
 
 .mx_RoomHeader_name {
     vertical-align: middle;
+    width: 100%;
     height: 31px;
     overflow: hidden;
     color: #454545;
@@ -131,6 +139,7 @@ limitations under the License.
     padding-right: 16px;
     /* why isn't text-overflow working? */
     text-overflow: ellipsis;
+    border-bottom: 1px solid transparent;
 }
 
 .mx_RoomHeader_nametext {
@@ -155,15 +164,16 @@ limitations under the License.
     pointer-events: none;
 }
 
-.mx_RoomHeader_leftRow:hover {
+.mx_RoomHeader_name,
+.mx_RoomHeader_avatar {
     cursor: pointer;
 }
 
-.mx_RoomHeader_leftRow:hover .mx_RoomHeader_name div:not(.mx_RoomHeader_editable) {
+.mx_RoomHeader_name:hover div:not(.mx_RoomHeader_editable) {
     color: #76cfa6;
 }
 
-.mx_RoomHeader_leftRow:hover .mx_RoomHeader_settingsButton {
+.mx_RoomHeader_name:hover .mx_RoomHeader_settingsButton {
     visibility: visible;
 }
 
@@ -181,38 +191,17 @@ limitations under the License.
 }
 
 .mx_RoomHeader_editable {
-    border-bottom: 1px solid #c7c7c7;
+    border-bottom: 1px solid #c7c7c7 ! important;
     min-width: 70px;
     cursor: text;
 }
 
 .mx_RoomHeader_editable:focus {
-    border-bottom: 1px solid #76CFA6;
+    border-bottom: 1px solid #76CFA6 ! important;
     outline: none;
     box-shadow: none;
 }
 
-/*
-.mx_RoomHeader_nameEditing {
-    padding-left: 8px;
-    padding-right: 16px;
-    margin-top: -5px;
-}
-
-.mx_RoomHeader_name input, .mx_RoomHeader_nameInput {
-    border-radius: 3px;
-    width: 260px;
-    border: 1px solid #c7c7c7;
-    font-weight: 300;
-    font-size: 13px;
-    padding: 9px;
-}
-
-.mx_RoomHeader_nameInput {
-    margin-top: 6px;
-}
-*/
-
 .mx_RoomHeader_topic {
     vertical-align: bottom;
     float: left;
@@ -223,6 +212,7 @@ limitations under the License.
     margin-right: 16px;
     overflow: hidden;
     text-overflow: ellipsis;
+    border-bottom: 1px solid transparent;    
 }
 
 .mx_RoomHeader_avatar {
@@ -232,10 +222,20 @@ limitations under the License.
     vertical-align: middle;
 }
 
-.mx_RoomHeader_avatar img {
+.mx_RoomHeader_avatar .mx_RoomAvatar {
 	border-radius: 24px;
 }
 
+.mx_RoomHeader_avatarPicker_edit {
+    position: absolute;
+    margin-left: 16px;
+    margin-top: 4px;
+}
+
+.mx_RoomHeader_avatarPicker_edit > input {
+    display: none;
+}
+
 .mx_RoomHeader_button {
     display: table-cell;
     vertical-align: top;

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

@@ -15,7 +15,6 @@ limitations under the License.
 */
 
 .mx_RoomSettings {
-    padding-top: 12px;
 }
 
 .mx_RoomSettings_settings {