Merge tag 'v3.38.0' into sc

* Add permission dropdown for sending reactions ([\matrix-org#7492](matrix-org#7492)). Fixes element-hq/element-web#20450.
* Ship maximised widgets and remove feature flag ([\matrix-org#7509](matrix-org#7509)).
* Properly maintain aspect ratio of inline images ([\matrix-org#7503](matrix-org#7503)).
* Add zoom buttons to the location view ([\matrix-org#7482](matrix-org#7482)).
* Remove bubble from around location events ([\matrix-org#7459](matrix-org#7459)). Fixes element-hq/element-web#20323.
* Disable "Publish this room" option in invite only rooms ([\matrix-org#7441](matrix-org#7441)). Fixes element-hq/element-web#6596. Contributed by @aaronraimist.
* Give secret key field an `id` ([\matrix-org#7489](matrix-org#7489)). Fixes element-hq/element-web#20390. Contributed by @SimonBrandner.
* Display a tooltip when you hover over a location ([\matrix-org#7472](matrix-org#7472)).
* Open map in a dialog when it is clicked ([\matrix-org#7465](matrix-org#7465)).
* a11y - wrap notification level radios in fieldsets ([\matrix-org#7471](matrix-org#7471)).
* Wrap inputs in fieldsets in Space visibility settings ([\matrix-org#7350](matrix-org#7350)).
* History based navigation with new right panel store ([\matrix-org#7398](matrix-org#7398)). Fixes element-hq/element-web#19686 element-hq/element-web#19660 and element-hq/element-web#19634.
* Associate room alias warning with public option in settings ([\matrix-org#7430](matrix-org#7430)).
* Disable quick reactions button when no permissions ([\matrix-org#7412](matrix-org#7412)). Fixes element-hq/element-web#20270.
* Allow opening a map view in OpenStreetMap ([\matrix-org#7428](matrix-org#7428)).
* Display the user's avatar when they shared their location ([\matrix-org#7424](matrix-org#7424)).
* Remove the Forward and Share buttons for location messages only ([\matrix-org#7423](matrix-org#7423)).
* Add configuration to disable relative date markers in timeline ([\matrix-org#7405](matrix-org#7405)).
* Space preferences for whether or not you see DMs in a Space ([\matrix-org#7250](matrix-org#7250)). Fixes element-hq/element-web#19529 and element-hq/element-web#19955.
* Have LocalEchoWrapper emit updates so the app can react faster ([\matrix-org#7358](matrix-org#7358)). Fixes element-hq/element-web#19749.
* Use semantic heading on dialog component ([\matrix-org#7383](matrix-org#7383)).
* Add `/jumptodate` slash command ([\matrix-org#7372](matrix-org#7372)). Fixes element-hq/element-web#7677.
* Update room context menu copy ([\matrix-org#7361](matrix-org#7361)). Fixes element-hq/element-web#20133.
* Use lazy rendering in the AddExistingToSpaceDialog ([\matrix-org#7369](matrix-org#7369)). Fixes element-hq/element-web#18784.
* Tweak FacePile tooltip to include whether or not you are included ([\matrix-org#7367](matrix-org#7367)). Fixes element-hq/element-web#17278.
* Fix wrongly wrapping code blocks, breaking line numbers ([\matrix-org#7507](matrix-org#7507)). Fixes element-hq/element-web#20316.
* Set header buttons to no phase when right panel is closed ([\matrix-org#7506](matrix-org#7506)).
* Fix active Jitsi calls (and other active widgets) not being visible on screen, by showing them in PiP if they are not visible in any other container ([\matrix-org#7435](matrix-org#7435)). Fixes element-hq/element-web#15169 and element-hq/element-web#20275.
* Fix layout of message bubble preview in settings ([\matrix-org#7497](matrix-org#7497)).
* Prevent mutations of js-sdk owned objects as it breaks accountData ([\matrix-org#7504](matrix-org#7504)). Fixes matrix-org/element-web-rageshakes#7822.
* fallback properly with pluralized strings ([\matrix-org#7495](matrix-org#7495)). Fixes element-hq/element-web#20455.
* Consider continuations when resolving whether a tile is last in section ([\matrix-org#7461](matrix-org#7461)). Fixes element-hq/element-web#20368 and element-hq/element-web#20369.
* Fix read receipts and sent indicators for bubble layout ([\matrix-org#7460](matrix-org#7460)). Fixes element-hq/element-web#18298 and element-hq/element-web#20345.
* null-guard dataset mxTheme to prevent html exports from exploding ([\matrix-org#7493](matrix-org#7493)). Fixes element-hq/element-web#20453.
* Fix avatar container overlapping give feedback cta ([\matrix-org#7491](matrix-org#7491)). Fixes matrix-org/element-web-rageshakes#7987.
* Fix jump to bottom button working when on a permalink ([\matrix-org#7494](matrix-org#7494)). Fixes element-hq/element-web#19813.
* Remove the Description from the location picker ([\matrix-org#7485](matrix-org#7485)).
* Fix look of the untrusted device dialog ([\matrix-org#7487](matrix-org#7487)). Fixes element-hq/element-web#20447. Contributed by @SimonBrandner.
* Hide maximise button in the sticker picker  ([\matrix-org#7488](matrix-org#7488)). Fixes element-hq/element-web#20443. Contributed by @SimonBrandner.
* Fix space ordering to match newer spec ([\matrix-org#7481](matrix-org#7481)).
* Fix typing notification colors ([\matrix-org#7490](matrix-org#7490)). Fixes element-hq/element-web#20144. Contributed by @SimonBrandner.
* fix fallback for pluralized strings ([\matrix-org#7480](matrix-org#7480)). Fixes element-hq/element-web#20426.
* Fix right panel soft crashes chat rooms ([\matrix-org#7479](matrix-org#7479)). Fixes element-hq/element-web#20433.
* update yarn.lock and i18n ([\matrix-org#7476](matrix-org#7476)). Fixes element-hq/element-web#20426 and element-hq/element-web#20423.
* Don't send typing notification when restoring composer draft ([\matrix-org#7477](matrix-org#7477)). Fixes element-hq/element-web#20424.
* Fix room joining spinner being incorrect if you change room mid-join ([\matrix-org#7473](matrix-org#7473)).
* Only return the approved widget capabilities instead of accepting all requested capabilities ([\matrix-org#7454](matrix-org#7454)). Contributed by @dhenneke.
* Fix quoting messages from the search view ([\matrix-org#7466](matrix-org#7466)). Fixes element-hq/element-web#20353.
* Attribute fallback i18n strings with lang attribute ([\matrix-org#7323](matrix-org#7323)).
* Fix spotlight cmd-k wrongly expanding left panel ([\matrix-org#7463](matrix-org#7463)). Fixes element-hq/element-web#20399.
* Fix room_id check when adding user widgets ([\matrix-org#7448](matrix-org#7448)). Fixes element-hq/element-web#19382. Contributed by @bink.
* Add new line in settings label ([\matrix-org#7451](matrix-org#7451)). Fixes element-hq/element-web#20365.
* Fix handling incoming redactions in EventIndex ([\matrix-org#7443](matrix-org#7443)). Fixes element-hq/element-web#19326.
* Fix room alias address isn't checked for validity before being shown as added ([\matrix-org#7107](matrix-org#7107)). Fixes element-hq/element-web#19609. Contributed by @Palid.
* Call view accessibility fixes ([\matrix-org#7439](matrix-org#7439)). Fixes element-hq/element-web#18516.
* Fix offscreen canvas breaking with split-brained firefox support ([\matrix-org#7440](matrix-org#7440)).
* Removed red shield in forwarding preview. ([\matrix-org#7447](matrix-org#7447)). Contributed by @ankur12-1610.
* Wrap status message ([\matrix-org#7325](matrix-org#7325)). Fixes element-hq/element-web#20092. Contributed by @SimonBrandner.
* Move hideSender logic into state so it causes re-render ([\matrix-org#7413](matrix-org#7413)). Fixes element-hq/element-web#18448.
* Fix dialpad positioning ([\matrix-org#7446](matrix-org#7446)). Fixes element-hq/element-web#20175. Contributed by @SimonBrandner.
* Hide non-functional list options on Suggested sublist ([\matrix-org#7410](matrix-org#7410)). Fixes element-hq/element-web#20252.
* Fix width overflow in mini composer overflow menu ([\matrix-org#7411](matrix-org#7411)). Fixes element-hq/element-web#20263.
* Fix being wrongly sent to Home space when creating/joining/leaving rooms ([\matrix-org#7418](matrix-org#7418)). Fixes matrix-org/element-web-rageshakes#7331 element-hq/element-web#20246 and element-hq/element-web#20240.
* Fix HTML Export where the data-mx-theme is `Light` not `light` ([\matrix-org#7415](matrix-org#7415)).
* Don't disable username/password fields whilst doing wk-lookup ([\matrix-org#7438](matrix-org#7438)). Fixes element-hq/element-web#20121.
* Prevent keyboard propagation out of context menus ([\matrix-org#7437](matrix-org#7437)). Fixes element-hq/element-web#20317.
* Fix nulls leaking into geo urls ([\matrix-org#7433](matrix-org#7433)).
* Fix zIndex of peristent apps in miniMode ([\matrix-org#7429](matrix-org#7429)).
* Space panel should watch spaces for space name changes ([\matrix-org#7432](matrix-org#7432)).
* Fix list formatting alternating on edit ([\matrix-org#7422](matrix-org#7422)). Fixes element-hq/element-web#20073. Contributed by @renancleyson-dev.
* Don't show `Testing small changes` without UIFeature.Feedback ([\matrix-org#7427](matrix-org#7427)). Fixes element-hq/element-web#20298.
* Fix invisible toggle space panel button ([\matrix-org#7426](matrix-org#7426)). Fixes element-hq/element-web#20279.
* Fix legacy breadcrumbs wrongly showing up ([\matrix-org#7425](matrix-org#7425)).
* Space Panel use SettingsStore instead of SpaceStore as source of truth ([\matrix-org#7404](matrix-org#7404)). Fixes element-hq/element-web#20250.
* Fix inline code block nowrap issue ([\matrix-org#7406](matrix-org#7406)).
* Fix notification badge for All Rooms space ([\matrix-org#7401](matrix-org#7401)). Fixes element-hq/element-web#20229.
* Show error if could not load space hierarchy ([\matrix-org#7399](matrix-org#7399)). Fixes element-hq/element-web#20221.
* Increase gap between ELS and the subsequent event to prevent overlap ([\matrix-org#7391](matrix-org#7391)). Fixes element-hq/element-web#18319.
* Fix list of members in space preview ([\matrix-org#7356](matrix-org#7356)). Fixes element-hq/element-web#19781.
* Fix sizing of e2e shield in bubble layout ([\matrix-org#7394](matrix-org#7394)). Fixes element-hq/element-web#19090.
* Fix bubble radius wrong when followed by a state event from same user ([\matrix-org#7393](matrix-org#7393)). Fixes element-hq/element-web#18982.
* Fix alignment between ELS and Events in bubble layout ([\matrix-org#7392](matrix-org#7392)). Fixes element-hq/element-web#19652 and element-hq/element-web#19057.
* Don't include the accuracy parameter in location events if accuracy could not be determined. ([\matrix-org#7375](matrix-org#7375)).
* Make compact layout only apply to Modern layout ([\matrix-org#7382](matrix-org#7382)). Fixes element-hq/element-web#18412.
* Pin qrcode to fix e2e verification bug ([\matrix-org#7378](matrix-org#7378)). Fixes element-hq/element-web#20188.
* Add internationalisation to progress strings in room export dialog ([\matrix-org#7385](matrix-org#7385)). Fixes element-hq/element-web#20208.
* Prevent escape to cancel edit from also scrolling to bottom ([\matrix-org#7380](matrix-org#7380)). Fixes element-hq/element-web#20182.
* Fix narrow mode composer buttons for polls labs ([\matrix-org#7386](matrix-org#7386)). Fixes element-hq/element-web#20067.
* Fix useUserStatusMessage exploding on unknown user ([\matrix-org#7365](matrix-org#7365)).
* Fix room join spinner in room list header ([\matrix-org#7364](matrix-org#7364)). Fixes element-hq/element-web#20139.
* Fix room search sometimes not opening spotlight ([\matrix-org#7363](matrix-org#7363)). Fixes matrix-org/element-web-rageshakes#7288.

.eslintrc.js

@@ -1,8 +1,11 @@
 module.exports = {
-    plugins: ["matrix-org"],
+    plugins: [
+        "matrix-org",
+    ],
     extends: [
         "plugin:matrix-org/babel",
         "plugin:matrix-org/react",
+        "plugin:matrix-org/a11y",
     ],
     env: {
         browser: true,
@@ -36,6 +39,24 @@ module.exports = {
                 "Use Media helper instead to centralise access for customisation.",
             ),
         ],
+
+        // There are too many a11y violations to fix at once
+        // Turn violated rules off until they are fixed
+        "jsx-a11y/alt-text": "off",
+        "jsx-a11y/aria-activedescendant-has-tabindex": "off",
+        "jsx-a11y/click-events-have-key-events": "off",
+        "jsx-a11y/iframe-has-title": "off",
+        "jsx-a11y/interactive-supports-focus": "off",
+        "jsx-a11y/label-has-associated-control": "off",
+        "jsx-a11y/media-has-caption": "off",
+        "jsx-a11y/mouse-events-have-key-events": "off",
+        "jsx-a11y/no-autofocus": "off",
+        "jsx-a11y/no-noninteractive-element-interactions": "off",
+        "jsx-a11y/no-noninteractive-element-to-interactive-role": "off",
+        "jsx-a11y/no-noninteractive-tabindex": "off",
+        "jsx-a11y/no-static-element-interactions": "off",
+        "jsx-a11y/role-supports-aria-props": "off",
+        "jsx-a11y/tabindex-no-positive": "off",
     },
     overrides: [{
         files: [

__mocks__/browser-request.js

@@ -1,10 +1,15 @@
 const en = require("../src/i18n/strings/en_EN");
 const de = require("../src/i18n/strings/de_DE");
+const lv = {
+    "Save": "Saglabāt",
+    "Uploading %(filename)s and %(count)s others|one": "Качване на %(filename)s и %(count)s друг",
+};
 
 // Mock the browser-request for the languageHandler tests to return
-// Fake languages.json containing references to en_EN and de_DE
+// Fake languages.json containing references to en_EN, de_DE and lv
 // en_EN.json
 // de_DE.json
+// lv.json - mock version with few translations, used to test fallback translation
 module.exports = jest.fn((opts, cb) => {
     const url = opts.url || opts.uri;
     if (url && url.endsWith("languages.json")) {
@@ -17,11 +22,17 @@ module.exports = jest.fn((opts, cb) => {
                 "fileName": "de_DE.json",
                 "label": "German",
             },
+            "lv": {
+                "fileName": "lv.json",
+                "label": "Latvian"
+            }
         }));
     } else if (url && url.endsWith("en_EN.json")) {
         cb(undefined, {status: 200}, JSON.stringify(en));
     } else if (url && url.endsWith("de_DE.json")) {
         cb(undefined, {status: 200}, JSON.stringify(de));
+    } else if (url && url.endsWith("lv.json")) {
+        cb(undefined, {status: 200}, JSON.stringify(lv));
     } else {
         cb(true, {status: 404}, "");
     }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "matrix-react-sdk",
-  "version": "3.37.0",
+  "version": "3.38.0",
   "description": "SDK for matrix.org using React",
   "author": "matrix.org",
   "repository": {
@@ -71,7 +71,6 @@
     "emojibase-data": "^6.2.0",
     "emojibase-regex": "^5.1.3",
     "escape-html": "^1.0.3",
-    "eslint-plugin-import": "^2.25.2",
     "file-saver": "^2.0.5",
     "filesize": "6.1.0",
     "flux": "2.1.1",
@@ -87,7 +86,7 @@
     "lodash": "^4.17.20",
     "maplibre-gl": "^1.15.2",
     "matrix-analytics-events": "https://github.com/matrix-org/matrix-analytics-events.git#1eab4356548c97722a183912fda1ceabbe8cc7c1",
-    "matrix-js-sdk": "15.3.0",
+    "matrix-js-sdk": "15.4.0",
     "matrix-widget-api": "^0.1.0-beta.18",
     "minimist": "^1.2.5",
     "opus-recorder": "^8.0.3",
@@ -166,7 +165,9 @@
     "enzyme-to-json": "^3.6.2",
     "eslint": "7.18.0",
     "eslint-config-google": "^0.14.0",
-    "eslint-plugin-matrix-org": "github:matrix-org/eslint-plugin-matrix-org#48ec1e6af2cfb8310b9a6e23edf2dc7a26ddd580",
+    "eslint-plugin-import": "^2.25.4",
+    "eslint-plugin-jsx-a11y": "^6.5.1",
+    "eslint-plugin-matrix-org": "^0.4.0",
     "eslint-plugin-react": "^7.22.0",
     "eslint-plugin-react-hooks": "^4.2.0",
     "glob": "^7.1.6",

res/css/_common.scss

@@ -356,6 +356,7 @@ legend {
 
 .mx_Dialog_header {
     position: relative;
+    padding: 3px 0;
     margin-bottom: 10px;
 }
 
@@ -365,20 +366,21 @@ legend {
     height: 25px;
     margin-left: -2px;
     margin-right: 4px;
+    margin-bottom: 2px;
 }
 
 .mx_Dialog_title {
-    font-size: $font-22px;
-    font-weight: $font-semi-bold;
-    line-height: $font-36px;
     color: $dialog-title-fg-color;
+    display: inline-block;
+    width: 100%;
+    box-sizing: border-box;
 }
 
 .mx_Dialog_header.mx_Dialog_headerWithButton > .mx_Dialog_title {
     text-align: center;
 }
-.mx_Dialog_header.mx_Dialog_headerWithCancel > .mx_Dialog_title {
-    margin-right: 20px; // leave space for the 'X' cancel button
+.mx_Dialog_header.mx_Dialog_headerWithCancel {
+    padding-right: 20px; // leave space for the 'X' cancel button
 }
 
 .mx_Dialog_title.danger {
@@ -421,10 +423,13 @@ legend {
  * in the app look the same by being AccessibleButtons, or possibly by having explict button classes.
  * We should go through and have one consistent set of styles for buttons throughout the app.
  * For now, I am duplicating the selectors here for mx_Dialog and mx_DialogButtons.
+ *
+ * Elements that should not be styled like a dialog button are mentioned in a :not() pseudo-class.
+ * For the widest browser support, we use multiple :not pseudo-classes instead of :not(.a, .b).
  */
-.mx_Dialog button:not(.mx_Dialog_nonDialogButton),
+.mx_Dialog button:not(.mx_Dialog_nonDialogButton):not(.maplibregl-ctrl-attrib-button):not(.mx_AccessibleButton),
 .mx_Dialog input[type="submit"],
-.mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton),
+.mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton),
 .mx_Dialog_buttons input[type="submit"] {
     @mixin mx_DialogButton;
     margin-left: 0px;
@@ -439,25 +444,25 @@ legend {
     font-family: inherit;
 }
 
-.mx_Dialog button:not(.mx_Dialog_nonDialogButton):last-child {
+.mx_Dialog button:not(.mx_Dialog_nonDialogButton):not(.maplibregl-ctrl-attrib-button):not(.mx_AccessibleButton):last-child {
     margin-right: 0px;
 }
 
-.mx_Dialog button:not(.mx_Dialog_nonDialogButton):hover,
+.mx_Dialog button:not(.mx_Dialog_nonDialogButton):not(.maplibregl-ctrl-attrib-button):not(.mx_AccessibleButton):hover,
 .mx_Dialog input[type="submit"]:hover,
-.mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):hover,
+.mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton):hover,
 .mx_Dialog_buttons input[type="submit"]:hover {
     @mixin mx_DialogButton_hover;
 }
 
-.mx_Dialog button:not(.mx_Dialog_nonDialogButton):focus,
+.mx_Dialog button:not(.mx_Dialog_nonDialogButton):not(.maplibregl-ctrl-attrib-button):not(.mx_AccessibleButton):focus,
 .mx_Dialog input[type="submit"]:focus,
-.mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):focus,
+.mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton):focus,
 .mx_Dialog_buttons input[type="submit"]:focus {
     filter: brightness($focus-brightness);
 }
 
-.mx_Dialog button.mx_Dialog_primary,
+.mx_Dialog button.mx_Dialog_primary:not(.mx_Dialog_nonDialogButton):not(.maplibregl-ctrl-attrib-button),
 .mx_Dialog input[type="submit"].mx_Dialog_primary,
 .mx_Dialog_buttons button.mx_Dialog_primary,
 .mx_Dialog_buttons input[type="submit"].mx_Dialog_primary {
@@ -466,7 +471,7 @@ legend {
     min-width: 156px;
 }
 
-.mx_Dialog button.danger,
+.mx_Dialog button.danger:not(.mx_Dialog_nonDialogButton):not(.maplibregl-ctrl-attrib-button),
 .mx_Dialog input[type="submit"].danger,
 .mx_Dialog_buttons button.danger,
 .mx_Dialog_buttons input[type="submit"].danger {
@@ -475,15 +480,15 @@ legend {
     color: $accent-fg-color;
 }
 
-.mx_Dialog button.warning,
+.mx_Dialog button.warning:not(.mx_Dialog_nonDialogButton):not(.maplibregl-ctrl-attrib-button),
 .mx_Dialog input[type="submit"].warning {
     border: solid 1px $alert;
     color: $alert;
 }
 
-.mx_Dialog button:not(.mx_Dialog_nonDialogButton):disabled,
+.mx_Dialog button:not(.mx_Dialog_nonDialogButton):not(.maplibregl-ctrl-attrib-button):not(.mx_AccessibleButton):disabled,
 .mx_Dialog input[type="submit"]:disabled,
-.mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):disabled,
+.mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton):disabled,
 .mx_Dialog_buttons input[type="submit"]:disabled {
     background-color: $light-fg-color;
     border: solid 1px $light-fg-color;
@@ -494,7 +499,7 @@ legend {
 .mx_Dialog_wrapper.mx_Dialog_spinner .mx_Dialog {
     width: auto;
     border-radius: $border-radius-8px;
-    padding: 0px;
+    padding: 8px;
     box-shadow: none;
 
     /* Don't show scroll-bars on spinner dialogs */
@@ -686,3 +691,15 @@ legend {
         outline-style: auto;
     }
 }
+
+@define-mixin ButtonResetDefault {
+    appearance: none;
+    background: none;
+    border: none;
+    padding: 0;
+    margin: 0;
+    font-size: inherit;
+    font-family: inherit;
+    line-height: inherit;
+    cursor: pointer;
+}

res/css/_components.scss

@@ -3,6 +3,7 @@
 @import "./_common.scss";
 @import "./_font-sizes.scss";
 @import "./_font-weights.scss";
+@import "./_spacing.scss";
 @import "./structures/_AutoHideScrollbar.scss";
 @import "./structures/_BackdropPanel.scss";
 @import "./structures/_CompatibilityPage.scss";
@@ -96,6 +97,7 @@
 @import "./views/dialogs/_JoinRuleDropdown.scss";
 @import "./views/dialogs/_KeyboardShortcutsDialog.scss";
 @import "./views/dialogs/_LeaveSpaceDialog.scss";
+@import "./views/dialogs/_LocationViewDialog.scss";
 @import "./views/dialogs/_ManageRestrictedJoinRuleDialog.scss";
 @import "./views/dialogs/_MessageEditHistoryDialog.scss";
 @import "./views/dialogs/_ModalWidgetDialog.scss";
@@ -112,6 +114,7 @@
 @import "./views/dialogs/_SettingsDialog.scss";
 @import "./views/dialogs/_ShareDialog.scss";
 @import "./views/dialogs/_SlashCommandHelpDialog.scss";
+@import "./views/dialogs/_SpacePreferencesDialog.scss";
 @import "./views/dialogs/_SpaceSettingsDialog.scss";
 @import "./views/dialogs/_SpotlightDialog.scss";
 @import "./views/dialogs/_TabbedIntegrationManagerDialog.scss";
@@ -299,6 +302,7 @@
 @import "./views/toasts/_AnalyticsToast.scss";
 @import "./views/toasts/_IncomingCallToast.scss";
 @import "./views/toasts/_NonUrgentEchoFailureToast.scss";
+@import "./views/typography/_Heading.scss";
 @import "./views/verification/_VerificationShowSas.scss";
 @import "./views/voip/CallView/_CallViewButtons.scss";
 @import "./views/voip/_CallContainer.scss";

src/dispatcher/payloads/ToggleRightPanelPayload.ts → res/css/_spacing.scss

@@ -1,5 +1,5 @@
 /*
-Copyright 2020 The Matrix.org Foundation C.I.C.
+Copyright 2022 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,14 +14,14 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { ActionPayload } from "../payloads";
-import { Action } from "../actions";
+// 1rem :: 10px
 
-export interface ToggleRightPanelPayload extends ActionPayload {
-    action: Action.ToggleRightPanel;
-
-    /**
-     * The type of room that the panel is toggled in.
-     */
-    type: "group" | "room";
-}
+$spacing-4: 4px;
+$spacing-8: 8px;
+$spacing-12: 12px;
+$spacing-16: 16px;
+$spacing-20: 20px;
+$spacing-24: 24px;
+$spacing-28: 28px;
+$spacing-32: 32px;
+$spacing-40: 40px;

res/css/structures/_SpaceHierarchy.scss

@@ -15,35 +15,6 @@ limitations under the License.
 */
 
 .mx_SpaceRoomView_landing {
-    .mx_Dialog_title {
-        display: flex;
-
-        .mx_BaseAvatar {
-            margin-right: 12px;
-            align-self: center;
-        }
-
-        .mx_BaseAvatar_image {
-            border-radius: 8px;
-        }
-
-        > div {
-            > h1 {
-                font-weight: $font-semi-bold;
-                font-size: $font-18px;
-                line-height: $font-22px;
-                margin: 0;
-            }
-
-            > div {
-                font-weight: 400;
-                color: $secondary-content;
-                font-size: $font-15px;
-                line-height: $font-24px;
-            }
-        }
-    }
-
     .mx_AccessibleButton_kind_link {
         padding: 0;
         font-size: inherit;
@@ -249,7 +220,7 @@ limitations under the License.
             line-height: $font-18px;
             color: $secondary-content;
             grid-row: 2;
-            grid-column: 1/3;
+            grid-column: 2/3;
             display: -webkit-box;
             -webkit-box-orient: vertical;
             -webkit-line-clamp: 2;

res/css/structures/_SpacePanel.scss

@@ -71,7 +71,7 @@ $activeBorderColor: $primary-content;
     }
 
     &:hover .mx_SpacePanel_toggleCollapse {
-        opacity: 100%;
+        opacity: 1;
     }
 
     ul {
@@ -411,6 +411,10 @@ $activeBorderColor: $primary-content;
         mask-image: url('$(res)/img/element-icons/roomlist/search.svg');
     }
 
+    .mx_SpacePanel_iconPreferences::before {
+        mask-image: url('$(res)/img/element-icons/settings/preference.svg');
+    }
+
     .mx_SpacePanel_noIcon {
         display: none;
 

res/css/structures/_SpaceRoomView.scss

@@ -254,6 +254,10 @@ $SpaceRoomViewInnerWidth: 428px;
         flex-direction: column;
         min-width: 0;
 
+        > .mx_BaseAvatar {
+            width: 80px;
+        }
+
         > .mx_BaseAvatar_image,
         > .mx_BaseAvatar > .mx_BaseAvatar_image {
             border-radius: 12px;