New right panel visual language (#11664)

* New right panel visual language * Upgrade Compound * Align old room header with right panel * Rigth panel look and feel * Fix linting and e2e tests * Update snapshot * Add test * Lint * Remove screenshot local script * Update snapshots and UI based on feedback * fix i18n key * Update right panel visuals * Fix tests * lintfixes * fix tests * fix tests * Add tests for search icon * Fix invite dialog spec
2024-11-22 01:05:42 +03:00 · 2023-10-20 14:30:37 +01:00 · 2023-10-20 14:30:37 +01:00 · f784a085fd
commit f784a085fd
parent a63b99f687
31 changed files with 331 additions and 342 deletions
--- a/cypress/e2e/invite/invite-dialog.spec.ts
+++ b/cypress/e2e/invite/invite-dialog.spec.ts
@ -53,7 +53,7 @@ describe("Invite dialog", function () {
            cy.findByRole("button", { name: /People/ }).click();
        });

-        cy.get(".mx_BaseCard_header").within(() => {
+        cy.get(".mx_BaseCard").within(() => {
            // Click "Invite to this room" button
            // Regex pattern due to "mx_MemberList_invite span::before"
            cy.findByRole("button", { name: /Invite to this room/ }).click();
--- a/cypress/e2e/right-panel/file-panel.spec.ts
+++ b/cypress/e2e/right-panel/file-panel.spec.ts
@ -30,7 +30,7 @@ const viewRoomSummaryByName = (name: string): Chainable<JQuery<HTMLElement>> =>

 const checkRoomSummaryCard = (name: string): Chainable<JQuery<HTMLElement>> => {
    cy.get(".mx_RoomSummaryCard").should("have.length", 1);
-    return cy.get(".mx_BaseCard_header").should("contain", name);
+    return cy.get(".mx_RoomSummaryCard").should("contain", name);
 };

 const uploadFile = (file: string) => {
--- a/cypress/e2e/right-panel/right-panel.spec.ts
+++ b/cypress/e2e/right-panel/right-panel.spec.ts
@ -43,7 +43,7 @@ const viewRoomSummaryByName = (name: string): Chainable<JQuery<HTMLElement>> =>

 const checkRoomSummaryCard = (name: string): Chainable<JQuery<HTMLElement>> => {
    cy.get(".mx_RoomSummaryCard").should("have.length", 1);
-    return cy.get(".mx_BaseCard_header").should("contain", name);
+    return cy.get(".mx_RoomSummaryCard").should("contain", name);
 };

 describe("RightPanel", () => {
--- a/package.json
+++ b/package.json
@ -70,7 +70,7 @@
        "@sentry/tracing": "^7.0.0",
        "@testing-library/react-hooks": "^8.0.1",
        "@vector-im/compound-design-tokens": "^0.0.6",
-        "@vector-im/compound-web": "^0.5.0",
+        "@vector-im/compound-web": "0.5.4",
        "@zxcvbn-ts/core": "^3.0.4",
        "@zxcvbn-ts/language-common": "^3.0.4",
        "@zxcvbn-ts/language-en": "^3.0.2",
--- a/res/css/_common.pcss
+++ b/res/css/_common.pcss
@ -292,29 +292,6 @@ legend {
    }
 }

-/*** panels ***/
-.dark-panel {
-    background-color: $dark-panel-bg-color;
-
-    :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type="text"],
-    :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type="search"],
-    .mx_textinput {
-        color: $input-darker-fg-color;
-        background-color: $background;
-        border: none;
-    }
-}
-
-.light-panel {
-    :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type="text"],
-    :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type="search"],
-    .mx_textinput {
-        color: $input-darker-fg-color;
-        background-color: $input-lighter-bg-color;
-        border: none;
-    }
-}
-
 /* Prevent ugly dotted highlight around selected elements in Firefox */
 ::-moz-focus-inner {
    border: 0;
@ -891,3 +868,10 @@ legend {
        }
    }
 }
+
+.mx_lineClamp {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: var(--mx-line-clamp, 1);
+    overflow: hidden;
+}
--- a/res/css/structures/_MainSplit.pcss
+++ b/res/css/structures/_MainSplit.pcss
@ -23,17 +23,11 @@ limitations under the License.
 }

 .mx_MainSplit > .mx_RightPanel_ResizeWrapper {
-    padding: var(--container-gap-width);
-    /* The resizer should be centered: only half of the gap-width is handled by the right panel. */
-    /* The other half by the RoomView. */
-    padding-left: calc(var(--container-gap-width) / 2);
-    height: calc(100vh - 51px); /* height of .mx_LegacyRoomHeader.light-panel */
-
    &:hover .mx_ResizeHandle--horizontal::before {
        position: absolute;
        top: 50%;
        left: 50%;
-        transform: translate(-50%, -50%);
+        transform: translate(-150%, -50%);

        height: 64px; /* to match width of the ones on roomlist */
        width: 4px;
--- a/res/css/structures/_MatrixChat.pcss
+++ b/res/css/structures/_MatrixChat.pcss
@ -76,24 +76,6 @@ limitations under the License.
    height: 100%;
 }

-/* We'd like to remove this, but this makes matrixchat's resizehandle's */
-/* negative margin greater than its positive padding. If it's the same */
-/* or less, Safari and other WebKit based browsers get confused about overflows somehow and */
-/* https://github.com/vector-im/element-web/issues/19863 happens. */
-.mx_MatrixChat > .mx_ResizeHandle.mx_ResizeHandle--horizontal {
-    margin: 0 calc(-5.5px - var(--container-gap-width) / 2) 0 calc(-6.5px + var(--container-gap-width) / 2);
-    /* The condition to prevent bleeding is: (margin-left + margin-right < -11px) */
-    /* (IF there is NO margin on the leftPanel_wrapper) */
-    /* The resizeHandle does not change the gap between the left panel and the room view: */
-    /*  the resizeHandle width is: */
-    /*      11px =  10px (padding) + 1px (width) */
-    /*      and the total negative margin is -12px -> */
-    /*      the handle requires no space */
-    /* right: -6px left: -6px positions the element exactly on the edge of leftPanel. */
-    /* left+=1 and right-=1 => resizeHandle moves 1px to the right closer to the center of the gap. */
-    /* We want the handle to be in the middle of the gap so it is shifted by (var(--container-gap-width) / 2) */
-}
-
 .mx_MatrixChat > .mx_ResizeHandle--horizontal:hover {
    position: relative;

--- a/res/css/structures/_RightPanel.pcss
+++ b/res/css/structures/_RightPanel.pcss
@ -21,8 +21,7 @@ limitations under the License.
    position: relative;
    display: flex;
    flex-direction: column;
-    border-radius: 8px;
-    padding: var(--container-border-width) 0;
+    border-left: 1px solid $separator;
    box-sizing: border-box;
    height: 100%;
    contain: strict;
--- a/res/css/views/right_panel/_BaseCard.pcss
+++ b/res/css/views/right_panel/_BaseCard.pcss
@ -15,12 +15,10 @@ limitations under the License.
 */

 .mx_BaseCard {
-    --BaseCard_padding-inline: $spacing-8;
    --BaseCard_EventTile_line-padding-block: 2px;
    --BaseCard_EventTile-spacing-inline: 36px;
-    --BaseCard_header-button-size: 24px;
+    --BaseCard_header-button-size: 28px;

-    padding: 0 var(--BaseCard_padding-inline);
    overflow: hidden;
    display: flex;
    flex-direction: column;
@ -28,9 +26,18 @@ limitations under the License.
    font-size: var(--cpd-font-size-body-md);

    .mx_BaseCard_header {
-        --BaseCard_header_button-margin: $spacing-12;
-
-        margin: $spacing-4 0 $spacing-12;
+        height: 64px;
+        padding: var(--cpd-space-3x);
+        box-sizing: border-box;
+        /* changing the color from $separator to transparent as it is
+           the best visual output during the transition period. This will be
+           reintroduced at a later stage. */
+        border-bottom: 1px solid transparent;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: var(--cpd-space-2x);
+        flex-shrink: 0;

        > h2 {
            margin: 0 44px;
@ -40,60 +47,6 @@ limitations under the License.
            white-space: nowrap;
        }

-        .mx_BaseCard_back,
-        .mx_BaseCard_close {
-            position: absolute;
-            background-color: rgba(141, 151, 165, 0.2);
-            width: var(--BaseCard_header-button-size);
-            height: var(--BaseCard_header-button-size);
-            margin: var(--BaseCard_header_button-margin);
-            top: 0;
-            border-radius: 50%;
-
-            &::before {
-                content: "";
-                position: absolute;
-                height: inherit;
-                width: inherit;
-                top: 0;
-                left: 0;
-                mask-repeat: no-repeat;
-                mask-position: center;
-                background-color: $icon-button-color;
-            }
-        }
-
-        .mx_BaseCard_back {
-            left: 0;
-            margin-inline-start: calc(var(--BaseCard_header_button-margin) - $spacing-4);
-
-            &::before {
-                transform: rotate(90deg);
-                mask-size: 22px;
-                mask-image: url("$(res)/img/feather-customised/chevron-down.svg");
-            }
-
-            /* Header title with the back button */
-            ~ .mx_BaseCard_header_title {
-                width: calc(100% - 60px);
-                margin-inline-start: var(--BaseCard_header-button-size);
-
-                .mx_BaseCard_header_title_heading {
-                    margin-inline-start: 6px;
-                }
-            }
-        }
-
-        .mx_BaseCard_close {
-            right: 0;
-            margin-inline-end: calc(var(--BaseCard_header_button-margin) - $spacing-4);
-
-            &::before {
-                mask-image: url("$(res)/img/icons-close.svg");
-                mask-size: 8px;
-            }
-        }
-
        .mx_BaseCard_header_title {
            display: flex;
            align-items: center;
@ -103,7 +56,7 @@ limitations under the License.
            flex: 1;

            .mx_BaseCard_header_title_heading {
-                color: $icon-button-color;
+                color: $primary-content;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
@ -164,7 +117,6 @@ limitations under the License.
            position: relative;
            font: var(--cpd-font-heading-sm-medium);
            height: 20px;
-            border-radius: 8px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
@ -206,16 +158,40 @@ limitations under the License.
    }
 }

-.mx_FilePanel,
-.mx_UserInfo,
-.mx_MemberList {
-    &.mx_BaseCard {
-        padding: $spacing-32 0 0;
+.mx_BaseCard_back,
+.mx_BaseCard_close {
+    position: relative;
+    background-color: var(--cpd-color-bg-subtle-secondary);
+    width: var(--BaseCard_header-button-size);
+    height: var(--BaseCard_header-button-size);
+    border-radius: 50%;

-        .mx_AutoHideScrollbar {
-            margin-right: unset;
-            padding-right: unset;
-        }
+    &::before {
+        content: "";
+        position: absolute;
+        height: inherit;
+        width: inherit;
+        top: 0;
+        left: 0;
+        mask-repeat: no-repeat;
+        mask-position: center;
+        background-color: var(--cpd-color-icon-secondary);
+    }
+}
+
+.mx_BaseCard_back {
+    order: 0; /* always first! */
+    &::before {
+        transform: rotate(90deg);
+        mask-size: 22px;
+        mask-image: url("$(res)/img/feather-customised/chevron-down.svg");
+    }
+}
+
+.mx_BaseCard_close {
+    order: 999; /* always last */
+    &::before {
+        mask-image: url("$(res)/img/icons-close.svg");
    }
 }

@ -230,7 +206,7 @@ limitations under the License.
        }

        font: var(--cpd-font-body-sm-regular);
-        color: $secondary-content;
+        color: $primary-content;
        padding-top: 10px;
        padding-bottom: 10px;

--- a/res/css/views/right_panel/_RoomSummaryCard.pcss
+++ b/res/css/views/right_panel/_RoomSummaryCard.pcss
@ -15,80 +15,80 @@ limitations under the License.
 */

 .mx_RoomSummaryCard {
-    .mx_BaseCard_header {
+    .mx_RoomSummaryCard_container {
        text-align: center;
        margin-top: $spacing-20;
+    }

-        .mx_RoomSummaryCard_roomName,
-        .mx_RoomSummaryCard_alias {
-            display: -webkit-box;
-            -webkit-line-clamp: 2;
-            -webkit-box-orient: vertical;
-            white-space: pre-wrap;
-            overflow: hidden;
+    .mx_RoomSummaryCard_roomName,
+    .mx_RoomSummaryCard_alias {
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        white-space: pre-wrap;
+        overflow: hidden;
+    }
+
+    .mx_RoomSummaryCard_roomName {
+        margin: $spacing-12 0 $spacing-4;
+        font-weight: var(--cpd-font-weight-semibold);
+        font-size: $font-17px;
+    }
+
+    .mx_RoomSummaryCard_alias {
+        font: var(--cpd-font-body-md-regular);
+        color: $secondary-content;
+        text-overflow: ellipsis;
+    }
+
+    .mx_RoomSummaryCard_avatar {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        .mx_RoomSummaryCard_e2ee {
+            display: inline-block;
+            position: relative;
+            width: 54px;
+            height: 54px;
+            border-radius: 50%;
+            background-color: #737d8c;
+            margin-left: -10px; /* overlap */
+            border: 3px solid $dark-panel-bg-color;
+
+            &::before {
+                content: "";
+                position: absolute;
+                top: 13px;
+                left: 13px;
+                height: 28px;
+                width: 28px;
+                mask-size: cover;
+                mask-repeat: no-repeat;
+                mask-position: center;
+                mask-image: url("$(res)/img/e2e/disabled.svg");
+                background-color: #ffffff;
+            }
        }

-        .mx_RoomSummaryCard_roomName {
-            margin: $spacing-12 0 $spacing-4;
-            font-weight: var(--cpd-font-weight-semibold);
-            font-size: $font-17px;
+        .mx_RoomSummaryCard_e2ee_normal {
+            background-color: #424446;
+            &::before {
+                mask-image: url("$(res)/img/e2e/normal.svg");
+            }
        }

-        .mx_RoomSummaryCard_alias {
-            font: var(--cpd-font-body-md-regular);
-            color: $secondary-content;
-            text-overflow: ellipsis;
+        .mx_RoomSummaryCard_e2ee_verified {
+            background-color: $e2e-verified-color;
+            &::before {
+                mask-image: url("$(res)/img/e2e/verified.svg");
+            }
        }

-        .mx_RoomSummaryCard_avatar {
-            display: flex;
-            justify-content: center;
-            align-items: center;
-
-            .mx_RoomSummaryCard_e2ee {
-                display: inline-block;
-                position: relative;
-                width: 54px;
-                height: 54px;
-                border-radius: 50%;
-                background-color: #737d8c;
-                margin-left: -10px; /* overlap */
-                border: 3px solid $dark-panel-bg-color;
-
-                &::before {
-                    content: "";
-                    position: absolute;
-                    top: 13px;
-                    left: 13px;
-                    height: 28px;
-                    width: 28px;
-                    mask-size: cover;
-                    mask-repeat: no-repeat;
-                    mask-position: center;
-                    mask-image: url("$(res)/img/e2e/disabled.svg");
-                    background-color: #ffffff;
-                }
-            }
-
-            .mx_RoomSummaryCard_e2ee_normal {
-                background-color: #424446;
-                &::before {
-                    mask-image: url("$(res)/img/e2e/normal.svg");
-                }
-            }
-
-            .mx_RoomSummaryCard_e2ee_verified {
-                background-color: $e2e-verified-color;
-                &::before {
-                    mask-image: url("$(res)/img/e2e/verified.svg");
-                }
-            }
-
-            .mx_RoomSummaryCard_e2ee_warning {
-                background-color: $e2e-warning-color;
-                &::before {
-                    mask-image: url("$(res)/img/e2e/warning.svg");
-                }
+        .mx_RoomSummaryCard_e2ee_warning {
+            background-color: $e2e-warning-color;
+            &::before {
+                mask-image: url("$(res)/img/e2e/warning.svg");
            }
        }
    }
@ -244,6 +244,21 @@ limitations under the License.
    }
 }

+.mx_RoomSummaryCard_header {
+    padding: 15px 12px;
+
+    .mx_BaseCard_close {
+        flex-shrink: 0;
+    }
+}
+
+.mx_RoomSummaryCard_search input {
+    /* Overriding very broad CSS rules */
+    border: 0 !important;
+    margin: 0 !important;
+    cursor: pointer;
+}
+
 .mx_RoomSummaryCard_icon_people::before {
    mask-image: url("$(res)/img/element-icons/room/members.svg");
 }
@ -279,3 +294,19 @@ limitations under the License.
 .mx_RoomSummaryCard_icon_search::before {
    mask-image: url("$(res)/img/element-icons/room/search-inset.svg");
 }
+
+.mx_RoomSummaryCard_searchBtn {
+    background: var(--cpd-color-bg-canvas-default);
+    color: var(--cpd-color-icon-primary);
+    border: 1px solid var(--cpd-color-gray-400);
+    border-radius: 50%;
+    width: 36px;
+    height: 36px;
+    padding: var(--cpd-space-2x);
+    cursor: pointer;
+    transition: all 0.3s ease;
+
+    &:hover {
+        background: var(--cpd-color-bg-subtle-primary);
+    }
+}
--- a/res/css/views/right_panel/_TimelineCard.pcss
+++ b/res/css/views/right_panel/_TimelineCard.pcss
@ -138,7 +138,7 @@ limitations under the License.

            &.mx_EventTile_info .mx_MessageActionBar {
                /* 1px: border width */
-                inset-inline-end: calc(var(--container-gap-width) + var(--BaseCard_padding-inline) + 1px);
+                inset-inline-end: calc(var(--container-gap-width) + 1px);
            }

            .mx_ReactionsRow {
--- a/res/css/views/rooms/_LegacyRoomHeader.pcss
+++ b/res/css/views/rooms/_LegacyRoomHeader.pcss
@ -55,8 +55,7 @@ limitations under the License.
    display: flex;
    align-items: center;
    min-width: 0;
-    margin: 0 20px 0 16px;
-    padding-top: 6px;
+    padding: 10px 20px 9px 16px;
    border-bottom: 1px solid $separator;

    .mx_InviteOnlyIcon_large {
--- a/res/css/views/rooms/_MemberList.pcss
+++ b/res/css/views/rooms/_MemberList.pcss
@ -77,36 +77,6 @@ limitations under the License.
 }

 .mx_MemberList_invite {
-    flex: 0 0 auto;
-    position: relative;
-    background-color: $accent;
-    border-radius: 4px;
-    margin: 5px 9px 9px;
-    display: flex;
-    justify-content: center;
-    color: $button-fg-color;
-    font-weight: var(--cpd-font-weight-semibold);
-}
-
-.mx_MemberList_invite.mx_AccessibleButton_disabled {
-    background-color: $info-plinth-fg-color;
-    cursor: not-allowed;
-}
-
-.mx_MemberList_invite span {
-    padding: 8px 0;
-    display: inline-flex;
-
-    &::before {
-        content: "";
-        display: inline-block;
-        background-color: $button-fg-color;
-        mask-image: url("$(res)/img/element-icons/room/invite.svg");
-        mask-position: center;
-        mask-repeat: no-repeat;
-        mask-size: 20px;
-        width: 20px;
-        height: 20px;
-        margin-right: 5px;
-    }
+    margin: 0 var(--cpd-space-2x);
+    width: calc(100% - var(--cpd-space-2x));
 }
--- a/res/css/views/rooms/_RoomHeader.pcss
+++ b/res/css/views/rooms/_RoomHeader.pcss
@ -16,6 +16,7 @@ limitations under the License.

 .mx_RoomHeader {
    height: 64px;
+    box-sizing: border-box;
    padding: 0 var(--cpd-space-3x);
    border-bottom: 1px solid $separator;
    background-color: $background;
--- a/src/components/structures/RightPanel.tsx
+++ b/src/components/structures/RightPanel.tsx
@ -308,7 +308,7 @@ export default class RightPanel extends React.Component<Props, IState> {
        }

        return (
-            <aside className="mx_RightPanel dark-panel" id="mx_RightPanel">
+            <aside className="mx_RightPanel" id="mx_RightPanel">
                {card}
            </aside>
        );
--- a/src/components/structures/RoomView.tsx
+++ b/src/components/structures/RoomView.tsx
@ -2587,27 +2587,6 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
                        <EffectsOverlay roomWidth={this.roomView.current.offsetWidth} />
                    )}
                    <ErrorBoundary>
-                        {SettingsStore.getValue("feature_new_room_decoration_ui") ? (
-                            <RoomHeader room={this.state.room} />
-                        ) : (
-                            <LegacyRoomHeader
-                                room={this.state.room}
-                                searchInfo={this.state.search}
-                                oobData={this.props.oobData}
-                                inRoom={myMembership === "join"}
-                                onSearchClick={onSearchClick}
-                                onInviteClick={onInviteClick}
-                                onForgetClick={showForgetButton ? onForgetClick : null}
-                                e2eStatus={this.state.e2eStatus}
-                                onAppsClick={this.state.hasPinnedWidgets ? onAppsClick : null}
-                                appsShown={this.state.showApps}
-                                excludedRightPanelPhaseButtons={excludedRightPanelPhaseButtons}
-                                showButtons={!this.viewsLocalRoom}
-                                enableRoomOptionsMenu={!this.viewsLocalRoom}
-                                viewingCall={viewingCall}
-                                activeCall={this.state.activeCall}
-                            />
-                        )}
                        <MainSplit
                            panel={rightPanel}
                            resizeNotifier={this.props.resizeNotifier}
@ -2621,6 +2600,27 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
                                ref={this.roomViewBody}
                                data-layout={this.state.layout}
                            >
+                                {SettingsStore.getValue("feature_new_room_decoration_ui") ? (
+                                    <RoomHeader room={this.state.room} />
+                                ) : (
+                                    <LegacyRoomHeader
+                                        room={this.state.room}
+                                        searchInfo={this.state.search}
+                                        oobData={this.props.oobData}
+                                        inRoom={myMembership === "join"}
+                                        onSearchClick={onSearchClick}
+                                        onInviteClick={onInviteClick}
+                                        onForgetClick={showForgetButton ? onForgetClick : null}
+                                        e2eStatus={this.state.e2eStatus}
+                                        onAppsClick={this.state.hasPinnedWidgets ? onAppsClick : null}
+                                        appsShown={this.state.showApps}
+                                        excludedRightPanelPhaseButtons={excludedRightPanelPhaseButtons}
+                                        showButtons={!this.viewsLocalRoom}
+                                        enableRoomOptionsMenu={!this.viewsLocalRoom}
+                                        viewingCall={viewingCall}
+                                        activeCall={this.state.activeCall}
+                                    />
+                                )}
                                {mainSplitBody}
                            </div>
                        </MainSplit>
--- a/src/components/utils/Flex.tsx
+++ b/src/components/utils/Flex.tsx
@ -46,7 +46,7 @@ type FlexProps = {
     * The justification of the flex children
     * @default start
     */
-    justify?: "start" | "center" | "end" | "between";
+    justify?: "start" | "center" | "end" | "space-between";
    /**
     * The spacing between the flex children, expressed with the CSS unit
     * @default 0
--- a/src/components/views/right_panel/BaseCard.tsx
+++ b/src/components/views/right_panel/BaseCard.tsx
@ -25,7 +25,7 @@ import { backLabelForPhase } from "../../../stores/right-panel/RightPanelStorePh
 import { CardContext } from "./context";

 interface IProps {
-    header?: ReactNode;
+    header?: ReactNode | null;
    footer?: ReactNode;
    className?: string;
    withoutScrollContainer?: boolean;
@ -86,11 +86,13 @@ const BaseCard: React.FC<IProps> = forwardRef<HTMLDivElement, IProps>(
        return (
            <CardContext.Provider value={{ isCard: true }}>
                <div className={classNames("mx_BaseCard", className)} ref={ref} onKeyDown={onKeyDown}>
-                    <div className="mx_BaseCard_header">
-                        {backButton}
-                        {closeButton}
-                        {header}
-                    </div>
+                    {header !== null && (
+                        <div className="mx_BaseCard_header">
+                            {backButton}
+                            {closeButton}
+                            {header}
+                        </div>
+                    )}
                    {children}
                    {footer && <div className="mx_BaseCard_footer">{footer}</div>}
                </div>
--- a/src/components/views/right_panel/RoomSummaryCard.tsx
+++ b/src/components/views/right_panel/RoomSummaryCard.tsx
@ -17,6 +17,8 @@ limitations under the License.
 import React, { useCallback, useContext, useEffect, useMemo, useState } from "react";
 import classNames from "classnames";
 import { Room } from "matrix-js-sdk/src/matrix";
+import { Tooltip } from "@vector-im/compound-web";
+import { Icon as SearchIcon } from "@vector-im/compound-design-tokens/icons/search.svg";

 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import { useIsEncrypted } from "../../../hooks/useIsEncrypted";
@ -53,6 +55,7 @@ import RightPanelStore from "../../../stores/right-panel/RightPanelStore";
 import PosthogTrackers from "../../../PosthogTrackers";
 import { shouldShowComponent } from "../../../customisations/helpers/UIComponents";
 import { PollHistoryDialog } from "../dialogs/PollHistoryDialog";
+import { Flex } from "../../utils/Flex";

 interface IProps {
    room: Room;
@ -306,7 +309,7 @@ const RoomSummaryCard: React.FC<IProps> = ({ room, permalinkCreator, onClose, on

    const alias = room.getCanonicalAlias() || room.getAltAliases()[0] || "";
    const header = (
-        <React.Fragment>
+        <header className="mx_RoomSummaryCard_container">
            <div className="mx_RoomSummaryCard_avatar" role="presentation">
                <RoomAvatar room={room} size="54px" viewAvatarOnClick />
                <TextWithTooltip
@ -329,7 +332,7 @@ const RoomSummaryCard: React.FC<IProps> = ({ room, permalinkCreator, onClose, on
            <div className="mx_RoomSummaryCard_alias" title={alias}>
                {alias}
            </div>
-        </React.Fragment>
+        </header>
    );

    const memberCount = useRoomMemberCount(room);
@ -337,22 +340,40 @@ const RoomSummaryCard: React.FC<IProps> = ({ room, permalinkCreator, onClose, on
    const pinCount = usePinnedEvents(pinningEnabled ? room : undefined)?.length;

    return (
-        <BaseCard header={header} className="mx_RoomSummaryCard" onClose={onClose}>
+        <BaseCard header={null} className="mx_RoomSummaryCard" onClose={onClose}>
+            <Flex
+                as="header"
+                className="mx_RoomSummaryCard_header"
+                gap="var(--cpd-space-3x)"
+                align="center"
+                justify="space-between"
+            >
+                <Tooltip label={_t("action|search")} side="right">
+                    <button
+                        className="mx_RoomSummaryCard_searchBtn"
+                        data-testid="summary-search"
+                        onClick={() => {
+                            onSearchClick?.();
+                        }}
+                        aria-label={_t("action|search")}
+                    >
+                        <SearchIcon width="100%" height="100%" />
+                    </button>
+                </Tooltip>
+                <AccessibleButton
+                    data-testid="base-card-close-button"
+                    className="mx_BaseCard_close"
+                    onClick={onClose}
+                    title={_t("action|close")}
+                />
+            </Flex>
+
+            {header}
            <Group title={_t("common|about")} className="mx_RoomSummaryCard_aboutGroup">
                <Button className="mx_RoomSummaryCard_icon_people" onClick={onRoomMembersClick}>
                    {_t("common|people")}
                    <span className="mx_BaseCard_Button_sublabel">{memberCount}</span>
                </Button>
-                {SettingsStore.getValue("feature_new_room_decoration_ui") && (
-                    <Button
-                        className="mx_RoomSummaryCard_icon_search"
-                        onClick={() => {
-                            onSearchClick?.();
-                        }}
-                    >
-                        {_t("right_panel|search_button")}
-                    </Button>
-                )}
                {!isVideoRoom && (
                    <Button className="mx_RoomSummaryCard_icon_files" onClick={onRoomFilesClick}>
                        {_t("right_panel|files_button")}
--- a/src/components/views/right_panel/UserInfo.tsx
+++ b/src/components/views/right_panel/UserInfo.tsx
@ -1763,7 +1763,7 @@ const UserInfo: React.FC<IProps> = ({ user, room, onClose, phase = RightPanelPha
    return (
        <BaseCard
            className={classes.join(" ")}
-            header={header}
+            header={<span />}
            onClose={onClose}
            closeLabel={closeLabel}
            cardState={cardState}
@ -1773,6 +1773,7 @@ const UserInfo: React.FC<IProps> = ({ user, room, onClose, phase = RightPanelPha
                }
            }}
        >
+            {header}
            {content}
        </BaseCard>
    );
--- a/src/components/views/rooms/MemberList.tsx
+++ b/src/components/views/rooms/MemberList.tsx
@ -33,6 +33,8 @@ import {
    ClientEvent,
 } from "matrix-js-sdk/src/matrix";
 import { throttle } from "lodash";
+import { Button, Tooltip } from "@vector-im/compound-web";
+import { Icon as UserAddIcon } from "@vector-im/compound-design-tokens/icons/user-add-solid.svg";

 import { _t } from "../../../languageHandler";
 import dis from "../../../dispatcher/dispatcher";
@ -44,7 +46,7 @@ import RoomName from "../elements/RoomName";
 import TruncatedList from "../elements/TruncatedList";
 import Spinner from "../elements/Spinner";
 import SearchBox from "../../structures/SearchBox";
-import AccessibleButton, { ButtonEvent } from "../elements/AccessibleButton";
+import { ButtonEvent } from "../elements/AccessibleButton";
 import EntityTile from "./EntityTile";
 import MemberTile from "./MemberTile";
 import BaseAvatar from "../avatars/BaseAvatar";
@ -52,7 +54,6 @@ import { shouldShowComponent } from "../../../customisations/helpers/UIComponent
 import { UIComponent } from "../../../settings/UIFeature";
 import PosthogTrackers from "../../../PosthogTrackers";
 import { SDKContext } from "../../../contexts/SDKContext";
-import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";

 const INITIAL_LOAD_NUM_MEMBERS = 30;
 const INITIAL_LOAD_NUM_INVITED = 5;
@ -361,20 +362,24 @@ export default class MemberList extends React.Component<IProps, IState> {

            if (this.state.canInvite) {
                inviteButton = (
-                    <AccessibleButton className="mx_MemberList_invite" onClick={this.onInviteButtonClick}>
-                        <span>{inviteButtonText}</span>
-                    </AccessibleButton>
+                    <Button
+                        size="sm"
+                        kind="secondary"
+                        className="mx_MemberList_invite"
+                        onClick={this.onInviteButtonClick}
+                    >
+                        <UserAddIcon width="1em" height="1em" />
+                        {inviteButtonText}
+                    </Button>
                );
            } else {
                inviteButton = (
-                    <AccessibleTooltipButton
-                        className="mx_MemberList_invite"
-                        onClick={null}
-                        disabled
-                        tooltip={_t("member_list|invite_button_no_perms_tooltip")}
-                    >
-                        <span>{inviteButtonText}</span>
-                    </AccessibleTooltipButton>
+                    <Tooltip label={_t("member_list|invite_button_no_perms_tooltip")}>
+                        <Button size="sm" kind="secondary" className="mx_MemberList_invite" onClick={() => {}}>
+                            <UserAddIcon width="1em" height="1em" />
+                            {inviteButtonText}
+                        </Button>
+                    </Tooltip>
                );
            }
        }
@ -416,15 +421,11 @@ export default class MemberList extends React.Component<IProps, IState> {
        return (
            <BaseCard
                className="mx_MemberList"
-                header={
-                    <React.Fragment>
-                        {scopeHeader}
-                        {inviteButton}
-                    </React.Fragment>
-                }
+                header={<React.Fragment>{scopeHeader}</React.Fragment>}
                footer={footer}
                onClose={this.props.onClose}
            >
+                {inviteButton}
                <div className="mx_MemberList_wrapper">
                    <TruncatedList
                        className="mx_MemberList_section mx_MemberList_joined"
--- a/src/components/views/rooms/RoomHeader.tsx
+++ b/src/components/views/rooms/RoomHeader.tsx
@ -127,7 +127,7 @@ export default function RoomHeader({ room }: { room: Room }): JSX.Element {
                    aria-level={1}
                    className="mx_RoomHeader_heading"
                >
-                    <span className="mx_RoomHeader_truncated">{roomName}</span>
+                    <span className="mx_RoomHeader_truncated mx_lineClamp">{roomName}</span>

                    {!isDirectMessage && roomState.getJoinRule() === JoinRule.Public && (
                        <Tooltip label={_t("common|public_room")} side="right">
@ -163,7 +163,7 @@ export default function RoomHeader({ room }: { room: Room }): JSX.Element {
                    )}
                </BodyText>
                {roomTopic && (
-                    <BodyText as="div" size="sm" className="mx_RoomHeader_topic mx_RoomHeader_truncated">
+                    <BodyText as="div" size="sm" className="mx_RoomHeader_topic mx_RoomHeader_truncated mx_lineClamp">
                        <Linkify>{roomTopicBody}</Linkify>
                    </BodyText>
                )}
--- a/src/components/views/rooms/RoomPreviewBar.tsx
+++ b/src/components/views/rooms/RoomPreviewBar.tsx
@ -696,7 +696,7 @@ export default class RoomPreviewBar extends React.Component<IProps, IState> {

        const isPanel = this.props.canPreview;

-        const classes = classNames("mx_RoomPreviewBar", "dark-panel", `mx_RoomPreviewBar_${messageCase}`, {
+        const classes = classNames("mx_RoomPreviewBar", `mx_RoomPreviewBar_${messageCase}`, {
            mx_RoomPreviewBar_panel: isPanel,
            mx_RoomPreviewBar_dialog: !isPanel,
        });
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@ -1850,7 +1850,6 @@
        "room_summary_card": {
            "title": "Room info"
        },
-        "search_button": "Search",
        "settings_button": "Room settings",
        "share_button": "Share room",
        "thread_list": {
--- a/test/components/structures/snapshots/RoomView-test.tsx.snap
+++ b/test/components/structures/snapshots/RoomView-test.tsx.snap
@ -739,7 +739,7 @@ exports[`RoomView should show error view if failed to look up room alias 1`] = `
    data-room-header="legacy"
  >
    <div
-      class="mx_RoomPreviewBar dark-panel mx_RoomPreviewBar_RoomNotFound mx_RoomPreviewBar_dialog"
+      class="mx_RoomPreviewBar mx_RoomPreviewBar_RoomNotFound mx_RoomPreviewBar_dialog"
    >
      <div
        class="mx_RoomPreviewBar_message"
--- a/test/components/views/elements/snapshots/AppTile-test.tsx.snap
+++ b/test/components/views/elements/snapshots/AppTile-test.tsx.snap
@ -3,7 +3,7 @@
 exports[`AppTile destroys non-persisted right panel widget on room change 1`] = `
 <DocumentFragment>
  <aside
-    class="mx_RightPanel dark-panel"
+    class="mx_RightPanel"
    id="mx_RightPanel"
  >
    <div
--- a/test/components/views/right_panel/RoomSummaryCard-test.tsx
+++ b/test/components/views/right_panel/RoomSummaryCard-test.tsx
@ -31,6 +31,7 @@ import { RightPanelPhases } from "../../../../src/stores/right-panel/RightPanelS
 import { getMockClientWithEventEmitter, mockClientMethodsUser } from "../../../test-utils";
 import { PollHistoryDialog } from "../../../../src/components/views/dialogs/PollHistoryDialog";
 import { RoomPermalinkCreator } from "../../../../src/utils/permalinks/Permalinks";
+import { _t } from "../../../../src/languageHandler";

 describe("<RoomSummaryCard />", () => {
    const userId = "@alice:domain.org";
@ -84,6 +85,17 @@ describe("<RoomSummaryCard />", () => {
        expect(container).toMatchSnapshot();
    });

+    it("opens the search", async () => {
+        const onSearchClick = jest.fn();
+        const { getByLabelText } = getComponent({
+            onSearchClick,
+        });
+
+        const searchBtn = getByLabelText(_t("action|search"));
+        fireEvent.click(searchBtn);
+        expect(onSearchClick).toHaveBeenCalled();
+    });
+
    it("opens room members list on button click", () => {
        const { getByText } = getComponent();

--- a/test/components/views/right_panel/snapshots/RoomSummaryCard-test.tsx.snap
+++ b/test/components/views/right_panel/snapshots/RoomSummaryCard-test.tsx.snap
@ -5,51 +5,67 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
  <div
    class="mx_BaseCard mx_RoomSummaryCard"
  >
-    <div
-      class="mx_BaseCard_header"
-    >
-      <div
-        class="mx_AccessibleButton mx_BaseCard_close"
-        data-testid="base-card-close-button"
-        role="button"
-        tabindex="0"
-        title="Close"
-      />
-      <div
-        class="mx_RoomSummaryCard_avatar"
-        role="presentation"
-      >
-        <span
-          class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60"
-          data-color="7"
-          data-testid="avatar-img"
-          data-type="round"
-          role="presentation"
-          style="--cpd-avatar-size: 54px;"
-        >
-          !
-        </span>
-        <div
-          aria-describedby="mx_TooltipTarget_vY7Q4uEh"
-          class="mx_TextWithTooltip_target mx_RoomSummaryCard_e2ee"
-          tabindex="0"
-        />
-      </div>
-      <h1
-        class="mx_RoomSummaryCard_roomName"
-        title="!room:domain.org"
-      >
-        !room:domain.org
-      </h1>
-      <div
-        class="mx_RoomSummaryCard_alias"
-        title=""
-      />
-    </div>
    <div
      class="mx_AutoHideScrollbar"
      tabindex="-1"
    >
+      <header
+        class="mx_Flex mx_RoomSummaryCard_header"
+        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x);"
+      >
+        <button
+          aria-label="Search"
+          class="mx_RoomSummaryCard_searchBtn"
+          data-state="closed"
+          data-testid="summary-search"
+        >
+          <div
+            height="100%"
+            width="100%"
+          />
+        </button>
+        <div
+          class="mx_AccessibleButton mx_BaseCard_close"
+          data-testid="base-card-close-button"
+          role="button"
+          tabindex="0"
+          title="Close"
+        />
+      </header>
+      <header
+        class="mx_RoomSummaryCard_container"
+      >
+        <div
+          class="mx_RoomSummaryCard_avatar"
+          role="presentation"
+        >
+          <span
+            class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60"
+            data-color="7"
+            data-testid="avatar-img"
+            data-type="round"
+            role="presentation"
+            style="--cpd-avatar-size: 54px;"
+          >
+            !
+          </span>
+          <div
+            aria-describedby="mx_TooltipTarget_vY7Q4uEh"
+            class="mx_TextWithTooltip_target mx_RoomSummaryCard_e2ee"
+            tabindex="0"
+          />
+        </div>
+        <h1
+          class="mx_RoomSummaryCard_roomName"
+          title="!room:domain.org"
+        >
+          !room:domain.org
+        </h1>
+        <div
+          class="mx_RoomSummaryCard_alias"
+          title=""
+        />
+      </header>
      <div
        class="mx_BaseCard_Group mx_RoomSummaryCard_aboutGroup"
      >
--- a/test/components/views/right_panel/snapshots/UserInfo-test.tsx.snap
+++ b/test/components/views/right_panel/snapshots/UserInfo-test.tsx.snap
@ -84,6 +84,12 @@ exports[`<UserInfo /> with crypto enabled renders <BasicUserInfo /> 1`] = `
        tabindex="0"
        title="Close"
      />
+      <span />
+    </div>
+    <div
+      class="mx_AutoHideScrollbar"
+      tabindex="-1"
+    >
      <div
        class="mx_UserInfo_avatar"
      >
@ -141,11 +147,6 @@ exports[`<UserInfo /> with crypto enabled renders <BasicUserInfo /> 1`] = `
          </div>
        </div>
      </div>
-    </div>
-    <div
-      class="mx_AutoHideScrollbar"
-      tabindex="-1"
-    >
      <div
        class="mx_UserInfo_container"
      >
--- a/test/components/views/rooms/snapshots/RoomHeader-test.tsx.snap
+++ b/test/components/views/rooms/snapshots/RoomHeader-test.tsx.snap
@ -27,7 +27,7 @@ exports[`RoomHeader does not show the face pile for DMs 1`] = `
        role="heading"
      >
        <span
-          class="mx_RoomHeader_truncated"
+          class="mx_RoomHeader_truncated mx_lineClamp"
        >
          !1:example.org
        </span>
--- a/yarn.lock
+++ b/yarn.lock
@ -3016,7 +3016,7 @@
  dependencies:
    svg2vectordrawable "^2.9.1"

-"@vector-im/compound-web@^0.5.0":
+"@vector-im/compound-web@0.5.4":
  version "0.5.4"
  resolved "https://registry.yarnpkg.com/@vector-im/compound-web/-/compound-web-0.5.4.tgz#a99b346fe8de34a6f8bcbf9e1040ce1d79615dbc"
  integrity sha512-w4Nwzid5Y89Dt9GaxKO+kWPTjSitLpkmoAjMYHVUajNMCfUxluzu4eOgjPRCpubPH5lZUB6/95y43wOI+pEC1Q==