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.

Author: su-ex

.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/[email protected]
+              uses: Beakyn/gha-comment-pull-request@2167a7aee24f9e61ce76a23039f322e49a990409
               env:
                   GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
               with:

CHANGELOG.md

@@ -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": {

package.json

@@ -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/_common.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/_components.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/_ContextualMenu.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/_LeftPanel.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;