diff --git a/src/components/structures/BottomLeftMenu.js b/src/components/structures/BottomLeftMenu.js
index 911d1013..a4d89fcf 100644
--- a/src/components/structures/BottomLeftMenu.js
+++ b/src/components/structures/BottomLeftMenu.js
@@ -50,7 +50,7 @@ module.exports = React.createClass({
return (
-
+
diff --git a/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css b/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css
index b4cd2c0c..b1581d47 100644
--- a/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css
+++ b/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;
diff --git a/src/skins/vector/css/matrix-react-sdk/structures/UserSettings.css b/src/skins/vector/css/matrix-react-sdk/structures/UserSettings.css
index 11d266b4..949ebf09 100644
--- a/src/skins/vector/css/matrix-react-sdk/structures/UserSettings.css
+++ b/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;
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomHeader.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomHeader.css
index 1b84abac..4e53903c 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomHeader.css
+++ b/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;
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomSettings.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomSettings.css
index 48845e28..f352e57f 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomSettings.css
+++ b/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 {