Merge branch 'develop' into improve-image-view

2021-02-23 20:42:16 +01:00 · 2021-02-23 20:42:16 +01:00 · 87d5d73025
commit 87d5d73025
parent e2abbf9a7c 64974eb3ee
175 changed files with 9502 additions and 5453 deletions
--- a/res/css/_common.scss
+++ b/res/css/_common.scss
@ -21,6 +21,11 @@ limitations under the License.

 $hover-transition: 0.08s cubic-bezier(.46, .03, .52, .96); // quadratic

+$EventTile_e2e_state_indicator_width: 4px;
+
+$MessageTimestamp_width: 46px; /* 8 + 30 (avatar) + 8 */
+$MessageTimestamp_width_hover: calc($MessageTimestamp_width - 2 * $EventTile_e2e_state_indicator_width);
+
 :root {
    font-size: 10px;
 }
--- a/res/css/_components.scss
+++ b/res/css/_components.scss
@ -71,6 +71,7 @@
@import "./views/dialogs/_EditCommunityPrototypeDialog.scss";
@import "./views/dialogs/_FeedbackDialog.scss";
@import "./views/dialogs/_GroupAddressPicker.scss";
+@import "./views/dialogs/_HostSignupDialog.scss";
@import "./views/dialogs/_IncomingSasDialog.scss";
@import "./views/dialogs/_InviteDialog.scss";
@import "./views/dialogs/_KeyboardShortcutsDialog.scss";
@ -106,6 +107,7 @@
@import "./views/elements/_AddressTile.scss";
@import "./views/elements/_DesktopBuildsNotice.scss";
@import "./views/elements/_DirectorySearchBox.scss";
+@import "./views/elements/_DesktopCapturerSourcePicker.scss";
@import "./views/elements/_Dropdown.scss";
@import "./views/elements/_EditableItemList.scss";
@import "./views/elements/_ErrorBoundary.scss";
--- a/res/css/structures/_LeftPanelWidget.scss
+++ b/res/css/structures/_LeftPanelWidget.scss
@ -134,7 +134,7 @@ limitations under the License.
            mask-position: center;
            mask-size: contain;
            mask-repeat: no-repeat;
-            mask-image: url('$(res)/img/feather-customised/widget/maximise.svg');
+            mask-image: url('$(res)/img/feather-customised/maximise.svg');
            background: $muted-fg-color;
        }
    }
