Merge branch 'develop' into matthew/status

src/skins/vector/css/matrix-react-sdk/structures/_MyGroups.scss

@@ -24,14 +24,38 @@ limitations under the License.
     margin-left: 0px;
 }
 
-.mx_MyGroups_joinCreateBox {
-    display: table;
-    margin-bottom: 30px;
+.mx_MyGroups_header {
+    /* Keep mid-point of create button aligned with icon in page header */
+    margin-left: 2px;
+    display: flex;
+    flex-wrap: wrap;
 }
 
-.mx_MyGroups_createBox, .mx_MyGroups_joinBox {
-    display: table-cell;
-    width: 40%;
+.mx_MyGroups_headerCard {
+    flex: 1 0 50%;
+    margin-bottom: 30px;
+    min-width: 400px;
+    display: flex;
+    align-items: center;
+}
+
+.mx_MyGroups_headerCard .mx_MyGroups_headerCard_button {
+    margin-right: 13px;
+    height: 50px;
+}
+
+.mx_MyGroups_headerCard_button object {
+    /* Otherwise the SVG object absorbs clicks and the button doesn't work */
+    pointer-events: none;
+}
+
+.mx_MyGroups_headerCard_header {
+    font-weight: bold;
+    margin-bottom: 10px;
+}
+
+.mx_MyGroups_headerCard_content {
+    padding-right: 15px;
 }
 
 /* Until the button is wired up */
@@ -39,23 +63,16 @@ limitations under the License.
     visibility: hidden;
 }
 
-.mx_MyGroups_joinCreateHeader {
-    font-weight: bold;
-    margin-bottom: 10px;
-}
-
-.mx_MyGroups_joinCreateButton {
-    float: left;
-    margin: 10px;
-}
-
-.mx_MyGroups_joinCreateButton object {
-    /* Otherwise the SVG object absorbs clicks and the button doesn't work */
-    pointer-events: none;
-}
-
 .mx_MyGroups_content {
-    clear: left;
+    margin-left: 2px;
+}
+
+.mx_MyGroups_placeholder {
+    background-color: $group-my-groups-placeholder-bg;
+    color: $group-my-groups-placeholder-fg;
+    line-height: 400px;
+    border-radius: 10px;
+    text-align: center;
 }
 
 .mx_MyGroups_joinedGroups {
@@ -66,7 +83,8 @@ limitations under the License.
 }
 
 .mx_MyGroups_joinedGroups .mx_GroupTile {
-    width: 300px;
+    min-width: 300px;
+    flex: 1 0 25%;
     height: 75px;
     margin-bottom: 15px;
     margin-right: 10px;

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

@@ -67,8 +67,9 @@ limitations under the License.
 }
 
 .mx_EventTile .mx_SenderProfile .mx_Flair img {
-    vertical-align: -3px;
+    vertical-align: -2px;
     margin-right: 2px;
+    border-radius: 8px;
 }
 
 .mx_EventTile .mx_MessageTimestamp {

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

@@ -137,8 +137,8 @@ limitations under the License.
 
 .mx_RoomHeader_avatarPicker_remove {
     position: absolute;
-    top: 10px;
-    left: 45px;
+    top: -11px;
+    right: -9px;
 }
 
 .mx_RoomHeader_name:hover div:not(.mx_RoomHeader_editable) {
@@ -186,8 +186,12 @@ limitations under the License.
     object-fit: cover;
 }
 
+.mx_RoomHeader_avatarPicker {
+    margin-top: 23px;
+    position: relative;
+}
+
 .mx_RoomHeader_avatarPicker_edit {
-    position: absolute;
     margin-left: 16px;
     margin-top: 4px;
 }