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

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;
 

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);
+    }
+}

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 {