Merge tag 'v3.37.0' into sc

* Always unhide widgets on layout change (pinning a widget) ([\matrix-org#7299](matrix-org#7299)).
* Update status message in the member list and user info panel when it is changed ([\matrix-org#7338](matrix-org#7338)). Fixes element-hq/element-web#20127. Contributed by @SimonBrandner.
* Iterate space panel toggle collapse interaction ([\matrix-org#7335](matrix-org#7335)). Fixes element-hq/element-web#20079.
* Spotlight search labs ([\matrix-org#7116](matrix-org#7116)). Fixes element-hq/element-web#19530.
* Put room settings form elements in fieldsets ([\matrix-org#7311](matrix-org#7311)).
* Add descriptions to ambiguous links for screen readers ([\matrix-org#7310](matrix-org#7310)).
* Make tooltips keyboard accessible ([\matrix-org#7281](matrix-org#7281)).
* Iterate room context menus for DMs ([\matrix-org#7308](matrix-org#7308)). Fixes element-hq/element-web#19527.
* Update space panel expand mechanism ([\matrix-org#7230](matrix-org#7230)). Fixes element-hq/element-web#17993.
* Add CSS variable to make the UI gaps consistent and fix the resize handle position ([\matrix-org#7234](matrix-org#7234)). Fixes element-hq/element-web#19904 and element-hq/element-web#19938.
* Custom location sharing. ([\matrix-org#7185](matrix-org#7185)).
* Simple static location sharing ([\matrix-org#7135](matrix-org#7135)).
* Finish sending pending messages before leaving room ([\matrix-org#7276](matrix-org#7276)). Fixes element-hq/element-web#4702.
* Dropdown follow wai-aria practices for expanding on arrow keys ([\matrix-org#7277](matrix-org#7277)). Fixes element-hq/element-web#3687.
* Expose PL control for pinned events when lab enabled ([\matrix-org#7278](matrix-org#7278)). Fixes element-hq/element-web#5396.
* In People & Favourites metaspaces always show all rooms ([\matrix-org#7288](matrix-org#7288)). Fixes element-hq/element-web#20048.
* Don't allow calls when the connection the server has been lost ([\matrix-org#7287](matrix-org#7287)). Fixes element-hq/element-web#2096. Contributed by @SimonBrandner.
* Analytics opt in for posthog ([\matrix-org#6936](matrix-org#6936)).
* Don't inhibit current room notifications if user has Modal open ([\matrix-org#7274](matrix-org#7274)). Fixes element-hq/element-web#1118.
* Remove the `Screen sharing is here!` dialog ([\matrix-org#7266](matrix-org#7266)). Fixes element-hq/element-web#18824. Contributed by @SimonBrandner.
* Make composer buttons react to settings without having to change room ([\matrix-org#7264](matrix-org#7264)). Fixes element-hq/element-web#20011.
* Decorate view keyboard shortcuts link as a link ([\matrix-org#7260](matrix-org#7260)). Fixes element-hq/element-web#20007.
* Improve ease of focusing on Room list Search ([\matrix-org#7255](matrix-org#7255)). Fixes matrix-org/element-web-rageshakes#7017.
* Autofocus device panel entry when renaming device ([\matrix-org#7249](matrix-org#7249)). Fixes element-hq/element-web#19984.
* Update Space Panel scrollable region ([\matrix-org#7245](matrix-org#7245)). Fixes element-hq/element-web#19978.
* Replace breadcrumbs with recently viewed menu ([\matrix-org#7073](matrix-org#7073)). Fixes element-hq/element-web#19528.
* Tweaks to informational architecture 1.1 ([\matrix-org#7052](matrix-org#7052)). Fixes element-hq/element-web#19526, element-hq/element-web#19379, element-hq/element-web#17792, element-hq/element-web#16450, element-hq/element-web#19881, element-hq/element-web#19892, element-hq/element-web#19300, element-hq/element-web#19324, element-hq/element-web#17307, element-hq/element-web#17468 element-hq/element-web#19932 and element-hq/element-web#19956.
* [Release] Fix inline code block nowrap issue ([\matrix-org#7407](matrix-org#7407)).
* don't collapse spaces in inline code blocks (https ([\matrix-org#7328](matrix-org#7328)). Fixes element-hq/element-web#6051. Contributed by @HarHarLinks.
* Fix accessibility regressions ([\matrix-org#7336](matrix-org#7336)).
* Debounce User Info start dm "Message" button ([\matrix-org#7357](matrix-org#7357)). Fixes element-hq/element-web#7763.
* Fix thread filter being cut-off on narrow screens ([\matrix-org#7354](matrix-org#7354)). Fixes element-hq/element-web#20146.
* Fix upgraded rooms wrongly showing up in spotlight ([\matrix-org#7341](matrix-org#7341)). Fixes element-hq/element-web#20141.
* Show votes in replied-to polls (pass in getRelationsForEvent) ([\matrix-org#7345](matrix-org#7345)). Fixes element-hq/element-web#20153.
* Keep all previously approved widget capabilities when requesting new capabilities ([\matrix-org#7340](matrix-org#7340)). Contributed by @dhenneke.
* Only show poll previews when the polls feature is enabled ([\matrix-org#7331](matrix-org#7331)).
* No-op action:join if the user is already invited for scalar ([\matrix-org#7334](matrix-org#7334)). Fixes element-hq/element-web#20134.
* Don't show polls in timeline if polls are disabled ([\matrix-org#7332](matrix-org#7332)). Fixes element-hq/element-web#20130.
* Don't send a poll response event if you are voting for your current c… ([\matrix-org#7326](matrix-org#7326)). Fixes element-hq/element-web#20129.
* Don't show options button when the user can't modify widgets ([\matrix-org#7324](matrix-org#7324)). Fixes element-hq/element-web#20114. Contributed by @SimonBrandner.
* Add vertical spacing between buttons when they go over multiple lines ([\matrix-org#7314](matrix-org#7314)). Contributed by @twigleingrid.
* Improve accessibility of opening space create menu ([\matrix-org#7316](matrix-org#7316)).
* Correct tab order in room preview dialog ([\matrix-org#7302](matrix-org#7302)).
* Fix favourites and people metaspaces not rendering their content ([\matrix-org#7315](matrix-org#7315)). Fixes element-hq/element-web#20070.
* Make clear button images visible in high contrast theme ([\matrix-org#7306](matrix-org#7306)). Fixes element-hq/element-web#19931.
* Fix html exporting and improve output size ([\matrix-org#7312](matrix-org#7312)). Fixes element-hq/element-web#19436 element-hq/element-web#20107 and element-hq/element-web#19441.
* Fix textual message stripping new line ([\matrix-org#7239](matrix-org#7239)). Fixes element-hq/element-web#15320. Contributed by @renancleyson-dev.
* Fix issue with room list resizer getting clipped in firefox ([\matrix-org#7303](matrix-org#7303)). Fixes element-hq/element-web#20076.
* Fix wrong indentation with nested ordered list unnesting list on edit ([\matrix-org#7300](matrix-org#7300)). Contributed by @renancleyson-dev.
* Fix input field behaviour inside context menus ([\matrix-org#7293](matrix-org#7293)). Fixes element-hq/element-web#19881.
* Corrected the alignment of the Edit button on LoginPage. ([\matrix-org#7292](matrix-org#7292)). Contributed by @ankur12-1610.
* Allow sharing manual location without giving location permission ([\matrix-org#7295](matrix-org#7295)). Fixes element-hq/element-web#20065. Contributed by @tulir.
* Make emoji picker search placeholder localizable ([\matrix-org#7294](matrix-org#7294)).
* Fix jump to bottom on message send ([\matrix-org#7280](matrix-org#7280)). Fixes element-hq/element-web#19859. Contributed by @SimonBrandner.
* Fix: Warning: Unsupported style property pointer-events. Did you mean pointerEvents? ([\matrix-org#7291](matrix-org#7291)).
* Add edits and replies to the right panel timeline & prepare the timelineCard to share code with threads ([\matrix-org#7262](matrix-org#7262)). Fixes element-hq/element-web#20012 and element-hq/element-web#19928.
* Fix labs exploding when lab group is empty ([\matrix-org#7290](matrix-org#7290)). Fixes element-hq/element-web#20051.
* Update URL when room aliases are modified ([\matrix-org#7289](matrix-org#7289)). Fixes element-hq/element-web#1616 and element-hq/element-web#1925.
* Render mini user menu for when space panel is disabled ([\matrix-org#7258](matrix-org#7258)). Fixes element-hq/element-web#19998.
* When accepting DM from People metaspace don't switch to Home ([\matrix-org#7272](matrix-org#7272)). Fixes element-hq/element-web#19995.
* Fix CallPreview `room is null` ([\matrix-org#7265](matrix-org#7265)). Fixes element-hq/element-web#19990, element-hq/element-web#19972, matrix-org/element-web-rageshakes#7004 matrix-org/element-web-rageshakes#6991 and matrix-org/element-web-rageshakes#6964.
* Fixes more instances of double-translation ([\matrix-org#7259](matrix-org#7259)). Fixes element-hq/element-web#20010.
* Fix video calls ([\matrix-org#7256](matrix-org#7256)). Fixes element-hq/element-web#20008. Contributed by @SimonBrandner.
* Fix broken i18n in Forgot & Change password ([\matrix-org#7252](matrix-org#7252)). Fixes element-hq/element-web#19989.
* Fix setBotPower to not use `.content` ([\matrix-org#7179](matrix-org#7179)). Fixes element-hq/element-web#19845.
* Break long words in pinned messages to prevent overflow ([\matrix-org#7251](matrix-org#7251)). Fixes element-hq/element-web#19985.
* Disallow sending empty feedbacks ([\matrix-org#7240](matrix-org#7240)).
* Fix wrongly sized default sub-space icons in space panel ([\matrix-org#7243](matrix-org#7243)). Fixes element-hq/element-web#19973.
* Hide clear cache and reload button if crash is before client init ([\matrix-org#7242](matrix-org#7242)). Fixes matrix-org/element-web-rageshakes#6996.
* Fix automatic space switching wrongly going via Home for room aliases ([\matrix-org#7247](matrix-org#7247)). Fixes element-hq/element-web#19974.
* Fix links being parsed as markdown links improperly ([\matrix-org#7200](matrix-org#7200)). Contributed by @Palid.

.eslintignore

@@ -2,3 +2,4 @@ src/component-index.js
 test/end-to-end-tests/node_modules/
 test/end-to-end-tests/element/
 test/end-to-end-tests/synapse/
+test/end-to-end-tests/lib/

.eslintrc.js

@@ -66,8 +66,8 @@ module.exports = {
  settings: {
  react: {
  version: "detect",
- }
- }
+ },
+ },
 };
 
 function buildRestrictedPropertiesOptions(properties, message) {

.github/workflows/netlify.yaml

@@ -69,7 +69,7 @@ jobs:
  NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
  timeout-minutes: 1
  - name: Edit PR Description
- uses: velas/pr-description@v1.0.1
+ uses: Beakyn/gha-comment-pull-request@2167a7aee24f9e61ce76a23039f322e49a990409
  env:
  GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
  with:

package.json

@@ -1,6 +1,6 @@
 {
  "name": "matrix-react-sdk",
- "version": "3.36.1",
+ "version": "3.37.0",
  "description": "SDK for matrix.org using React",
  "author": "matrix.org",
  "repository": {
@@ -57,6 +57,7 @@
  "@babel/runtime": "^7.12.5",
  "@sentry/browser": "^6.11.0",
  "@sentry/tracing": "^6.11.0",
+ "@types/geojson": "^7946.0.8",
  "await-lock": "^2.1.0",
  "blurhash": "^1.1.3",
  "browser-encrypt-attachment": "^0.3.0",
@@ -70,6 +71,7 @@
  "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",
@@ -83,16 +85,18 @@
  "katex": "^0.12.0",
  "linkifyjs": "^2.1.9",
  "lodash": "^4.17.20",
- "matrix-js-sdk": "15.2.1",
- "matrix-widget-api": "^0.1.0-beta.17",
+ "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-widget-api": "^0.1.0-beta.18",
  "minimist": "^1.2.5",
  "opus-recorder": "^8.0.3",
  "pako": "^2.0.3",
  "parse5": "^6.0.1",
  "png-chunks-extract": "^1.0.0",
  "posthog-js": "1.12.2",
  "prop-types": "^15.7.2",
- "qrcode": "^1.4.4",
+ "qrcode": "1.4.4",
  "re-resizable": "^6.9.0",
  "react": "17.0.2",
  "react-beautiful-dnd": "^13.1.0",
@@ -151,8 +155,8 @@
  "@types/react-transition-group": "^4.4.0",
  "@types/sanitize-html": "^2.3.1",
  "@types/zxcvbn": "^4.4.0",
- "@typescript-eslint/eslint-plugin": "^4.17.0",
- "@typescript-eslint/parser": "^4.17.0",
+ "@typescript-eslint/eslint-plugin": "^5.6.0",
+ "@typescript-eslint/parser": "^5.6.0",
  "@wojtekmaj/enzyme-adapter-react-17": "^0.6.1",
  "allchange": "^1.0.6",
  "babel-jest": "^26.6.3",
@@ -162,7 +166,7 @@
  "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#2306b3d4da4eba908b256014b979f1d3d43d2945",
+ "eslint-plugin-matrix-org": "github:matrix-org/eslint-plugin-matrix-org#48ec1e6af2cfb8310b9a6e23edf2dc7a26ddd580",
  "eslint-plugin-react": "^7.22.0",
  "eslint-plugin-react-hooks": "^4.2.0",
  "glob": "^7.1.6",
@@ -181,7 +185,7 @@
  "stylelint": "^13.9.0",
  "stylelint-config-standard": "^20.0.0",
  "stylelint-scss": "^3.18.0",
- "typescript": "4.3.5",
+ "typescript": "4.5.3",
  "walk": "^2.3.14"
  },
  "resolutions": {

res/css/_common.scss

@@ -1,7 +1,8 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
 Copyright 2017 Vector Creations Ltd
-Copyright 2017 New Vector Ltd
+Copyright 2017 - 2019 New Vector Ltd
+Copyright 2019 - 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.
@@ -20,6 +21,7 @@ limitations under the License.
 @import "./_font-weights.scss";
 @import "./_border-radii.scss";
 @import "./_animations.scss";
+@import url("maplibre-gl/dist/maplibre-gl.css");
 
 $hover-transition: 0.08s cubic-bezier(.46, .03, .52, .96); // quadratic
 
@@ -32,6 +34,7 @@ $slider-dot-size: 1em;
 $slider-selection-dot-size: 2.4em;
 
 $container-border-width: 8px;
+$container-gap-width: 8px; // only even numbers should be used because otherwise we get 0.5px margin values.
 
 $timeline-image-border-radius: $border-radius-8px;
 :root {
@@ -170,6 +173,21 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
  outline: none;
 }
 
+// override defaults
+fieldset {
+ display: inline-block;
+ margin-inline: unset;
+ padding-block: unset;
+ padding-inline: unset;
+ min-inline-size: unset;
+ border: none;
+}
+
+legend {
+ padding-inline: unset;
+ border: none;
+}
+
 // .mx_textinput is a container for a text input
 // + some other controls like buttons, ...
 // it has the appearance of a text box so the controls
@@ -411,6 +429,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
  @mixin mx_DialogButton;
  margin-left: 0px;
  margin-right: 8px;
+ margin-bottom: 5px;
 
  // flip colours for the secondary ones
  font-weight: 600;
@@ -483,6 +502,15 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
  overflow-y: hidden;
 }
 
+.mx_DialogDesignChanges_wrapper .mx_Dialog_fixedWidth {
+ max-width: 636px; // match splash image width
+
+ .mx_AccessibleButton_kind_link {
+ font-size: inherit;
+ padding: 0;
+ }
+}
+
 // TODO: Review mx_GeneralButton usage to see if it can use a different class
 // These classes were brought in from the old UserSettings and are included here to avoid
 // breaking the app.

res/css/_components.scss

@@ -60,17 +60,16 @@
 @import "./views/auth/_Welcome.scss";
 @import "./views/avatars/_BaseAvatar.scss";
 @import "./views/avatars/_DecoratedRoomAvatar.scss";
-@import "./views/avatars/_MemberStatusMessageAvatar.scss";
 @import "./views/avatars/_WidgetAvatar.scss";
 @import "./views/beta/_BetaCard.scss";
 @import "./views/context_menus/_CallContextMenu.scss";
 @import "./views/context_menus/_IconizedContextMenu.scss";
 @import "./views/context_menus/_MessageContextMenu.scss";
-@import "./views/context_menus/_StatusMessageContextMenu.scss";
 @import "./views/context_menus/_TagTileContextMenu.scss";
 @import "./views/dialogs/_AddExistingToSpaceDialog.scss";
 @import "./views/dialogs/_AddressPickerDialog.scss";
 @import "./views/dialogs/_Analytics.scss";
+@import "./views/dialogs/_AnalyticsLearnMoreDialog.scss";
 @import "./views/dialogs/_BugReportDialog.scss";
 @import "./views/dialogs/_ChangelogDialog.scss";
 @import "./views/dialogs/_ChatCreateOrReuseChatDialog.scss";
@@ -114,6 +113,7 @@
 @import "./views/dialogs/_ShareDialog.scss";
 @import "./views/dialogs/_SlashCommandHelpDialog.scss";
 @import "./views/dialogs/_SpaceSettingsDialog.scss";
+@import "./views/dialogs/_SpotlightDialog.scss";
 @import "./views/dialogs/_TabbedIntegrationManagerDialog.scss";
 @import "./views/dialogs/_TermsDialog.scss";
 @import "./views/dialogs/_UntrustedDeviceDialog.scss";
@@ -140,11 +140,13 @@
 @import "./views/elements/_ErrorBoundary.scss";
 @import "./views/elements/_EventListSummary.scss";
 @import "./views/elements/_EventTilePreview.scss";
+@import "./views/elements/_ExternalLink.scss";
 @import "./views/elements/_FacePile.scss";
 @import "./views/elements/_Field.scss";
 @import "./views/elements/_ImageView.scss";
 @import "./views/elements/_InfoTooltip.scss";
 @import "./views/elements/_InlineSpinner.scss";
+@import "./views/elements/_InteractiveTooltip.scss";
 @import "./views/elements/_InviteReason.scss";
 @import "./views/elements/_ManageIntegsButton.scss";
 @import "./views/elements/_MiniAvatarUploader.scss";
@@ -158,6 +160,7 @@
 @import "./views/elements/_RoomAliasField.scss";
 @import "./views/elements/_SSOButtons.scss";
 @import "./views/elements/_ServerPicker.scss";
+@import "./views/elements/_SettingsFlag.scss";
 @import "./views/elements/_Slider.scss";
 @import "./views/elements/_Spinner.scss";
 @import "./views/elements/_StyledCheckbox.scss";
@@ -173,6 +176,7 @@
 @import "./views/groups/_GroupPublicityToggle.scss";
 @import "./views/groups/_GroupRoomList.scss";
 @import "./views/groups/_GroupUserSettings.scss";
+@import "./views/location/_LocationPicker.scss";
 @import "./views/messages/_CallEvent.scss";
 @import "./views/messages/_CreateEvent.scss";
 @import "./views/messages/_DateSeparator.scss";
@@ -182,6 +186,7 @@
 @import "./views/messages/_MImageBody.scss";
 @import "./views/messages/_MImageReplyBody.scss";
 @import "./views/messages/_MJitsiWidgetEvent.scss";
+@import "./views/messages/_MLocationBody.scss";
 @import "./views/messages/_MNoticeBody.scss";
 @import "./views/messages/_MPollBody.scss";
 @import "./views/messages/_MStickerBody.scss";
@@ -232,11 +237,13 @@
 @import "./views/rooms/_NotificationBadge.scss";
 @import "./views/rooms/_PinnedEventTile.scss";
 @import "./views/rooms/_PresenceLabel.scss";
+@import "./views/rooms/_RecentlyViewedButton.scss";
 @import "./views/rooms/_ReplyPreview.scss";
 @import "./views/rooms/_ReplyTile.scss";
 @import "./views/rooms/_RoomBreadcrumbs.scss";
 @import "./views/rooms/_RoomHeader.scss";
 @import "./views/rooms/_RoomList.scss";
+@import "./views/rooms/_RoomListHeader.scss";
 @import "./views/rooms/_RoomPreviewBar.scss";
 @import "./views/rooms/_RoomSublist.scss";
 @import "./views/rooms/_RoomTile.scss";
@@ -265,6 +272,7 @@
 @import "./views/settings/_SecureBackupPanel.scss";
 @import "./views/settings/_SetIdServer.scss";
 @import "./views/settings/_SetIntegrationManager.scss";
+@import "./views/settings/_SettingsFieldset.scss";
 @import "./views/settings/_SpellCheckLanguages.scss";
 @import "./views/settings/_ThemeChoicePanel.scss";
 @import "./views/settings/_UpdateCheckButton.scss";

res/css/structures/_ContextualMenu.scss

@@ -37,6 +37,7 @@ limitations under the License.
  position: absolute;
  font-size: $font-14px;
  z-index: 5001;
+ width: max-content;
 }
 
 .mx_ContextualMenu_right {

res/css/structures/_LeftPanel.scss

@@ -101,17 +101,44 @@ $roomListCollapsedWidth: 68px;
  }
 
  .mx_LeftPanel_filterContainer {
- margin-left: 12px;
- margin-right: 12px;
+ margin: 0 12px;
+ padding: 12px 0 8px;
+ border-bottom: 1px solid $quinary-content;
 
  flex-shrink: 0; // to convince safari's layout engine the flexbox is fine
 
  // Create a flexbox to organize the inputs
  display: flex;
  align-items: center;
 
+ .mx_UserMenu {
+ // mini-mode for when Space Panel is disabled
+ margin-right: 12px;
+ }
+
+ & + .mx_RoomListHeader {
+ margin-top: 12px;
+ }
+
+ .mx_RoomSearch_shortcutPrompt {
+ border-radius: 6px;
+ background-color: $panel-actions;
+ padding: 2px 4px;
+ user-select: none;
+ font-size: $font-12px;
+ line-height: $font-15px;
+ font-weight: $font-semi-bold;
+ color: $light-fg-color;
+ margin-right: 6px;
+ }
+
  .mx_RoomSearch_focused, .mx_RoomSearch_hasQuery {
- & + .mx_LeftPanel_exploreButton {
+ .mx_RoomSearch_shortcutPrompt {
+ display: none;
+ }
+
+ & + .mx_LeftPanel_exploreButton,
+ & + .mx_LeftPanel_recentsButton {
  // Cheaty way to return the occupied space to the filter input
  flex-basis: 0;
  margin: 0;
@@ -144,11 +171,12 @@ $roomListCollapsedWidth: 68px;
  mask-position: center;
  mask-size: contain;
  mask-repeat: no-repeat;
- background: $secondary-content;
+ background-color: $secondary-content;
  }
  }
 
- .mx_LeftPanel_exploreButton {
+ .mx_LeftPanel_exploreButton,
+ .mx_LeftPanel_recentsButton {
  width: 32px;
  height: 32px;
  border-radius: $border-radius-8px;
@@ -163,17 +191,28 @@ $roomListCollapsedWidth: 68px;
  left: 8px;
  width: 16px;
  height: 16px;
- mask-image: url('$(res)/img/element-icons/roomlist/explore.svg');
  mask-position: center;
  mask-size: contain;
  mask-repeat: no-repeat;
- background: $secondary-content;
+ background-color: $secondary-content;
  }
 
- &.mx_LeftPanel_exploreButton_space::before {
- mask-image: url('$(res)/img/element-icons/roomlist/browse.svg');
+ &:hover {
+ background-color: $tertiary-content;
+
+ &::before {
+ background-color: $background;
+ }
  }
  }
+
+ .mx_LeftPanel_exploreButton::before {
+ mask-image: url('$(res)/img/element-icons/roomlist/explore.svg');
+ }
+
+ .mx_LeftPanel_recentsButton::before {
+ mask-image: url('$(res)/img/element-icons/clock.svg');
+ }
  }
 
  .mx_LeftPanel_roomListFilterCount {
@@ -231,10 +270,10 @@ $roomListCollapsedWidth: 68px;
  background-color: transparent;
  }
 
- .mx_LeftPanel_exploreButton {
+ .mx_LeftPanel_exploreButton,
+ .mx_LeftPanel_recentsButton {
  margin-left: 0;
  margin-top: 8px;
- background-color: transparent;
  }
  }
  }

res/css/structures/_MainSplit.scss

@@ -23,15 +23,15 @@ limitations under the License.
 }
 
 .mx_MainSplit > .mx_RightPanel_ResizeWrapper {
- // no padding on the left. The spacing is taken care of by the main split content.
- padding: 0px 5px 5px 0px;
- margin-left: 8px;
+ padding: $container-gap-width;
+ padding-left: calc($container-gap-width / 2); // The resizer should be centered: only half of the gap-width is handled by the right panel. The other half by the RoomView.
  height: calc(100vh - 51px); // height of .mx_RoomHeader.light-panel
 
  &:hover .mx_ResizeHandle_horizontal::before {
  position: absolute;
  top: 50%;
- transform: translate(0, -50%);
+ left: 50%;
+ transform: translate(-50%, -50%);
 
  height: 64px; // to match width of the ones on roomlist
  width: 4px;