Merge branch 'develop' into travis/voice-messages/waveform

res/css/views/dialogs/_AddExistingToSpaceDialog.scss

@@ -28,22 +28,23 @@ limitations under the License.
     flex-direction: column;
     flex-wrap: nowrap;
     min-height: 0;
+    height: 80vh;
 
     .mx_Dialog_title {
         display: flex;
 
-        .mx_BaseAvatar {
-            display: inline-flex;
-            margin: 5px 16px 5px 5px;
-            vertical-align: middle;
-        }
-
         .mx_BaseAvatar_image {
             border-radius: 8px;
             margin: 0;
             vertical-align: unset;
         }
 
+        .mx_BaseAvatar {
+            display: inline-flex;
+            margin: 5px 16px 5px 5px;
+            vertical-align: middle;
+        }
+
         > div {
             > h1 {
                 font-weight: $font-semi-bold;
@@ -101,6 +102,7 @@ limitations under the License.
 
     .mx_SearchBox {
         margin: 0;
+        flex-grow: 0;
     }
 
     .mx_AddExistingToSpaceDialog_errorText {
@@ -112,7 +114,10 @@ limitations under the License.
     }
 
     .mx_AddExistingToSpaceDialog_content {
+        flex-grow: 1;
+
         .mx_AddExistingToSpaceDialog_noResults {
+            display: block;
             margin-top: 24px;
         }
     }
@@ -162,8 +167,14 @@ limitations under the License.
 
         > span {
             flex-grow: 1;
-            font-size: $font-12px;
+            font-size: $font-14px;
             line-height: $font-15px;
+            font-weight: $font-semi-bold;
+
+            .mx_AccessibleButton {
+                font-size: inherit;
+                display: inline-block;
+            }
 
             > * {
                 vertical-align: middle;

res/css/views/dialogs/_SpaceSettingsDialog.scss

@@ -49,7 +49,7 @@ limitations under the License.
         }
     }
 
-    .mx_FormButton {
+    .mx_AccessibleButton_hasKind {
         padding: 8px 22px;
     }
 }

res/css/views/elements/_FacePile.scss

@@ -0,0 +1,42 @@
+/*
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_FacePile {
+    .mx_FacePile_faces {
+        display: inline-flex;
+        flex-direction: row-reverse;
+        vertical-align: middle;
+
+        > span + span {
+            margin-right: -8px;
+        }
+
+        .mx_BaseAvatar_image {
+            border: 1px solid $primary-bg-color;
+        }
+
+        .mx_BaseAvatar_initial {
+            margin: 1px; // to offset the border on the image
+        }
+    }
+
+    > span {
+        margin-left: 12px;
+        font-size: $font-14px;
+        line-height: $font-24px;
+        color: $tertiary-fg-color;
+    }
+}

res/css/views/rooms/_NewRoomIntro.scss

@@ -33,8 +33,13 @@ limitations under the License.
 
         .mx_AccessibleButton {
             line-height: $font-24px;
+            display: inline-block;
 
-            &::before {
+            & + .mx_AccessibleButton {
+                margin-left: 12px;
+            }
+
+            &:not(.mx_AccessibleButton_kind_primary_outline)::before {
                 content: '';
                 display: inline-block;
                 background-color: $button-fg-color;

res/css/views/rooms/_RoomList.scss

@@ -27,6 +27,9 @@ limitations under the License.
 .mx_RoomList_iconExplore::before {
     mask-image: url('$(res)/img/element-icons/roomlist/explore.svg');
 }
+.mx_RoomList_iconBrowse::before {
+    mask-image: url('$(res)/img/element-icons/roomlist/browse.svg');
+}
 .mx_RoomList_iconDialpad::before {
     mask-image: url('$(res)/img/element-icons/roomlist/dialpad.svg');
 }
@@ -34,29 +37,33 @@ limitations under the License.
 .mx_RoomList_explorePrompt {
     margin: 4px 12px 4px;
     padding-top: 12px;
-    border-top: 1px solid $tertiary-fg-color;
-    font-size: $font-13px;
+    border-top: 1px solid $input-border-color;
+    font-size: $font-14px;
 
     div:first-child {
         font-weight: $font-semi-bold;
+        line-height: $font-18px;
+        color: $primary-fg-color;
     }
 
     .mx_AccessibleButton {
-        color: $secondary-fg-color;
+        color: $primary-fg-color;
         position: relative;
-        padding: 0 0 0 24px;
+        padding: 8px 8px 8px 32px;
         font-size: inherit;
-        margin-top: 8px;
+        margin-top: 12px;
         display: block;
         text-align: start;
+        background-color: $roomlist-button-bg-color;
+        border-radius: 4px;
 
         &::before {
             content: '';
             width: 16px;
             height: 16px;
             position: absolute;
-            top: 0;
-            left: 0;
+            top: 8px;
+            left: 8px;
             background: $secondary-fg-color;
             mask-position: center;
             mask-size: contain;
@@ -70,5 +77,13 @@ limitations under the License.
         &.mx_RoomList_explorePrompt_explore::before {
             mask-image: url('$(res)/img/element-icons/roomlist/explore.svg');
         }
+
+        &.mx_RoomList_explorePrompt_spaceInvite::before {
+            mask-image: url('$(res)/img/element-icons/room/invite.svg');
+        }
+
+        &.mx_RoomList_explorePrompt_spaceExplore::before {
+            mask-image: url('$(res)/img/element-icons/roomlist/browse.svg');
+        }
     }
 }

res/css/views/spaces/_SpaceCreateMenu.scss

@@ -79,7 +79,7 @@ $spacePanelWidth: 71px;
             }
         }
 
-        .mx_FormButton {
+        .mx_AccessibleButton_kind_primary {
             padding: 8px 22px;
             margin-left: auto;
             display: block;