Merge branch 'develop' of github.com:matrix-org/matrix-react-sdk into t3chguy/feat/room-list-widgets

 Conflicts:

	src/components/views/elements/AppTile.js

	src/utils/WidgetUtils.ts

res/css/_common.scss

@@ -18,6 +18,8 @@ limitations under the License.
 
 @import "./_font-sizes.scss";
 
+$hover-transition: 0.08s cubic-bezier(.46, .03, .52, .96); // quadratic
+
 :root {
     font-size: 10px;
 }
@@ -206,12 +208,6 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
     border: 0;
 }
 
-/* applied to side-panels and messagepanel when in RoomSettings */
-.mx_fadable {
-    opacity: 1;
-    transition: opacity 0.2s ease-in-out;
-}
-
 // These are magic constants which are excluded from tinting, to let themes
 // (which only have CSS, unlike skins) tell the app what their non-tinted
 // colourscheme is by inspecting the stylesheet DOM.
@@ -260,7 +256,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
     font-weight: 300;
     font-size: $font-15px;
     position: relative;
-    padding: 25px 30px 30px 30px;
+    padding: 24px;
     max-height: 80%;
     box-shadow: 2px 15px 30px 0 $dialog-shadow-color;
     border-radius: 8px;

res/css/_components.scss

@@ -27,7 +27,7 @@
 @import "./structures/_ScrollPanel.scss";
 @import "./structures/_SearchBox.scss";
 @import "./structures/_TabbedView.scss";
-@import "./structures/_TagPanel.scss";
+@import "./structures/_GroupFilterPanel.scss";
 @import "./structures/_ToastContainer.scss";
 @import "./structures/_UploadBar.scss";
 @import "./structures/_UserMenu.scss";
@@ -82,8 +82,6 @@
 @import "./views/dialogs/_RoomUpgradeWarningDialog.scss";
 @import "./views/dialogs/_ServerOfflineDialog.scss";
 @import "./views/dialogs/_SetEmailDialog.scss";
-@import "./views/dialogs/_SetMxIdDialog.scss";
-@import "./views/dialogs/_SetPasswordDialog.scss";
 @import "./views/dialogs/_SettingsDialog.scss";
 @import "./views/dialogs/_ShareDialog.scss";
 @import "./views/dialogs/_SlashCommandHelpDialog.scss";
@@ -102,6 +100,7 @@
 @import "./views/elements/_AccessibleButton.scss";
 @import "./views/elements/_AddressSelector.scss";
 @import "./views/elements/_AddressTile.scss";
+@import "./views/elements/_DesktopBuildsNotice.scss";
 @import "./views/elements/_DirectorySearchBox.scss";
 @import "./views/elements/_Dropdown.scss";
 @import "./views/elements/_EditableItemList.scss";
@@ -141,6 +140,7 @@
 @import "./views/messages/_MEmoteBody.scss";
 @import "./views/messages/_MFileBody.scss";
 @import "./views/messages/_MImageBody.scss";
+@import "./views/messages/_MJitsiWidgetEvent.scss";
 @import "./views/messages/_MNoticeBody.scss";
 @import "./views/messages/_MStickerBody.scss";
 @import "./views/messages/_MTextBody.scss";

res/css/structures/_CustomRoomTagPanel.scss

@@ -22,7 +22,7 @@ limitations under the License.
 }
 
 .mx_CustomRoomTagPanel {
-    background-color: $tagpanel-bg-color;
+    background-color: $groupFilterPanel-bg-color;
     max-height: 40vh;
 }
 

res/css/structures/_GroupFilterPanel.scss