--- a/res/css/structures/_RoomDirectory.scss
+++ b/res/css/structures/_RoomDirectory.scss
@ -64,28 +64,23 @@ limitations under the License.
 }

 .mx_RoomDirectory_table {
-    font-size: $font-12px;
    color: $primary-fg-color;
-    width: 100%;
+    display: grid;
+    font-size: $font-12px;
+    grid-template-columns: max-content auto max-content max-content max-content;
+    row-gap: 24px;
    text-align: left;
-    table-layout: fixed;
+    width: 100%;
 }

 .mx_RoomDirectory_roomAvatar {
-    width: 32px;
-    padding-right: 14px;
-    vertical-align: top;
-}
-
-.mx_RoomDirectory_roomDescription {
-    padding-bottom: 16px;
+    padding: 2px 14px 0 0;
 }

 .mx_RoomDirectory_roomMemberCount {
+    align-self: center;
    color: $light-fg-color;
-    width: 60px;
-    padding: 0 10px;
-    text-align: center;
+    padding: 3px 10px 0;

    &::before {
        background-color: $light-fg-color;
@ -105,8 +100,7 @@ limitations under the License.
 }

 .mx_RoomDirectory_join, .mx_RoomDirectory_preview {
-    width: 80px;
-    text-align: center;
+    align-self: center;
    white-space: nowrap;
 }

--- a/res/css/structures/_RoomView.scss
+++ b/res/css/structures/_RoomView.scss
@ -219,7 +219,7 @@ hr.mx_RoomView_myReadMarker {
    position: relative;
    top: -1px;
    z-index: 1;
-    transition: width 400ms easeInSine 1s, opacity 400ms easeInSine 1s;
+    transition: width 400ms easeinsine 1s, opacity 400ms easeinsine 1s;
    width: 99%;
    opacity: 1;
 }
--- a/res/css/structures/_UserMenu.scss
+++ b/res/css/structures/_UserMenu.scss
@ -128,7 +128,7 @@ limitations under the License.
 }

 .mx_UserMenu_contextMenu {
-    width: 247px;
+    width: 258px;

    // These override the styles already present on the user menu rather than try to
    // define a new menu. They are specifically for the stacked menu when a community
@ -272,6 +272,9 @@ limitations under the License.
    .mx_UserMenu_iconHome::before {
        mask-image: url('$(res)/img/element-icons/roomlist/home.svg');
    }
+    .mx_UserMenu_iconHosting::before {
+        mask-image: url('$(res)/img/element-icons/brands/element.svg');
+    }

    .mx_UserMenu_iconBell::before {
        mask-image: url('$(res)/img/element-icons/notifications.svg');
--- a/res/css/views/auth/_AuthBody.scss
+++ b/res/css/views/auth/_AuthBody.scss
@ -34,7 +34,7 @@ limitations under the License.
    h3 {
        font-size: $font-14px;
        font-weight: 600;
-        color: $authpage-primary-color;
+        color: $authpage-secondary-color;
    }

    h3.mx_AuthBody_centered {
--- a/res/css/views/auth/_AuthHeader.scss
+++ b/res/css/views/auth/_AuthHeader.scss
@ -18,7 +18,7 @@ limitations under the License.
    display: flex;
    flex-direction: column;
    width: 206px;
-    padding: 25px 40px;
+    padding: 25px 25px;
    box-sizing: border-box;
 }

--- a/res/css/views/auth/_AuthHeaderLogo.scss
+++ b/res/css/views/auth/_AuthHeaderLogo.scss
@ -17,7 +17,7 @@ limitations under the License.
 .mx_AuthHeaderLogo {
    margin-top: 15px;
    flex: 1;
-    padding: 0 10px;
+    padding: 0 25px;
 }

 .mx_AuthHeaderLogo img {
--- a/res/css/views/auth/_InteractiveAuthEntryComponents.scss
+++ b/res/css/views/auth/_InteractiveAuthEntryComponents.scss
@ -83,7 +83,10 @@ limitations under the License.
 }

 .mx_InteractiveAuthEntryComponents_termsPolicy {
-    display: block;
+    display: flex;
+    flex-direction: row;
+    justify-content: start;
+    align-items: center;
 }

 .mx_InteractiveAuthEntryComponents_passwordSection {
--- a/res/css/views/auth/_LanguageSelector.scss
+++ b/res/css/views/auth/_LanguageSelector.scss
@ -23,6 +23,7 @@ limitations under the License.
    font-size: $font-14px;
    font-weight: 600;
    color: $authpage-lang-color;
+    width: auto;
 }

 .mx_AuthBody_language .mx_Dropdown_arrow {
--- a/res/css/views/auth/_Welcome.scss
+++ b/res/css/views/auth/_Welcome.scss
@ -18,7 +18,6 @@ limitations under the License.
    display: flex;
    flex-direction: column;
    align-items: center;
-
    &.mx_WelcomePage_registrationDisabled {
        .mx_ButtonCreateAccount {
            display: none;
@ -27,6 +26,6 @@ limitations under the License.
 }

 .mx_Welcome .mx_AuthBody_language {
-    width: 120px;
+    width: 160px;
    margin-bottom: 10px;
 }
--- a/res/css/views/dialogs/_HostSignupDialog.scss
+++ b/res/css/views/dialogs/_HostSignupDialog.scss
@ -0,0 +1,138 @@
+/*
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_HostSignupDialog {
+    width: 90vw;
+    max-width: 580px;
+    height: 80vh;
+    max-height: 600px;
+
+    .mx_HostSignupDialog_info {
+        text-align: center;
+
+        .mx_HostSignupDialog_content_top {
+            margin-bottom: 24px;
+        }
+
+        .mx_HostSignupDialog_paragraphs {
+            text-align: left;
+            padding-left: 25%;
+            padding-right: 25%;
+        }
+
+        .mx_HostSignupDialog_buttons {
+            margin-bottom: 24px;
+            display: flex;
+            justify-content: center;
+
+            button {
+                padding: 12px;
+                margin: 0 16px;
+            }
+        }
+
+        .mx_HostSignupDialog_footer {
+            display: flex;
+            justify-content: center;
+            align-items: baseline;
+
+            img {
+                padding-right: 5px;
+            }
+        }
+    }
+
+    iframe {
+        width: 100%;
+        height: 100%;
+        border: none;
+        background-color: #fff;
+        min-height: 540px;
+    }
+}
+
+.mx_HostSignupDialog_text_dark {
+    color: $primary-fg-color;
+}
+
+.mx_HostSignupDialog_text_light {
+    color: $secondary-fg-color;
+}
+
+.mx_HostSignup_maximize_button {
+    mask: url('$(res)/img/feather-customised/maximise.svg');
+    mask-repeat: no-repeat;
+    mask-position: center;
+    mask-size: cover;
+    width: 14px;
+    height: 14px;
+    background-color: $dialog-close-fg-color;
+    cursor: pointer;
+    position: absolute;
+    top: 10px;
+    right: 10px;
+}
+
+.mx_HostSignup_minimize_button {
+    mask: url('$(res)/img/feather-customised/minimise.svg');
+    mask-repeat: no-repeat;
+    mask-position: center;
+    mask-size: cover;
+    width: 14px;
+    height: 14px;
+    background-color: $dialog-close-fg-color;
+    cursor: pointer;
+    position: absolute;
+    top: 10px;
+    right: 25px;
+}
+
+.mx_HostSignup_persisted {
+    width: 90vw;
+    max-width: 580px;
+    height: 80vh;
+    max-height: 600px;
+    top: 0;
+    left: 0;
+    position: fixed;
+    display: none;
+}
+
+.mx_HostSignupDialog_minimized {
+    position: fixed;
+    bottom: 80px;
+    right: 26px;
+    width: 314px;
+    height: 217px;
+    overflow: hidden;
+
+    &.mx_Dialog {
+        padding: 12px;
+    }
+
+    .mx_Dialog_title {
+        text-align: left !important;
+        padding-left: 20px;
+        font-size: $font-15px;
+    }
+
+    iframe {
+        width: 100%;
+        height: 100%;
+        border: none;
+        background-color: #fff;
+    }
+}
--- a/res/css/views/elements/_DesktopCapturerSourcePicker.scss
+++ b/res/css/views/elements/_DesktopCapturerSourcePicker.scss
@ -0,0 +1,72 @@
+/*
+Copyright 2021 Šimon Brandner <simon.bra.ag@gmail.com>
+
+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_desktopCapturerSourcePicker {
+    overflow: hidden;
+}
+
+.mx_desktopCapturerSourcePicker_tabLabels {
+    display: flex;
+    padding: 0 0 8px 0;
+}
+
+.mx_desktopCapturerSourcePicker_tabLabel,
+.mx_desktopCapturerSourcePicker_tabLabel_selected {
+    width: 100%;
+    text-align: center;
+    border-radius: 8px;
+    padding: 8px 0;
+    font-size: $font-13px;
+}
+
+.mx_desktopCapturerSourcePicker_tabLabel_selected {
+    background-color: $tab-label-active-bg-color;
+    color: $tab-label-active-fg-color;
+}
+
+.mx_desktopCapturerSourcePicker_panel {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: flex-start;
+    height: 500px;
+    overflow: overlay;
+}
+
+.mx_desktopCapturerSourcePicker_stream_button {
+    display: flex;
+    flex-direction: column;
+    margin: 8px;
+    border-radius: 4px;
+}
+
+.mx_desktopCapturerSourcePicker_stream_button:hover,
+.mx_desktopCapturerSourcePicker_stream_button:focus {
+    background: $roomtile-selected-bg-color;
+}
+
+.mx_desktopCapturerSourcePicker_stream_thumbnail {
+    margin: 4px;
+    width: 312px;
+}
+
+.mx_desktopCapturerSourcePicker_stream_name {
+    margin: 0 4px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    width: 312px;
+}
--- a/res/css/views/elements/_SSOButtons.scss
+++ b/res/css/views/elements/_SSOButtons.scss
@ -28,8 +28,14 @@ limitations under the License.
    .mx_SSOButton {
        position: relative;
        width: 100%;
-        padding-left: 32px;
-        padding-right: 32px;
+        padding: 7px 32px;
+        text-align: center;
+        border-radius: 8px;
+        display: inline-block;
+        font-size: $font-14px;
+        font-weight: $font-semi-bold;
+        border: 1px solid $input-border-color;
+        color: $primary-fg-color;

        > img {
            object-fit: contain;
@ -39,6 +45,16 @@ limitations under the License.
        }
    }

+    .mx_SSOButton_default {
+        color: $button-primary-bg-color;
+        background-color: $button-secondary-bg-color;
+        border-color: $button-primary-bg-color;
+    }
+    .mx_SSOButton_default.mx_SSOButton_primary {
+        color: $button-primary-fg-color;
+        background-color: $button-primary-bg-color;
+    }
+
    .mx_SSOButton_mini {
        box-sizing: border-box;
        width: 50px; // 48px + 1px border on all sides
--- a/res/css/views/elements/_ServerPicker.scss
+++ b/res/css/views/elements/_ServerPicker.scss
@ -59,7 +59,7 @@ limitations under the License.
    }

    .mx_ServerPicker_server {
-        color: $primary-fg-color;
+        color: $authpage-primary-color;
        grid-column: 1;
        grid-row: 2;
        margin-bottom: 16px;
--- a/res/css/views/messages/_MVideoBody.scss
+++ b/res/css/views/messages/_MVideoBody.scss
@ -17,7 +17,7 @@ limitations under the License.
 span.mx_MVideoBody {
    video.mx_MVideoBody {
        max-width: 100%;
-        height: auto;
+        max-height: 300px;
        border-radius: 4px;
    }
 }
--- a/res/css/views/messages/_RedactedBody.scss
+++ b/res/css/views/messages/_RedactedBody.scss
@ -30,7 +30,7 @@ limitations under the License.
        mask-size: contain;
        content: '';
        position: absolute;
-        top: 2px;
+        top: 1px;
        left: 0;
    }
 }
--- a/res/css/views/messages/_ViewSourceEvent.scss
+++ b/res/css/views/messages/_ViewSourceEvent.scss
@ -35,13 +35,13 @@ limitations under the License.
        mask-size: auto 12px;
        visibility: hidden;
        background-color: $accent-color;
-        mask-image: url('$(res)/img/feather-customised/widget/maximise.svg');
+        mask-image: url('$(res)/img/feather-customised/maximise.svg');
    }

    &.mx_ViewSourceEvent_expanded .mx_ViewSourceEvent_toggle {
        mask-position: 0 bottom;
        margin-bottom: 7px;
-        mask-image: url('$(res)/img/feather-customised/widget/minimise.svg');
+        mask-image: url('$(res)/img/feather-customised/minimise.svg');
    }

    &:hover .mx_ViewSourceEvent_toggle {
--- a/res/css/views/rooms/_EventTile.scss
+++ b/res/css/views/rooms/_EventTile.scss
@ -26,7 +26,7 @@ $left-gutter: 64px;
 }

 .mx_EventTile.mx_EventTile_info {
-    padding-top: 0px;
+    padding-top: 1px;
 }

 .mx_EventTile_avatar {
@ -37,7 +37,7 @@ $left-gutter: 64px;
 }

 .mx_EventTile.mx_EventTile_info .mx_EventTile_avatar {
-    top: $font-8px;
+    top: $font-6px;
    left: $left-gutter;
 }

@ -74,7 +74,6 @@ $left-gutter: 64px;
    margin-left: 5px;
    display: inline-block;
    vertical-align: top;
-    height: 16px;
    overflow: hidden;
    user-select: none;

@ -421,15 +420,15 @@ $left-gutter: 64px;
 }

 .mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line {
-    border-left: $e2e-verified-color 4px solid;
+    border-left: $e2e-verified-color $EventTile_e2e_state_indicator_width solid;
 }

 .mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line {
-    border-left: $e2e-unverified-color 4px solid;
+    border-left: $e2e-unverified-color $EventTile_e2e_state_indicator_width solid;
 }

 .mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line {
-    border-left: $e2e-unknown-color 4px solid;
+    border-left: $e2e-unknown-color $EventTile_e2e_state_indicator_width solid;
 }

 .mx_EventTile:hover.mx_EventTile_verified.mx_EventTile_info .mx_EventTile_line,
@ -447,8 +446,7 @@ $left-gutter: 64px;
 .mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line > a > .mx_MessageTimestamp,
 .mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line > a > .mx_MessageTimestamp,
 .mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line > a > .mx_MessageTimestamp {
-    left: 3px;
-    width: auto;
+    width: $MessageTimestamp_width_hover;
 }

 // Explicit relationships so that it doesn't apply to nested EventTile components (e.g in Replies)
@ -493,7 +491,6 @@ $left-gutter: 64px;
        // https://github.com/vector-im/vector-web/issues/754
        overflow-x: overlay;
        overflow-y: visible;
-        max-height: 30vh;
    }

    code {
@ -502,6 +499,22 @@ $left-gutter: 64px;
    }
 }

+.mx_EventTile_lineNumbers {
+    float: left;
+    margin: 0 0.5em 0 -1.5em;
+    color: gray;
+}
+
+.mx_EventTile_lineNumber {
+    text-align: right;
+    display: block;
+    padding-left: 1em;
+}
+
+.mx_EventTile_collapsedCodeBlock {
+    max-height: 30vh;
+}
+
 .mx_EventTile:hover .mx_EventTile_body pre,
 .mx_EventTile.focus-visible:focus-within .mx_EventTile_body pre {
    border: 1px solid #e5e5e5; // deliberate constant as we're behind an invert filter
@ -513,21 +526,42 @@ $left-gutter: 64px;
 }

 // Inserted adjacent to <pre> blocks, (See TextualBody)
-.mx_EventTile_copyButton {
+.mx_EventTile_button {
    position: absolute;
    display: inline-block;
    visibility: hidden;
    cursor: pointer;
    top: 6px;
-    right: 6px;
+    right: 12px;
    width: 19px;
    height: 19px;
-    mask-image: url($copy-button-url);
    background-color: $message-action-bar-fg-color;
 }
+.mx_EventTile_buttonBottom {
+    top: 31px;
+}
+.mx_EventTile_copyButton {
+    mask-image: url($copy-button-url);
+}
+.mx_EventTile_collapseButton {
+    mask-size: 75%;
+    mask-position: center;
+    mask-repeat: no-repeat;
+    mask-image: url($collapse-button-url);
+}
+.mx_EventTile_expandButton {
+    mask-size: 75%;
+    mask-position: center;
+    mask-repeat: no-repeat;
+    mask-image: url($expand-button-url);
+}

 .mx_EventTile_body .mx_EventTile_pre_container:focus-within .mx_EventTile_copyButton,
-.mx_EventTile_body .mx_EventTile_pre_container:hover .mx_EventTile_copyButton {
+.mx_EventTile_body .mx_EventTile_pre_container:hover .mx_EventTile_copyButton,
+.mx_EventTile_body .mx_EventTile_pre_container:focus-within .mx_EventTile_collapseButton,
+.mx_EventTile_body .mx_EventTile_pre_container:hover .mx_EventTile_collapseButton,
+.mx_EventTile_body .mx_EventTile_pre_container:focus-within .mx_EventTile_expandButton,
+.mx_EventTile_body .mx_EventTile_pre_container:hover .mx_EventTile_expandButton {
    visibility: visible;
 }

--- a/res/css/views/rooms/_GroupLayout.scss
+++ b/res/css/views/rooms/_GroupLayout.scss
@ -20,7 +20,7 @@ $left-gutter: 64px;
 .mx_GroupLayout {
    .mx_EventTile {
        > .mx_SenderProfile {
-            line-height: $font-17px;
+            line-height: $font-20px;
            padding-left: $left-gutter;
        }

@ -34,11 +34,11 @@ $left-gutter: 64px;

        .mx_MessageTimestamp {
            position: absolute;
-            width: 46px; /* 8 + 30 (avatar) + 8 */
+            width: $MessageTimestamp_width;
        }

        .mx_EventTile_line, .mx_EventTile_reply {
-            padding-top: 3px;
+            padding-top: 1px;
            padding-bottom: 3px;
            line-height: $font-22px;
        }
--- a/res/css/views/rooms/_IRCLayout.scss
+++ b/res/css/views/rooms/_IRCLayout.scss
@ -207,6 +207,17 @@ $irc-line-height: $font-18px;
            width: unset;
            max-width: var(--name-width);
        }
+
+        .mx_SenderProfile_hover {
+            background: transparent;
+
+            > span {
+                > .mx_SenderProfile_name,
+                > .mx_SenderProfile_aux {
+                    min-width: inherit;
+                }
+            }
+        }
    }

    .mx_ProfileResizer {
--- a/res/css/views/rooms/_LinkPreviewWidget.scss
+++ b/res/css/views/rooms/_LinkPreviewWidget.scss
@ -19,6 +19,8 @@ limitations under the License.
    margin-right: 15px;
    margin-bottom: 15px;
    display: flex;
+    flex-direction: column;
+    max-width: 360px;
    border-left: 4px solid $preview-widget-bar-color;
    color: $preview-widget-fg-color;
 }
@ -55,6 +57,9 @@ limitations under the License.
    cursor: pointer;
    width: 18px;
    height: 18px;
+    padding: 0px 5px 5px 5px;
+    margin-left: auto;
+    margin-right: 0px;

    img {
        flex: 0 0 40px;
--- a/res/css/views/rooms/_RoomSublist.scss
+++ b/res/css/views/rooms/_RoomSublist.scss
@ -197,6 +197,9 @@ limitations under the License.

        .mx_RoomSublist_resizerHandles {
            flex: 0 0 4px;
+            display: flex;
+            justify-content: center;
+            width: 100%;
        }

        // Class name comes from the ResizableBox component
@ -207,17 +210,12 @@ limitations under the License.
            border-radius: 3px;

            // Override styles from library
-            width: unset !important;
+            max-width: 64px;
            height: 4px !important; // Update RESIZE_HANDLE_HEIGHT if this changes

            // This is positioned directly below the 'show more' button.
-            position: absolute;
+            position: relative !important;
            bottom: 0 !important; // override from library
-
-            // Together, these make the bar 64px wide
-            // These are also overridden from the library
-            left: calc(50% - 32px) !important;
-            right: calc(50% - 32px) !important;
        }

        &:hover, &.mx_RoomSublist_hasMenuOpen {
--- a/res/css/views/settings/_Notifications.scss
+++ b/res/css/views/settings/_Notifications.scss
@ -64,6 +64,7 @@ limitations under the License.

 .mx_UserNotifSettings_notifTable {
    display: table;
+    position: relative;
 }

 .mx_UserNotifSettings_notifTable .mx_Spinner {
--- a/res/img/element-icons/brands/apple.svg
+++ b/res/img/element-icons/brands/apple.svg
@ -0,0 +1,3 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.9803 1.2796C17.0771 2.54383 16.6773 3.79601 15.8657 4.77022C15.0784 5.74949 13.8854 6.31354 12.629 6.3006C12.5491 5.07276 12.9605 3.86352 13.7727 2.93921C14.5952 2.00238 15.7404 1.40982 16.9803 1.2796ZM20.9539 8.70795C19.5086 9.59652 18.6192 11.1635 18.5974 12.86C18.5994 14.7794 19.7489 16.5115 21.5166 17.2592C21.1766 18.3636 20.6642 19.4073 19.9982 20.3517C19.1038 21.6896 18.1661 22.9967 16.6777 23.0208C15.9698 23.0372 15.492 22.8336 14.9941 22.6215C14.4747 22.4003 13.9335 22.1697 13.0867 22.1697C12.1885 22.1697 11.6231 22.4077 11.0778 22.6372C10.6065 22.8355 10.1503 23.0275 9.50727 23.0542C8.08982 23.1067 7.00654 21.6263 6.07964 20.3009C4.22703 17.5943 2.78444 12.6733 4.71844 9.32483C5.62662 7.69286 7.32468 6.65727 9.19136 6.59696C9.99528 6.58042 10.7667 6.89028 11.443 7.16193C11.9602 7.36969 12.4219 7.5551 12.7999 7.5551C13.1321 7.5551 13.5809 7.37701 14.1038 7.16946C14.9276 6.84251 15.9356 6.44246 16.9628 6.55027C18.5589 6.60021 20.038 7.39984 20.9539 8.70795Z" fill="#17191C"/>
+</svg>
--- a/res/img/element-icons/brands/element.svg
+++ b/res/img/element-icons/brands/element.svg
@ -0,0 +1,6 @@
+<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.12012 1.02C6.12012 0.45667 6.57679 0 7.14012 0C10.8957 0 13.9401 3.04446 13.9401 6.8C13.9401 7.36333 13.4834 7.82 12.9201 7.82C12.3568 7.82 11.9001 7.36333 11.9001 6.8C11.9001 4.17112 9.76899 2.04 7.14012 2.04C6.57679 2.04 6.12012 1.58333 6.12012 1.02Z" fill="#1E1E1E"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.8799 15.98C10.8799 16.5433 10.4232 17 9.85988 17C6.10435 17 3.05989 13.9555 3.05989 10.2C3.05989 9.63667 3.51656 9.18 4.07989 9.18C4.64322 9.18 5.09989 9.63667 5.09989 10.2C5.09989 12.8289 7.23101 14.96 9.85988 14.96C10.4232 14.96 10.8799 15.4167 10.8799 15.98Z" fill="#1E1E1E"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1.02 10.88C0.45667 10.88 -1.99617e-08 10.4233 -4.45856e-08 9.86C-2.08745e-07 6.10447 3.04446 3.06 6.8 3.06C7.36333 3.06 7.82 3.51667 7.82 4.08C7.82 4.64334 7.36333 5.1 6.8 5.1C4.17113 5.1 2.04 7.23113 2.04 9.86C2.04 10.4233 1.58333 10.88 1.02 10.88Z" fill="#1E1E1E"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.98 6.12C16.5433 6.12 17 6.57666 17 7.14C17 10.8955 13.9555 13.94 10.2 13.94C9.63667 13.94 9.18 13.4833 9.18 12.92C9.18 12.3567 9.63667 11.9 10.2 11.9C12.8289 11.9 14.96 9.76887 14.96 7.14C14.96 6.57666 15.4167 6.12 15.98 6.12Z" fill="#1E1E1E"/>
+</svg>
--- a/res/img/element-icons/brands/facebook.svg
+++ b/res/img/element-icons/brands/facebook.svg
@ -0,0 +1,9 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="2" y="1" width="22" height="22">
+<path d="M2.10154 1.5H23.1003V22.3716H2.10154V1.5Z" fill="white"/>
+</mask>
+<g mask="url(#mask0)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M23.1 11.999C23.1 6.20003 18.399 1.49902 12.6 1.49902C6.801 1.49902 2.1 6.20003 2.1 11.999C2.1 17.2399 5.9397 21.5838 10.9594 22.3715V15.0342H8.29336V11.999H10.9594V9.68574C10.9594 7.05418 12.5269 5.60059 14.9254 5.60059C16.0742 5.60059 17.2758 5.80566 17.2758 5.80566V8.38965H15.9518C14.6474 8.38965 14.2406 9.19903 14.2406 10.0294V11.999H17.1527L16.6872 15.0342H14.2406V22.3715C19.2603 21.5838 23.1 17.2399 23.1 11.999Z" fill="#1877F2"/>
+</g>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.6872 15.0342L17.1527 11.999H14.2406V10.0294C14.2406 9.19903 14.6474 8.38965 15.9518 8.38965H17.2758V5.80566C17.2758 5.80566 16.0742 5.60059 14.9254 5.60059C12.5269 5.60059 10.9594 7.05418 10.9594 9.68574V11.999H8.29336V15.0342H10.9594V22.3715C11.494 22.4553 12.0419 22.499 12.6 22.499C13.1581 22.499 13.706 22.4553 14.2406 22.3715V15.0342H16.6872Z" fill="white"/>
+</svg>
--- a/res/img/element-icons/brands/github.svg
+++ b/res/img/element-icons/brands/github.svg
@ -0,0 +1,3 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.8421 7.10595C19.9703 5.6121 18.7876 4.42942 17.2939 3.55764C15.8 2.68581 14.169 2.25001 12.3999 2.25001C10.6311 2.25001 8.9996 2.68594 7.50597 3.55764C6.01212 4.42938 4.82953 5.6121 3.95765 7.10595C3.08592 8.59976 2.65002 10.231 2.65002 11.9997C2.65002 14.1242 3.26987 16.0346 4.50987 17.7315C5.74973 19.4284 7.35145 20.6027 9.3149 21.2543C9.54345 21.2967 9.71264 21.2669 9.82265 21.1656C9.9327 21.0641 9.98766 20.937 9.98766 20.7848C9.98766 20.7595 9.98548 20.531 9.98126 20.0993C9.9769 19.6676 9.97485 19.291 9.97485 18.9696L9.68285 19.0202C9.49667 19.0543 9.26181 19.0687 8.97826 19.0646C8.69484 19.0607 8.40061 19.031 8.09598 18.9757C7.79121 18.921 7.50775 18.7941 7.24536 18.5952C6.98311 18.3963 6.79693 18.1359 6.68688 17.8145L6.55993 17.5224C6.47531 17.3279 6.3421 17.1119 6.1601 16.875C5.97811 16.638 5.79406 16.4773 5.60789 16.3927L5.519 16.329C5.45978 16.2868 5.40482 16.2358 5.35399 16.1766C5.30321 16.1174 5.2652 16.0582 5.23981 15.9988C5.21437 15.9395 5.23545 15.8908 5.30326 15.8526C5.37107 15.8144 5.49361 15.7959 5.67143 15.7959L5.92524 15.8338C6.09451 15.8677 6.3039 15.9691 6.55366 16.1384C6.80329 16.3077 7.0085 16.5277 7.16933 16.7984C7.36408 17.1455 7.59873 17.4099 7.87392 17.5919C8.14889 17.7739 8.42613 17.8648 8.70537 17.8648C8.98461 17.8648 9.22579 17.8436 9.429 17.8015C9.63198 17.7592 9.82243 17.6955 10.0002 17.611C10.0764 17.0437 10.2838 16.6079 10.6222 16.3033C10.1399 16.2526 9.70619 16.1762 9.32099 16.0747C8.93601 15.9731 8.53818 15.8081 8.12777 15.5794C7.71714 15.3509 7.37649 15.0673 7.10574 14.7289C6.83495 14.3904 6.61271 13.9459 6.43934 13.3959C6.26588 12.8457 6.17913 12.211 6.17913 11.4916C6.17913 10.4674 6.51351 9.59578 7.18213 8.87633C6.86892 8.10629 6.89849 7.24304 7.27093 6.28668C7.51638 6.21043 7.88037 6.26765 8.36273 6.45801C8.84517 6.64845 9.1984 6.8116 9.42277 6.94686C9.64714 7.08208 9.82692 7.19666 9.96236 7.2896C10.7496 7.06963 11.562 6.95962 12.3998 6.95962C13.2377 6.95962 14.0503 7.06963 14.8376 7.2896L15.32 6.98505C15.6498 6.78185 16.0394 6.59563 16.4877 6.42635C16.9363 6.25716 17.2793 6.21056 17.5164 6.28682C17.8971 7.24322 17.931 8.10642 17.6177 8.87647C18.2863 9.59591 18.6208 10.4677 18.6208 11.4918C18.6208 12.2111 18.5337 12.8478 18.3605 13.4023C18.1871 13.9568 17.963 14.4008 17.688 14.7353C17.4127 15.0697 17.0699 15.3511 16.6595 15.5795C16.249 15.808 15.851 15.973 15.466 16.0747C15.0809 16.1763 14.6472 16.2527 14.1648 16.3035C14.6048 16.6842 14.8248 17.2851 14.8248 18.106V20.7845C14.8248 20.9367 14.8777 21.0637 14.9836 21.1652C15.0894 21.2665 15.2565 21.2964 15.485 21.2539C17.4487 20.6024 19.0505 19.4281 20.2903 17.7311C21.53 16.0343 22.15 14.1238 22.15 11.9993C22.1496 10.2309 21.7135 8.59976 20.8421 7.10595Z" fill="black"/>
+</svg>
--- a/res/img/element-icons/brands/gitlab.svg
+++ b/res/img/element-icons/brands/gitlab.svg
@ -0,0 +1,9 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.0005 20.3296L15.3166 10.1293H8.68921L12.0005 20.3296Z" fill="#E24329"/>
+<path d="M4.04348 10.1293L3.03364 13.2283C2.94226 13.5097 3.04095 13.8203 3.28214 13.9957L11.9996 20.3296L4.04348 10.1293Z" fill="#FCA326"/>
+<path d="M4.04248 10.1289H8.68727L6.68828 3.98572C6.58597 3.67143 6.1401 3.67143 6.03411 3.98572L4.04248 10.1289Z" fill="#E24329"/>
+<path d="M19.9602 10.1293L20.9664 13.2283C21.0577 13.5097 20.9591 13.8203 20.7179 13.9957L11.9991 20.3296L19.9602 10.1293Z" fill="#FCA326"/>
+<path d="M19.9616 10.1289H15.3168L17.3121 3.98572C17.4144 3.67143 17.8603 3.67143 17.9663 3.98572L19.9616 10.1289Z" fill="#E24329"/>
+<path d="M11.9991 20.3296L15.3153 10.1293H19.9601L11.9991 20.3296Z" fill="#FC6D26"/>
+<path d="M11.9985 20.3296L4.04248 10.1293H8.68727L11.9985 20.3296Z" fill="#FC6D26"/>
+</svg>
--- a/res/img/element-icons/brands/google.svg
+++ b/res/img/element-icons/brands/google.svg
@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22.501 12.2333C22.501 11.37 22.4296 10.74 22.2748 10.0867H12.2153V13.9833H18.12C18.001 14.9517 17.3582 16.41 15.9296 17.3899L15.9096 17.5204L19.0902 19.9351L19.3106 19.9567C21.3343 18.125 22.501 15.43 22.501 12.2333Z" fill="#4285F4"/>
+<path d="M12.2147 22.5001C15.1075 22.5001 17.5361 21.5667 19.3099 19.9567L15.929 17.39C15.0242 18.0083 13.8099 18.44 12.2147 18.44C9.38142 18.44 6.97669 16.6083 6.11947 14.0767L5.99382 14.0871L2.68656 16.5955L2.64331 16.7133C4.40519 20.1433 8.02423 22.5001 12.2147 22.5001Z" fill="#34A853"/>
+<path d="M6.12022 14.0767C5.89403 13.4234 5.76313 12.7233 5.76313 12C5.76313 11.2767 5.89403 10.5767 6.10832 9.92337L6.10233 9.78423L2.75361 7.2356L2.64405 7.28667C1.91789 8.71002 1.50122 10.3084 1.50122 12C1.50122 13.6917 1.91789 15.29 2.64405 16.7133L6.12022 14.0767Z" fill="#FBBC05"/>
+<path d="M12.2148 5.55997C14.2267 5.55997 15.5838 6.41163 16.3576 7.12335L19.3814 4.23C17.5243 2.53834 15.1076 1.5 12.2148 1.5C8.02426 1.5 4.4052 3.85665 2.64331 7.28662L6.10759 9.92332C6.97671 7.39166 9.38146 5.55997 12.2148 5.55997Z" fill="#EB4335"/>
+</svg>
--- a/res/img/element-icons/brands/twitter.svg
+++ b/res/img/element-icons/brands/twitter.svg
@ -0,0 +1,3 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.04155 21C6.6153 21 4.35363 20.2943 2.45 19.0767C4.06624 19.1813 6.91855 18.9308 8.69268 17.2386C6.0238 17.1161 4.82019 15.0692 4.6632 14.1945C4.88997 14.2819 5.97147 14.3869 6.582 14.142C3.51192 13.3722 3.04094 10.678 3.1456 9.85573C3.72124 10.2581 4.69809 10.3981 5.08185 10.3631C2.22109 8.31618 3.25027 5.23707 3.75613 4.57226C5.80911 7.4165 8.8859 9.01393 12.6923 9.10278C12.6205 8.78802 12.5826 8.46032 12.5826 8.12373C12.5826 5.70819 14.5351 3.75 16.9435 3.75C18.2019 3.75 19.3358 4.28457 20.1318 5.13963C20.9727 4.94258 22.2382 4.4813 22.8569 4.0824C22.5451 5.20208 21.5742 6.13612 20.9869 6.48231C20.9918 6.49408 20.9821 6.47048 20.9869 6.48231C21.5028 6.40428 22.8986 6.13603 23.45 5.76192C23.1773 6.39094 22.148 7.4368 21.3033 8.02232C21.4604 14.9535 16.1574 21 9.04155 21Z" fill="#1D9BF0"/>
+</svg>
--- a/res/img/feather-customised/widget/maximise.svg
+++ b/res/img/feather-customised/widget/maximise.svg
--- a/res/img/feather-customised/widget/minimise.svg
+++ b/res/img/feather-customised/widget/minimise.svg
--- a/res/themes/dark/css/_dark.scss
+++ b/res/themes/dark/css/_dark.scss
@ -258,6 +258,12 @@ $composer-shadow-color: rgba(0, 0, 0, 0.28);
 // markdown overrides:
 .mx_EventTile_content .markdown-body pre:hover {
    border-color: #808080 !important; // inverted due to rules below
+    scrollbar-color: rgba(0, 0, 0, 0.2) transparent; // copied from light theme due to inversion below
+    // the code above works only in Firefox, this is for other browsers
+    // see https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color
+    &::-webkit-scrollbar-thumb {
+        background-color: rgba(0, 0, 0, 0.2); // copied from light theme due to inversion below
+    }
 }
 .mx_EventTile_content .markdown-body {
    pre, code {
--- a/res/themes/legacy-light/css/_legacy-light.scss
+++ b/res/themes/legacy-light/css/_legacy-light.scss
@ -237,7 +237,8 @@ $event-redacted-border-color: #cccccc;
 $event-timestamp-color: #acacac;

 $copy-button-url: "$(res)/img/feather-customised/clipboard.svg";
-
+$collapse-button-url: "$(res)/img/feather-customised/minimise.svg";
+$expand-button-url: "$(res)/img/feather-customised/maximise.svg";

 // e2e
 $e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent-color
--- a/res/themes/light/css/_light.scss
+++ b/res/themes/light/css/_light.scss
@ -237,6 +237,8 @@ $event-redacted-border-color: #cccccc;
 $event-timestamp-color: #acacac;

 $copy-button-url: "$(res)/img/feather-customised/clipboard.svg";
+$collapse-button-url: "$(res)/img/feather-customised/minimise.svg";
+$expand-button-url: "$(res)/img/feather-customised/maximise.svg";

 // e2e
 $e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent-color