@@ -14,9 +14,9 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_TagPanel {
+.mx_GroupFilterPanel {
     flex: 1;
-    background-color: $tagpanel-bg-color;
+    background-color: $groupFilterPanel-bg-color;
     cursor: pointer;
 
     display: flex;
@@ -26,49 +26,49 @@ limitations under the License.
     min-height: 0;
 }
 
-.mx_TagPanel_items_selected {
+.mx_GroupFilterPanel_items_selected {
     cursor: pointer;
 }
 
-.mx_TagPanel .mx_TagPanel_divider {
+.mx_GroupFilterPanel .mx_GroupFilterPanel_divider {
     height: 0px;
     width: 90%;
     border: none;
-    border-bottom: 1px solid $tagpanel-divider-color;
+    border-bottom: 1px solid $groupFilterPanel-divider-color;
 }
 
-.mx_TagPanel .mx_TagPanel_scroller {
+.mx_GroupFilterPanel .mx_GroupFilterPanel_scroller {
     flex-grow: 1;
     width: 100%;
 }
 
-.mx_TagPanel .mx_TagPanel_tagTileContainer {
+.mx_GroupFilterPanel .mx_GroupFilterPanel_tagTileContainer {
     display: flex;
     flex-direction: column;
     align-items: center;
 
     padding-top: 6px;
 }
-.mx_TagPanel .mx_TagPanel_tagTileContainer > div {
+.mx_GroupFilterPanel .mx_GroupFilterPanel_tagTileContainer > div {
     margin: 6px 0;
 }
 
-.mx_TagPanel .mx_TagTile {
+.mx_GroupFilterPanel .mx_TagTile {
     // opacity: 0.5;
     position: relative;
 }
 
-.mx_TagPanel .mx_TagTile.mx_TagTile_prototype {
+.mx_GroupFilterPanel .mx_TagTile.mx_TagTile_prototype {
     padding: 3px;
 }
 
-.mx_TagPanel .mx_TagTile:focus,
-.mx_TagPanel .mx_TagTile:hover,
-.mx_TagPanel .mx_TagTile.mx_TagTile_selected {
+.mx_GroupFilterPanel .mx_TagTile:focus,
+.mx_GroupFilterPanel .mx_TagTile:hover,
+.mx_GroupFilterPanel .mx_TagTile.mx_TagTile_selected {
     // opacity: 1;
 }
 
-.mx_TagPanel .mx_TagTile.mx_TagTile_selected_prototype {
+.mx_GroupFilterPanel .mx_TagTile.mx_TagTile_selected_prototype {
     background-color: $primary-bg-color;
     border-radius: 6px;
 }
@@ -108,7 +108,7 @@ limitations under the License.
     }
 }
 
-.mx_TagPanel .mx_TagTile_plus {
+.mx_GroupFilterPanel .mx_TagTile_plus {
     margin-bottom: 12px;
     height: 32px;
     width: 32px;
@@ -132,7 +132,7 @@ limitations under the License.
     }
 }
 
-.mx_TagPanel .mx_TagTile.mx_TagTile_selected::before {
+.mx_GroupFilterPanel .mx_TagTile.mx_TagTile_selected::before {
     content: '';
     height: 100%;
     background-color: $accent-color;
@@ -142,7 +142,7 @@ limitations under the License.
     border-radius: 0 3px 3px 0;
 }
 
-.mx_TagPanel .mx_TagTile.mx_AccessibleButton:focus {
+.mx_GroupFilterPanel .mx_TagTile.mx_AccessibleButton:focus {
     filter: none;
 }
 

res/css/structures/_LeftPanel.scss

@@ -14,29 +14,29 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-$tagPanelWidth: 56px; // only applies in this file, used for calculations
+$groupFilterPanelWidth: 56px; // only applies in this file, used for calculations
 
 .mx_LeftPanel {
     background-color: $roomlist-bg-color;
     min-width: 260px;
     max-width: 50%;
 
-    // Create a row-based flexbox for the TagPanel and the room list
+    // Create a row-based flexbox for the GroupFilterPanel and the room list
     display: flex;
 
-    .mx_LeftPanel_tagPanelContainer {
+    .mx_LeftPanel_GroupFilterPanelContainer {
         flex-grow: 0;
         flex-shrink: 0;
-        flex-basis: $tagPanelWidth;
+        flex-basis: $groupFilterPanelWidth;
         height: 100%;
 
-        // Create another flexbox so the TagPanel fills the container
+        // Create another flexbox so the GroupFilterPanel fills the container
         display: flex;
 
-        // TagPanel handles its own CSS
+        // GroupFilterPanel handles its own CSS
     }
 
-    &:not(.mx_LeftPanel_hasTagPanel) {
+    &:not(.mx_LeftPanel_hasGroupFilterPanel) {
         .mx_LeftPanel_roomListContainer {
             width: 100%;
         }
@@ -45,7 +45,7 @@ $tagPanelWidth: 56px; // only applies in this file, used for calculations
     // Note: The 'room list' in this context is actually everything that isn't the tag
     // panel, such as the menu options, breadcrumbs, filtering, etc
     .mx_LeftPanel_roomListContainer {
-        width: calc(100% - $tagPanelWidth);
+        width: calc(100% - $groupFilterPanelWidth);
         background-color: $roomlist-bg-color;
 
         // Create another flexbox (this time a column) for the room list components
@@ -169,10 +169,10 @@ $tagPanelWidth: 56px; // only applies in this file, used for calculations
         min-width: unset;
 
         // We have to forcefully set the width to override the resizer's style attribute.
-        &.mx_LeftPanel_hasTagPanel {
-            width: calc(68px + $tagPanelWidth) !important;
+        &.mx_LeftPanel_hasGroupFilterPanel {
+            width: calc(68px + $groupFilterPanelWidth) !important;
         }
-        &:not(.mx_LeftPanel_hasTagPanel) {
+        &:not(.mx_LeftPanel_hasGroupFilterPanel) {
             width: 68px !important;
         }
 

res/css/structures/_RoomDirectory.scss

@@ -133,6 +133,10 @@ limitations under the License.
 .mx_RoomDirectory_topic {
     cursor: initial;
     color: $light-fg-color;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+    overflow: hidden;
 }
 
 .mx_RoomDirectory_alias {

res/css/structures/_TabbedView.scss

@@ -17,7 +17,7 @@ limitations under the License.
 
 .mx_TabbedView {
     margin: 0;
-    padding: 0 0 0 58px;
+    padding: 0 0 0 16px;
     display: flex;
     flex-direction: column;
     position: absolute;
@@ -25,6 +25,7 @@ limitations under the License.
     bottom: 0;
     left: 0;
     right: 0;
+    margin-top: 8px;
 }
 
 .mx_TabbedView_tabLabels {
@@ -35,13 +36,13 @@ limitations under the License.
 }
 
 .mx_TabbedView_tabLabel {
+    display: flex;
+    align-items: center;
     vertical-align: text-top;
     cursor: pointer;
-    display: block;
-    border-radius: 3px;
-    font-size: $font-14px;
-    min-height: 24px; // use min-height instead of height to allow the label to overflow a bit
-    margin-bottom: 6px;
+    padding: 8px 0;
+    border-radius: 8px;
+    font-size: $font-13px;
     position: relative;
 }
 
@@ -51,9 +52,8 @@ limitations under the License.
 }
 
 .mx_TabbedView_maskedIcon {
-    margin-left: 6px;
-    margin-right: 9px;
-    margin-top: 1px;
+    margin-left: 8px;
+    margin-right: 16px;
     width: 16px;
     height: 16px;
     display: inline-block;
@@ -65,10 +65,9 @@ limitations under the License.
     mask-repeat: no-repeat;
     mask-size: 16px;
     width: 16px;
-    height: 22px;
+    height: 16px;
     mask-position: center;
     content: '';
-    vertical-align: middle;
 }
 
 .mx_TabbedView_tabLabel_active .mx_TabbedView_maskedIcon::before {

res/css/views/dialogs/_RoomSettingsDialog.scss

@@ -48,7 +48,6 @@ limitations under the License.
     white-space: nowrap;
     overflow: hidden;
     margin: 0 auto;
-    padding-left: 40px;
     padding-right: 80px;
 }
 

res/css/views/dialogs/_SetMxIdDialog.scss

@@ -1,50 +0,0 @@
-/*
-Copyright 2015, 2016 OpenMarket Ltd
-Copyright 2017 Vector Creations Ltd
-
-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_SetMxIdDialog .mx_Dialog_title {
-    padding-right: 40px;
-}
-
-.mx_SetMxIdDialog_input_group {
-    display: flex;
-}
-
-.mx_SetMxIdDialog_input {
-    border-radius: 3px;
-    border: 1px solid $input-border-color;
-    padding: 9px;
-    color: $primary-fg-color;
-    background-color: $primary-bg-color;
-    font-size: $font-15px;
-    width: 100%;
-    max-width: 280px;
-}
-
-.mx_SetMxIdDialog_input.error,
-.mx_SetMxIdDialog_input.error:focus {
-    border: 1px solid $warning-color;
-}
-
-.mx_SetMxIdDialog_input_group .mx_Spinner {
-    height: 37px;
-    padding-left: 10px;
-    justify-content: flex-start;
-}
-
-.mx_SetMxIdDialog .success {
-    color: $accent-color;
-}

res/css/views/dialogs/_SettingsDialog.scss

@@ -36,7 +36,6 @@ limitations under the License.
     }
 
     .mx_Dialog_title {
-        text-align: center;
         margin-bottom: 24px;
     }
 }

res/css/views/elements/_DesktopBuildsNotice.scss

@@ -1,5 +1,5 @@
 /*
-Copyright 2017 Vector Creations Ltd
+Copyright 2020 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.
@@ -14,21 +14,15 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_SetPasswordDialog_change_password input {
-    border-radius: 3px;
-    border: 1px solid $input-border-color;
-    padding: 9px;
-    color: $primary-fg-color;
-    background-color: $primary-bg-color;
-    font-size: $font-15px;
-    max-width: 280px;
-    margin-bottom: 10px;
-}
+.mx_DesktopBuildsNotice {
+    text-align: center;
+    padding: 0 16px;
 
-.mx_SetPasswordDialog_change_password_button {
-    margin-top: 68px;
-}
+    > * {
+        vertical-align: middle;
+    }
 
-.mx_SetPasswordDialog .mx_Dialog_content {
-    margin-bottom: 0px;
+    > img {
+        margin-right: 8px;
+    }
 }

res/css/views/messages/_MJitsiWidgetEvent.scss

@@ -0,0 +1,55 @@
+/*
+Copyright 2020 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_MJitsiWidgetEvent {
+    display: grid;
+    grid-template-columns: 24px minmax(0, 1fr) min-content;
+
+    &::before {
+        grid-column: 1;
+        grid-row: 1 / 3;
+        width: 16px;
+        height: 16px;
+        content: "";
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        mask-repeat: no-repeat;
+        mask-position: center;
+        mask-size: contain;
+        background-color: $composer-e2e-icon-color; // XXX: Variable abuse
+        margin-top: 4px;
+        mask-image: url('$(res)/img/element-icons/call/video-call.svg');
+    }
+
+    .mx_MJitsiWidgetEvent_title {
+        font-weight: 600;
+        font-size: $font-15px;
+        grid-column: 2;
+        grid-row: 1;
+    }
+
+    .mx_MJitsiWidgetEvent_subtitle {
+        grid-column: 2;
+        grid-row: 2;
+    }
+
+    .mx_MJitsiWidgetEvent_title,
+    .mx_MJitsiWidgetEvent_subtitle {
+        overflow-wrap: break-word;
+    }
+}

res/css/views/right_panel/_BaseCard.scss

@@ -40,6 +40,7 @@ limitations under the License.
             width: 20px;
             margin: 12px;
             top: 0;
+            border-radius: 10px;
 
             &::before {
                 content: "";
@@ -55,7 +56,6 @@ limitations under the License.
         }
 
         .mx_BaseCard_back {
-            border-radius: 4px;
             left: 0;
 
             &::before {
@@ -66,7 +66,6 @@ limitations under the License.
         }
 
         .mx_BaseCard_close {
-            border-radius: 10px;
             right: 0;
 
             &::before {

res/css/views/rooms/_AppsDrawer.scss

@@ -15,7 +15,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-$MiniAppTileHeight: 114px;
+$MiniAppTileHeight: 200px;
 
 .mx_AppsDrawer {
     margin: 5px 5px 5px 18px;
@@ -50,10 +50,6 @@ $MiniAppTileHeight: 114px;
     }
 }
 
-.mx_AppsDrawer_hidden {
-    display: none;
-}
-
 .mx_AppsContainer {
     display: flex;
     flex-direction: row;
@@ -78,21 +74,7 @@ $MiniAppTileHeight: 114px;
     font-size: $font-12px;
 }
 
-.mx_AddWidget_button_full_width {
-    max-width: 960px;
-}
-
-.mx_SetAppURLDialog_input {
-    border-radius: 3px;
-    border: 1px solid $input-border-color;
-    padding: 9px;
-    color: $primary-hairline-color;
-    background-color: $primary-bg-color;
-    font-size: $font-15px;
-}
-
 .mx_AppTile {
-    max-width: 960px;
     width: 50%;
     border: 5px solid $widget-menu-bar-bg-color;
     border-radius: 4px;
@@ -105,7 +87,6 @@ $MiniAppTileHeight: 114px;
 }
 
 .mx_AppTileFullWidth {
-    max-width: 960px;
     width: 100%;
     margin: 0;
     padding: 0;
@@ -116,7 +97,6 @@ $MiniAppTileHeight: 114px;
 }
 
 .mx_AppTile_mini {
-    max-width: 960px;
     width: 100%;
     margin: 0;
     padding: 0;
@@ -220,9 +200,10 @@ $MiniAppTileHeight: 114px;
 }
 
 .mx_AppTileBody_mini {
-    height: 112px;
+    height: $MiniAppTileHeight;
     width: 100%;
     overflow: hidden;
+    border-radius: 8px;
 }
 
 .mx_AppTile .mx_AppTileBody,
@@ -248,72 +229,6 @@ $MiniAppTileHeight: 114px;
     display: block;
 }
 
-.mx_AppTileMenuBarWidgetPadding {
-    margin-right: 5px;
-}
-
-.mx_AppIconTile {
-    background-color: $lightbox-bg-color;
-    border: 1px solid rgba(0, 0, 0, 0);
-    width: 200px;
-    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
-    transition: 0.3s;
-    border-radius: 3px;
-    margin: 5px;
-    display: inline-block;
-}
-
-.mx_AppIconTile.mx_AppIconTile_active {
-    color: $accent-color;
-    border-color: $accent-color;
-}
-
-.mx_AppIconTile:hover {
-    border: 1px solid $accent-color;
-    box-shadow: 0 0 10px 5px rgba(200, 200, 200, 0.5);
-}
-
-.mx_AppIconTile_content {
-    padding: 2px 16px;
-    height: 60px;
-    overflow: hidden;
-}
-
-.mx_AppIconTile_content h4 {
-    margin-top: 5px;
-    margin-bottom: 2px;
-}
-
-.mx_AppIconTile_content p {
-    margin-top: 0;
-    margin-bottom: 5px;
-    font-size: smaller;
-}
-
-.mx_AppIconTile_image {
-    padding: 10px;
-    max-width: 100px;
-    max-height: 100px;
-    width: auto;
-    height: auto;
-}
-
-.mx_AppIconTile_imageContainer {
-    text-align: center;
-    width: 100%;
-    background-color: white;
-    border-radius: 3px 3px 0 0;
-    height: 155px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-form.mx_Custom_Widget_Form div {
-    margin-top: 10px;
-    margin-bottom: 10px;
-}
-
 .mx_AppPermissionWarning {
     text-align: center;
     background-color: $widget-menu-bar-bg-color;

res/css/views/rooms/_MemberInfo.scss

@@ -70,7 +70,7 @@ limitations under the License.
 }
 
 .mx_MemberInfo_avatar {
-    background: $tagpanel-bg-color;
+    background: $groupFilterPanel-bg-color;
     margin-bottom: 16px;
 }
 

res/css/views/rooms/_MemberList.scss

@@ -96,11 +96,21 @@ limitations under the License.
 }
 
 .mx_MemberList_invite span {
-    background-image: url('$(res)/img/element-icons/room/invite.svg');
-    background-repeat: no-repeat;
-    background-position: center left;
-    background-size: 20px;
-    padding: 8px 0 8px 25px;
+    padding: 8px 0;
+    display: inline-flex;
+
+    &::before {
+        content: '';
+        display: inline-block;
+        background-color: $button-fg-color;
+        mask-image: url('$(res)/img/element-icons/room/invite.svg');
+        mask-position: center;
+        mask-repeat: no-repeat;
+        mask-size: 20px;
+        width: 20px;
+        height: 20px;
+        margin-right: 5px;
+    }
 }
 
 .mx_MemberList_inviteCommunity span {

res/css/views/rooms/_MessageComposer.scss

@@ -217,7 +217,7 @@ limitations under the License.
         }
     }
 
-    &.mx_MessageComposer_hangup::before {
+    &.mx_MessageComposer_hangup:not(.mx_AccessibleButton_disabled)::before {
         background-color: $warning-color;
     }
 }

res/css/views/rooms/_SearchBar.scss

@@ -68,3 +68,4 @@ limitations under the License.
         cursor: pointer;
     }
 }
+

res/css/views/settings/_AvatarSetting.scss

@@ -1,5 +1,5 @@
 /*
-Copyright 2019 The Matrix.org Foundation C.I.C.
+Copyright 2019, 2020 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.
@@ -15,13 +15,56 @@ limitations under the License.
 */
 
 .mx_AvatarSetting_avatar {
-    width: $font-88px;
-    height: $font-88px;
-    margin-left: 13px;
+    width: 90px;
+    min-width: 90px; // so it doesn't get crushed by the flexbox in languages with longer words
+    height: 90px;
+    margin-top: 8px;
     position: relative;
 
+    .mx_AvatarSetting_hover {
+        transition: opacity $hover-transition;
+
+        // position to place the hover bg over the entire thing
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+
+        pointer-events: none; // let the pointer fall through the underlying thing
+
+        line-height: 90px;
+        text-align: center;
+
+        > span {
+            color: #fff; // hardcoded to contrast with background
+            position: relative; // tricks the layout engine into putting this on top of the bg
+            font-weight: 500;
+        }
+
+        .mx_AvatarSetting_hoverBg {
+            // absolute position to lazily fill the entire container
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            left: 0;
+            right: 0;
+
+            opacity: 0.5;
+            background-color: $settings-profile-overlay-placeholder-fg-color;
+            border-radius: 90px;
+        }
+    }
+
+    &.mx_AvatarSetting_avatar_hovering .mx_AvatarSetting_hover {
+        opacity: 1;
+    }
+
+    &:not(.mx_AvatarSetting_avatar_hovering) .mx_AvatarSetting_hover {
+        opacity: 0;
+    }
+
     & > * {
-        width: $font-88px;
         box-sizing: border-box;
     }
 
@@ -30,7 +73,7 @@ limitations under the License.
     }
 
     .mx_AccessibleButton.mx_AccessibleButton_kind_link_sm {
-        color: $button-danger-bg-color;
+        width: 100%;
     }
 
     & > img {
@@ -41,8 +84,10 @@ limitations under the License.
     & > img,
     .mx_AvatarSetting_avatarPlaceholder {
         display: block;
-        height: $font-88px;
-        border-radius: 4px;
+        height: 90px;
+        width: inherit;
+        border-radius: 90px;
+        cursor: pointer;
     }
 
     .mx_AvatarSetting_avatarPlaceholder::before {
@@ -58,6 +103,29 @@ limitations under the License.
         left: 0;
         right: 0;
     }
+
+    .mx_AvatarSetting_uploadButton {
+        width: 32px;
+        height: 32px;
+        border-radius: 32px;
+        background-color: $settings-profile-button-bg-color;
+
+        position: absolute;
+        bottom: 0;
+        right: 0;
+    }
+
+    .mx_AvatarSetting_uploadButton::before {
+        content: "";
+        display: block;
+        width: 100%;
+        height: 100%;
+        mask-repeat: no-repeat;
+        mask-position: center;
+        mask-size: 55%;
+        background-color: $settings-profile-button-fg-color;
+        mask-image: url('$(res)/img/feather-customised/edit.svg');
+    }
 }
 
 .mx_AvatarSetting_avatar .mx_AvatarSetting_avatarPlaceholder {

res/css/views/settings/_ProfileSettings.scss

@@ -1,5 +1,5 @@
 /*
-Copyright 2019 New Vector Ltd
+Copyright 2019, 2020 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.
@@ -20,6 +20,13 @@ limitations under the License.
 
 .mx_ProfileSettings_controls {
     flex-grow: 1;
+    margin-right: 54px;
+
+    // We put the header under the controls with some minor styling to cheat
+    // alignment of the field with the avatar
+    .mx_SettingsTab_subheading {
+        margin-top: 0;
+    }
 }
 
 .mx_ProfileSettings_controls .mx_Field #profileTopic {
@@ -41,3 +48,17 @@ limitations under the License.
 .mx_ProfileSettings_avatarUpload {
     display: none;
 }
+
+.mx_ProfileSettings_profileForm {
+    @mixin mx_Settings_fullWidthField;
+    border-bottom: 1px solid $menu-border-color;
+}
+
+.mx_ProfileSettings_buttons {
+    margin-top: 10px; // 18px is already accounted for by the <p> above the buttons
+    margin-bottom: 28px;
+
+    > .mx_AccessibleButton_kind_link {
+        padding-left: 0; // to align with left side
+    }
+}

res/css/views/settings/tabs/user/_GeneralUserSettingsTab.scss

@@ -22,6 +22,13 @@ limitations under the License.
     margin-top: 0;
 }
 
+// TODO: Make this selector less painful
+.mx_GeneralUserSettingsTab_accountSection .mx_SettingsTab_subheading:nth-child(n + 1),
+.mx_GeneralUserSettingsTab_discovery .mx_SettingsTab_subheading:nth-child(n + 2),
+.mx_SetIdServer .mx_SettingsTab_subheading {
+    margin-top: 24px;
+}
+
 .mx_GeneralUserSettingsTab_accountSection .mx_Spinner,
 .mx_GeneralUserSettingsTab_discovery .mx_Spinner {
     // Move the spinner to the left side of the container (default center)

res/css/views/voip/_CallContainer.scss

@@ -23,9 +23,16 @@ limitations under the License.
     z-index: 100;
     box-shadow: 0px 14px 24px rgba(0, 0, 0, 0.08);
 
-    cursor: pointer;
+    // Disable pointer events for Jitsi widgets to function. Direct
+    // calls have their own cursor and behaviour, but we need to make
+    // sure the cursor hits the iframe for Jitsi which will be at a
+    // different level.
+    pointer-events: none;
 
     .mx_CallPreview {
+        pointer-events: initial; // restore pointer events so the user can leave/interact
+        cursor: pointer;
+
         .mx_VideoView {
             width: 350px;
         }
@@ -37,7 +44,7 @@ limitations under the License.
     }
 
     .mx_AppTile_persistedWrapper div {
-        min-width: 300px;
+        min-width: 350px;
     }
 
     .mx_IncomingCallBox {
@@ -45,11 +52,14 @@ limitations under the License.
         background-color: $primary-bg-color;
         padding: 8px;
 
+        pointer-events: initial; // restore pointer events so the user can accept/decline
+        cursor: pointer;
+
         .mx_IncomingCallBox_CallerInfo {
             display: flex;
             direction: row;
 
-            img {
+            img, .mx_BaseAvatar_initial {
                 margin: 8px;
             }
 

res/img/element-desktop-logo.svg

@@ -0,0 +1,157 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_dd)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.1438 2.34375H7.85617C5.93938 2.34375 5.24431 2.54333 4.54356 2.91809C3.84281 3.29286 3.29286 3.84281 2.91809 4.54356C2.54333 5.24431 2.34375 5.93938 2.34375 7.85617V16.1438C2.34375 18.0606 2.54333 18.7557 2.91809 19.4564C3.29286 20.1572 3.84281 20.7071 4.54356 21.0819C5.24431 21.4567 5.93938 21.6562 7.85617 21.6562H16.1438C18.0606 21.6562 18.7557 21.4567 19.4564 21.0819C20.1572 20.7071 20.7071 20.1572 21.0819 19.4564C21.4567 18.7557 21.6562 18.0606 21.6562 16.1438V7.85617C21.6562 5.93938 21.4567 5.24431 21.0819 4.54356C20.7071 3.84281 20.1572 3.29286 19.4564 2.91809C18.7557 2.54333 18.0606 2.34375 16.1438 2.34375Z" fill="url(#paint0_linear)"/>
+</g>
+<g filter="url(#filter1_ddddi)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.0969 6.01875C10.0969 5.56829 10.462 5.20312 10.9125 5.20312C13.9155 5.20312 16.35 7.63758 16.35 10.6406C16.35 11.0911 15.9848 11.4562 15.5344 11.4562C15.0839 11.4562 14.7187 11.0911 14.7187 10.6406C14.7187 8.53849 13.0146 6.83437 10.9125 6.83437C10.462 6.83437 10.0969 6.46921 10.0969 6.01875Z" fill="white"/>
+</g>
+<g filter="url(#filter2_ddddi)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.9031 17.9813C13.9031 18.4317 13.538 18.7969 13.0875 18.7969C10.0845 18.7969 7.65001 16.3624 7.65001 13.3594C7.65001 12.9089 8.01518 12.5437 8.46564 12.5437C8.9161 12.5437 9.28126 12.9089 9.28126 13.3594C9.28126 15.4615 10.9854 17.1656 13.0875 17.1656C13.538 17.1656 13.9031 17.5308 13.9031 17.9813Z" fill="white"/>
+</g>
+<g filter="url(#filter3_ddddi)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.01875 13.9031C5.56829 13.9031 5.20312 13.538 5.20312 13.0875C5.20312 10.0845 7.63758 7.65001 10.6406 7.65001C11.0911 7.65001 11.4562 8.01518 11.4562 8.46564C11.4562 8.91609 11.0911 9.28126 10.6406 9.28126C8.53849 9.28126 6.83437 10.9854 6.83437 13.0875C6.83437 13.538 6.46921 13.9031 6.01875 13.9031Z" fill="white"/>
+</g>
+<g filter="url(#filter4_ddddi)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.9812 10.0969C18.4317 10.0969 18.7969 10.462 18.7969 10.9125C18.7969 13.9155 16.3624 16.35 13.3594 16.35C12.9089 16.35 12.5437 15.9848 12.5437 15.5344C12.5437 15.0839 12.9089 14.7187 13.3594 14.7187C15.4615 14.7187 17.1656 13.0146 17.1656 10.9125C17.1656 10.462 17.5308 10.0969 17.9812 10.0969Z" fill="white"/>
+</g>
+<defs>
+<filter id="filter0_dd" x="1.54688" y="1.92188" width="20.9062" height="20.9062" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset dy="0.375"/>
+<feGaussianBlur stdDeviation="0.398438"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.09 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset dy="0.234375"/>
+<feGaussianBlur stdDeviation="0.28125"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="effect1_dropShadow" result="effect2_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow" result="shape"/>
+</filter>
+<filter id="filter1_ddddi" x="6.95624" y="4.03125" width="12.5344" height="12.5344" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset dy="0.328125"/>
+<feGaussianBlur stdDeviation="0.515625"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset dy="1.26562"/>
+<feGaussianBlur stdDeviation="0.632812"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/>
+<feBlend mode="normal" in2="effect1_dropShadow" result="effect2_dropShadow"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset dy="1.96875"/>
+<feGaussianBlur stdDeviation="1.57031"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/>
+<feBlend mode="overlay" in2="effect2_dropShadow" result="effect3_dropShadow"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset dx="-0.1875" dy="0.421875"/>
+<feGaussianBlur stdDeviation="0.339844"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/>
+<feBlend mode="overlay" in2="effect3_dropShadow" result="effect4_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect4_dropShadow" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-0.679688"/>
+<feGaussianBlur stdDeviation="0.269531"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.678431 0 0 0 0 0.819608 0 0 0 0 0.726431 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect5_innerShadow"/>
+</filter>
+<filter id="filter2_ddddi" x="4.5094" y="11.3719" width="12.5344" height="12.5344" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset dy="0.328125"/>
+<feGaussianBlur stdDeviation="0.515625"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset dy="1.26562"/>
+<feGaussianBlur stdDeviation="0.632812"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/>
+<feBlend mode="normal" in2="effect1_dropShadow" result="effect2_dropShadow"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset dy="1.96875"/>
+<feGaussianBlur stdDeviation="1.57031"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/>
+<feBlend mode="overlay" in2="effect2_dropShadow" result="effect3_dropShadow"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset dx="-0.1875" dy="0.421875"/>
+<feGaussianBlur stdDeviation="0.339844"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/>
+<feBlend mode="overlay" in2="effect3_dropShadow" result="effect4_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect4_dropShadow" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-0.679688"/>
+<feGaussianBlur stdDeviation="0.269531"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.678431 0 0 0 0 0.819608 0 0 0 0 0.726431 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect5_innerShadow"/>
+</filter>
+<filter id="filter3_ddddi" x="2.0625" y="6.47815" width="12.5344" height="12.5344" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset dy="0.328125"/>
+<feGaussianBlur stdDeviation="0.515625"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset dy="1.26562"/>
+<feGaussianBlur stdDeviation="0.632812"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/>
+<feBlend mode="normal" in2="effect1_dropShadow" result="effect2_dropShadow"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset dy="1.96875"/>
+<feGaussianBlur stdDeviation="1.57031"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/>
+<feBlend mode="overlay" in2="effect2_dropShadow" result="effect3_dropShadow"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset dx="-0.1875" dy="0.421875"/>
+<feGaussianBlur stdDeviation="0.339844"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/>
+<feBlend mode="overlay" in2="effect3_dropShadow" result="effect4_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect4_dropShadow" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-0.679688"/>
+<feGaussianBlur stdDeviation="0.269531"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.678431 0 0 0 0 0.819608 0 0 0 0 0.726431 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect5_innerShadow"/>
+</filter>
+<filter id="filter4_ddddi" x="9.40314" y="8.92499" width="12.5344" height="12.5344" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset dy="0.328125"/>
+<feGaussianBlur stdDeviation="0.515625"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset dy="1.26562"/>
+<feGaussianBlur stdDeviation="0.632812"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/>
+<feBlend mode="normal" in2="effect1_dropShadow" result="effect2_dropShadow"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset dy="1.96875"/>
+<feGaussianBlur stdDeviation="1.57031"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/>
+<feBlend mode="overlay" in2="effect2_dropShadow" result="effect3_dropShadow"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset dx="-0.1875" dy="0.421875"/>
+<feGaussianBlur stdDeviation="0.339844"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/>
+<feBlend mode="overlay" in2="effect3_dropShadow" result="effect4_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect4_dropShadow" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-0.679688"/>
+<feGaussianBlur stdDeviation="0.269531"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.678431 0 0 0 0 0.819608 0 0 0 0 0.726431 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect5_innerShadow"/>
+</filter>
+<linearGradient id="paint0_linear" x1="12" y1="2.34375" x2="12" y2="21.6562" gradientUnits="userSpaceOnUse">
+<stop stop-color="#1ED9A3"/>
+<stop offset="1" stop-color="#0DBD8B"/>
+</linearGradient>
+</defs>
+</svg>

res/img/element-icons/room/invite.svg

@@ -1,3 +1,3 @@
-<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M28 8.5C28 12.0899 25.0899 15 21.5 15C17.9101 15 15 12.0899 15 8.5C15 4.91015 17.9101 2 21.5 2C25.0899 2 28 4.91015 28 8.5ZM22.5 5C22.5 4.44772 22.0523 4 21.5 4C20.9477 4 20.5 4.44772 20.5 5V7.6286H17.9C17.4029 7.6286 17 8.02089 17 8.5048C17 8.98871 17.4029 9.381 17.9 9.381H20.5V12.0096C20.5 12.5619 20.9477 13.0096 21.5 13.0096C22.0523 13.0096 22.5 12.5619 22.5 12.0096V9.381H25.1C25.5971 9.381 26 8.98871 26 8.5048C26 8.02089 25.5971 7.6286 25.1 7.6286H22.5V5ZM21.5 16C23.6351 16 25.5619 15.1078 26.9278 13.6759C26.9755 14.1107 27 14.5525 27 15C27 18.9261 25.1146 22.4117 22.1998 24.601V24.6009C20.348 25.9918 18.0808 26.8595 15.6175 26.9844C15.413 26.9948 15.2071 27 15 27C8.37258 27 3 21.6274 3 15C3 8.37258 8.37258 3 15 3C15.4475 3 15.8893 3.0245 16.3241 3.07223C14.929 4.40304 14.0462 6.26631 14.0018 8.336C12.8183 8.89737 12 10.1031 12 11.5C12 13.433 13.567 15 15.5 15C16.0892 15 16.6445 14.8544 17.1316 14.5972C18.3618 15.4802 19.8702 16 21.5 16ZM14.9998 24.6C17.5942 24.6 19.9482 23.5709 21.6759 21.8986C20.6074 19.2607 18.0209 17.4 14.9998 17.4C11.9787 17.4 9.39221 19.2607 8.32376 21.8986C10.0514 23.5709 12.4054 24.6 14.9998 24.6Z" fill="white"/>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.1001 9C18.7779 9 18.5168 8.73883 18.5168 8.41667V6.08333H16.1834C15.8613 6.08333 15.6001 5.82217 15.6001 5.5C15.6001 5.17783 15.8613 4.91667 16.1834 4.91667H18.5168V2.58333C18.5168 2.26117 18.7779 2 19.1001 2C19.4223 2 19.6834 2.26117 19.6834 2.58333V4.91667H22.0168C22.3389 4.91667 22.6001 5.17783 22.6001 5.5C22.6001 5.82217 22.3389 6.08333 22.0168 6.08333H19.6834V8.41667C19.6834 8.73883 19.4223 9 19.1001 9ZM19.6001 11C20.0669 11 20.5212 10.9467 20.9574 10.8458C21.1161 11.5383 21.2 12.2594 21.2 13C21.2 16.1409 19.6917 18.9294 17.3598 20.6808V20.6807C16.0014 21.7011 14.3635 22.3695 12.5815 22.5505C12.2588 22.5832 11.9314 22.6 11.6 22.6C6.29807 22.6 2 18.302 2 13C2 7.69809 6.29807 3.40002 11.6 3.40002C12.3407 3.40002 13.0618 3.48391 13.7543 3.64268C13.6534 4.07884 13.6001 4.53319 13.6001 5C13.6001 8.31371 16.2864 11 19.6001 11ZM11.5999 20.68C13.6754 20.68 15.5585 19.8567 16.9407 18.5189C16.0859 16.4086 14.0167 14.92 11.5998 14.92C9.18298 14.92 7.11378 16.4086 6.25901 18.5189C7.64115 19.8567 9.52436 20.68 11.5999 20.68ZM11.7426 7.41172C10.3168 7.54168 9.2 8.74043 9.2 10.2C9.2 11.7464 10.4536 13 12 13C13.0308 13 13.9315 12.443 14.4176 11.6135C13.0673 10.6058 12.0929 9.12248 11.7426 7.41172Z" fill="black"/>
 </svg>

res/themes/dark/css/_dark.scss

@@ -39,7 +39,7 @@ $info-plinth-fg-color: #888;
 
 $preview-bar-bg-color: $header-panel-bg-color;
 
-$tagpanel-bg-color: rgba(38, 39, 43, 0.82);
+$groupFilterPanel-bg-color: rgba(38, 39, 43, 0.82);
 $inverted-bg-color: $base-color;
 
 // used by AddressSelector
@@ -87,11 +87,10 @@ $dialog-background-bg-color: $header-panel-bg-color;
 $lightbox-background-bg-color: #000;
 
 $settings-grey-fg-color: #a2a2a2;
-$settings-profile-placeholder-bg-color: #e7e7e7;
-$settings-profile-overlay-bg-color: #000;
-$settings-profile-overlay-placeholder-bg-color: transparent;
-$settings-profile-overlay-fg-color: #fff;
+$settings-profile-placeholder-bg-color: #21262c;
 $settings-profile-overlay-placeholder-fg-color: #454545;
+$settings-profile-button-bg-color: #e7e7e7;
+$settings-profile-button-fg-color: $settings-profile-overlay-placeholder-fg-color;
 $settings-subsection-fg-color: $text-secondary-color;
 
 $topleftmenu-color: $text-primary-color;
@@ -99,7 +98,7 @@ $roomheader-color: $text-primary-color;
 $roomheader-bg-color: $bg-color;
 $roomheader-addroom-bg-color: rgba(92, 100, 112, 0.3);
 $roomheader-addroom-fg-color: $text-primary-color;
-$tagpanel-button-color: $header-panel-text-primary-color;
+$groupFilterPanel-button-color: $header-panel-text-primary-color;
 $groupheader-button-color: $header-panel-text-primary-color;
 $rightpanel-button-color: $header-panel-text-primary-color;
 $icon-button-color: #8E99A4;
@@ -119,7 +118,7 @@ $roomlist-bg-color: rgba(33, 38, 44, 0.90);
 $roomlist-header-color: $tertiary-fg-color;
 $roomsublist-divider-color: $primary-fg-color;
 
-$tagpanel-divider-color: $roomlist-header-color;
+$groupFilterPanel-divider-color: $roomlist-header-color;
 
 $roomtile-preview-color: $secondary-fg-color;
 $roomtile-default-badge-bg-color: #61708b;
@@ -188,7 +187,7 @@ $reaction-row-button-selected-border-color: $accent-color;
 
 $kbd-border-color: #000000;
 
-$tooltip-timeline-bg-color: $tagpanel-bg-color;
+$tooltip-timeline-bg-color: $groupFilterPanel-bg-color;
 $tooltip-timeline-fg-color: #ffffff;
 
 $interactive-tooltip-bg-color: $base-color;
@@ -203,7 +202,7 @@ $appearance-tab-border-color: $room-highlight-color;
 
 // blur amounts for left left panel (only for element theme, used in _mods.scss)
 $roomlist-background-blur-amount: 60px;
-$tagpanel-background-blur-amount: 30px;
+$groupFilterPanel-background-blur-amount: 30px;
 
 $composer-shadow-color: rgba(0, 0, 0, 0.28);
 

res/themes/dark/css/dark.scss

@@ -3,7 +3,7 @@
 @import "../../light/css/_fonts.scss";
 @import "../../light/css/_light.scss";
 // important this goes before _mods,
-// as $tagpanel-background-blur-amount and
+// as $groupFilterPanel-background-blur-amount and
 // $roomlist-background-blur-amount
 // are overridden in _dark.scss
 @import "_dark.scss";

res/themes/legacy-dark/css/_legacy-dark.scss

@@ -37,8 +37,8 @@ $info-plinth-fg-color: #888;
 
 $preview-bar-bg-color: $header-panel-bg-color;
 
-$tagpanel-bg-color: $base-color;
-$inverted-bg-color: $tagpanel-bg-color;
+$groupFilterPanel-bg-color: $base-color;
+$inverted-bg-color: $groupFilterPanel-bg-color;
 
 // used by AddressSelector
 $selected-color: $room-highlight-color;
@@ -86,17 +86,16 @@ $lightbox-background-bg-color: #000;
 
 $settings-grey-fg-color: #a2a2a2;
 $settings-profile-placeholder-bg-color: #e7e7e7;
-$settings-profile-overlay-bg-color: #000;
-$settings-profile-overlay-placeholder-bg-color: transparent;
-$settings-profile-overlay-fg-color: #fff;
 $settings-profile-overlay-placeholder-fg-color: #454545;
+$settings-profile-button-bg-color: #e7e7e7;
+$settings-profile-button-fg-color: $settings-profile-overlay-placeholder-fg-color;
 $settings-subsection-fg-color: $text-secondary-color;
 
 $topleftmenu-color: $text-primary-color;
 $roomheader-color: $text-primary-color;
 $roomheader-addroom-bg-color: #3c4556; // $search-placeholder-color at 0.5 opacity
 $roomheader-addroom-fg-color: $text-primary-color;
-$tagpanel-button-color: $header-panel-text-primary-color;
+$groupFilterPanel-button-color: $header-panel-text-primary-color;
 $groupheader-button-color: $header-panel-text-primary-color;
 $rightpanel-button-color: $header-panel-text-primary-color;
 $icon-button-color: $header-panel-text-primary-color;
@@ -116,7 +115,7 @@ $roomlist-bg-color: $header-panel-bg-color;
 
 $roomsublist-divider-color: $primary-fg-color;
 
-$tagpanel-divider-color: $roomlist-header-color;
+$groupFilterPanel-divider-color: $roomlist-header-color;
 
 $roomtile-preview-color: #9e9e9e;
 $roomtile-default-badge-bg-color: #61708b;
@@ -183,7 +182,7 @@ $reaction-row-button-selected-border-color: $accent-color;
 
 $kbd-border-color: #000000;
 
-$tooltip-timeline-bg-color: $tagpanel-bg-color;
+$tooltip-timeline-bg-color: $groupFilterPanel-bg-color;
 $tooltip-timeline-fg-color: #ffffff;
 
 $interactive-tooltip-bg-color: $base-color;

res/themes/legacy-light/css/_legacy-light.scss

@@ -67,8 +67,8 @@ $preview-bar-bg-color: #f7f7f7;
 $secondary-accent-color: #f2f5f8;
 $tertiary-accent-color: #d3efe1;
 
-$tagpanel-bg-color: #27303a;
-$inverted-bg-color: $tagpanel-bg-color;
+$groupFilterPanel-bg-color: #27303a;
+$inverted-bg-color: $groupFilterPanel-bg-color;
 
 // used by RoomDirectory permissions
 $plinth-bg-color: $secondary-accent-color;
@@ -144,10 +144,9 @@ $blockquote-fg-color: #777;
 
 $settings-grey-fg-color: #a2a2a2;
 $settings-profile-placeholder-bg-color: #e7e7e7;
-$settings-profile-overlay-bg-color: #000;
-$settings-profile-overlay-placeholder-bg-color: transparent;
-$settings-profile-overlay-fg-color: #fff;
 $settings-profile-overlay-placeholder-fg-color: #2e2f32;
+$settings-profile-button-bg-color: #e7e7e7;
+$settings-profile-button-fg-color: $settings-profile-overlay-placeholder-fg-color;
 $settings-subsection-fg-color: #61708b;
 
 $voip-decline-color: #f48080;
@@ -163,7 +162,7 @@ $roomheader-color: #45474a;
 $roomheader-bg-color: $primary-bg-color;
 $roomheader-addroom-bg-color: #91a1c0;
 $roomheader-addroom-fg-color: $accent-fg-color;
-$tagpanel-button-color: #91a1c0;
+$groupFilterPanel-button-color: #91a1c0;
 $groupheader-button-color: #91a1c0;
 $rightpanel-button-color: #91a1c0;
 $icon-button-color: #91a1c0;
@@ -183,7 +182,7 @@ $roomlist-bg-color: $header-panel-bg-color;
 $roomlist-header-color: $primary-fg-color;
 $roomsublist-divider-color: $primary-fg-color;
 
-$tagpanel-divider-color: $roomlist-header-color;
+$groupFilterPanel-divider-color: $roomlist-header-color;
 
 $roomtile-preview-color: #9e9e9e;
 $roomtile-default-badge-bg-color: #61708b;
@@ -306,7 +305,7 @@ $reaction-row-button-selected-border-color: $accent-color;
 
 $kbd-border-color: $reaction-row-button-border-color;
 
-$tooltip-timeline-bg-color: $tagpanel-bg-color;
+$tooltip-timeline-bg-color: $groupFilterPanel-bg-color;
 $tooltip-timeline-fg-color: #ffffff;
 
 $interactive-tooltip-bg-color: #27303a;

res/themes/light-custom/css/_custom.scss

@@ -49,7 +49,7 @@ $roomtile-selected-bg-color: var(--roomlist-highlights-color);
 //
 // --sidebar-color
 $interactive-tooltip-bg-color: var(--sidebar-color);
-$tagpanel-bg-color: var(--sidebar-color);
+$groupFilterPanel-bg-color: var(--sidebar-color);
 $tooltip-timeline-bg-color: var(--sidebar-color);
 $dialog-backdrop-color: var(--sidebar-color-50pct);
 $roomlist-button-bg-color: var(--sidebar-color-15pct);
@@ -124,15 +124,15 @@ $pinned-unread-color: var(--warning-color);
 $warning-color: var(--warning-color);
 $button-danger-disabled-bg-color: var(--warning-color-50pct); // still needs alpha at 0.5
 //
-// --username colors
-$username-variant1-color: var(--username-colors_1, $username-variant1-color);
-$username-variant2-color: var(--username-colors_2, $username-variant2-color);
-$username-variant3-color: var(--username-colors_3, $username-variant3-color);
-$username-variant4-color: var(--username-colors_4, $username-variant4-color);
-$username-variant5-color: var(--username-colors_5, $username-variant5-color);
-$username-variant6-color: var(--username-colors_6, $username-variant6-color);
-$username-variant7-color: var(--username-colors_7, $username-variant7-color);
-$username-variant8-color: var(--username-colors_8, $username-variant8-color);
+// --username colors (which use a 0-based index)
+$username-variant1-color: var(--username-colors_0, $username-variant1-color);
+$username-variant2-color: var(--username-colors_1, $username-variant2-color);
+$username-variant3-color: var(--username-colors_2, $username-variant3-color);
+$username-variant4-color: var(--username-colors_3, $username-variant4-color);
+$username-variant5-color: var(--username-colors_4, $username-variant5-color);
+$username-variant6-color: var(--username-colors_5, $username-variant6-color);
+$username-variant7-color: var(--username-colors_6, $username-variant7-color);
+$username-variant8-color: var(--username-colors_7, $username-variant8-color);
 //
 // --timeline-highlights-color
 $event-selected-color: var(--timeline-highlights-color);

res/themes/light/css/_light.scss

@@ -62,7 +62,7 @@ $preview-bar-bg-color: #f7f7f7;
 $secondary-accent-color: #f2f5f8;
 $tertiary-accent-color: #d3efe1;
 
-$tagpanel-bg-color: rgba(232, 232, 232, 0.77);
+$groupFilterPanel-bg-color: rgba(232, 232, 232, 0.77);
 
 // used by RoomDirectory permissions
 $plinth-bg-color: $secondary-accent-color;
@@ -137,11 +137,10 @@ $blockquote-bar-color: #ddd;
 $blockquote-fg-color: #777;
 
 $settings-grey-fg-color: #a2a2a2;
-$settings-profile-placeholder-bg-color: #e7e7e7;
-$settings-profile-overlay-bg-color: #000;
-$settings-profile-overlay-placeholder-bg-color: transparent;
-$settings-profile-overlay-fg-color: #fff;
+$settings-profile-placeholder-bg-color: #f4f6fa;
 $settings-profile-overlay-placeholder-fg-color: #2e2f32;
+$settings-profile-button-bg-color: #e7e7e7;
+$settings-profile-button-fg-color: $settings-profile-overlay-placeholder-fg-color;
 $settings-subsection-fg-color: #61708b;
 
 $voip-decline-color: #f48080;
@@ -157,7 +156,7 @@ $roomheader-color: #45474a;
 $roomheader-bg-color: $primary-bg-color;
 $roomheader-addroom-bg-color: rgba(92, 100, 112, 0.2);
 $roomheader-addroom-fg-color: #5c6470;
-$tagpanel-button-color: #91A1C0;
+$groupFilterPanel-button-color: #91A1C0;
 $groupheader-button-color: #91A1C0;
 $rightpanel-button-color: #91A1C0;
 $icon-button-color: #C1C6CD;
@@ -177,7 +176,7 @@ $roomlist-bg-color: rgba(245, 245, 245, 0.90);
 $roomlist-header-color: $tertiary-fg-color;
 $roomsublist-divider-color: $primary-fg-color;
 
-$tagpanel-divider-color: $roomlist-header-color;
+$groupFilterPanel-divider-color: $roomlist-header-color;
 
 $roomtile-preview-color: $secondary-fg-color;
 $roomtile-default-badge-bg-color: #61708b;
@@ -321,7 +320,7 @@ $appearance-tab-border-color: $input-darker-bg-color;
 
 // blur amounts for left left panel (only for element theme, used in _mods.scss)
 $roomlist-background-blur-amount: 40px;
-$tagpanel-background-blur-amount: 20px;
+$groupFilterPanel-background-blur-amount: 20px;
 
 $composer-shadow-color: rgba(0, 0, 0, 0.04);
 

res/themes/light/css/_mods.scss

@@ -6,14 +6,14 @@
 
 @supports (backdrop-filter: none) {
     .mx_LeftPanel {
-        background-image: var(--avatar-url);
+        background-image: var(--avatar-url, unset);
         background-repeat: no-repeat;
         background-size: cover;
         background-position: left top;
     }
 
-    .mx_TagPanel {
-        backdrop-filter: blur($tagpanel-background-blur-amount);
+    .mx_GroupFilterPanel {
+        backdrop-filter: blur($groupFilterPanel-background-blur-amount);
     }
 
     .mx_LeftPanel .mx_LeftPanel_roomListContainer {