New group call experience: Room header and PiP designs

cypress/e2e/lazy-loading/lazy-loading.spec.ts

@@ -109,7 +109,7 @@ describe("Lazy Loading", () => {
     }
 
     function openMemberlist(): void {
-        cy.get('.mx_HeaderButtons [aria-label="Room Info"]').click();
+        cy.get('.mx_HeaderButtons [aria-label="Room info"]').click();
         cy.get(".mx_RoomSummaryCard").within(() => {
             cy.get(".mx_RoomSummaryCard_icon_people").click();
         });

res/css/_common.pcss

@@ -453,7 +453,7 @@ legend {
 }
 
 @define-mixin customisedCancelButton {
-    mask: url('$(res)/img/feather-customised/cancel.svg');
+    mask: url('$(res)/img/cancel.svg');
     mask-repeat: no-repeat;
     mask-position: center;
     mask-size: cover;
@@ -466,8 +466,8 @@ legend {
 
 .mx_Dialog_cancelButton {
     @mixin customisedCancelButton;
-    width: 14px;
-    height: 14px;
+    width: 18px;
+    height: 18px;
     position: absolute;
     top: 10px;
     right: 0;

res/css/structures/_HeaderButtons.pcss

@@ -17,20 +17,3 @@ limitations under the License.
 .mx_HeaderButtons {
     display: flex;
 }
-
-.mx_RoomHeader_buttons + .mx_HeaderButtons {
-    /* remove the | separator line for when next to RoomHeaderButtons */
-    /* TODO: remove this once when we redo communities and make the right panel similar to the new rooms one */
-    &::before {
-        content: unset;
-    }
-}
-
-.mx_HeaderButtons::before {
-    content: "";
-    background-color: $header-panel-text-primary-color;
-    opacity: 0.5;
-    margin: 6px 8px;
-    border-radius: 1px;
-    width: 1px;
-}

res/css/views/elements/_Tooltip.pcss

@@ -76,11 +76,6 @@ limitations under the License.
     border: 0;
     text-align: center;
 
-    &:not(.mx_Tooltip_noMargin) {
-        margin-left: 6px;
-        margin-right: 6px;
-    }
-
     .mx_Tooltip_chevron {
         display: none;
     }

res/css/views/rooms/_JumpToBottomButton.pcss

@@ -68,8 +68,10 @@ limitations under the License.
     bottom: 0;
     left: 0;
     right: 0;
-    mask-image: url('$(res)/img/feather-customised/chevron-down-thin.svg');
+    mask-image: url('$(res)/img/element-icons/message/chevron-up.svg');
     mask-repeat: no-repeat;
-    mask-size: contain;
+    mask-size: 20px;
+    mask-position: center 6px;
+    transform: rotate(180deg);
     background: $muted-fg-color;
 }

res/css/views/rooms/_RoomHeader.pcss

@@ -19,17 +19,28 @@ limitations under the License.
     border-bottom: 1px solid $primary-hairline-color;
     background-color: $background;
 
-    .mx_RoomHeader_e2eIcon {
+    .mx_RoomHeader_icon {
         height: 12px;
         width: 12px;
 
-        .mx_E2EIcon {
+        &.mx_RoomHeader_icon_video {
+            height: 14px;
+            width: 14px;
+            background-color: $secondary-content;
+            mask-image: url('$(res)/img/element-icons/call/video-call.svg');
+            mask-size: 100%;
+        }
+
+        &.mx_E2EIcon {
             margin: 0;
-            position: absolute;
-            height: 12px;
-            width: 12px;
+            height: 100%; /* To give the tooltip room to breathe */
         }
     }
+
+    .mx_CallDuration {
+        margin-top: calc(($font-15px - $font-13px) / 2); /* To align with the name */
+        font-size: $font-13px;
+    }
 }
 
 .mx_RoomHeader_wrapper {
@@ -38,7 +49,7 @@ limitations under the License.
     align-items: center;
     min-width: 0;
     margin: 0 20px 0 16px;
-    padding-top: 8px;
+    padding-top: 6px;
     border-bottom: 1px solid $system;
 
     .mx_InviteOnlyIcon_large {
@@ -77,11 +88,6 @@ limitations under the License.
     padding-right: 12px;
 }
 
-.mx_RoomHeader_buttons {
-    display: flex;
-    background-color: $background;
-}
-
 .mx_RoomHeader_info {
     display: flex;
     flex: 1;
@@ -93,9 +99,11 @@ limitations under the License.
     overflow: hidden;
     color: $primary-content;
     font-weight: $font-semi-bold;
-    font-size: $font-18px;
+    font-size: $font-15px;
+    min-height: 24px;
+    align-items: center;
     border-radius: 6px;
-    margin: 0 7px;
+    margin: 0 3px;
     padding: 1px 4px;
     display: flex;
     user-select: none;
@@ -112,10 +120,10 @@ limitations under the License.
 
     .mx_RoomHeader_chevron {
         align-self: center;
-        width: 16px;
-        height: 16px;
+        width: 20px;
+        height: 20px;
         mask-position: center;
-        mask-size: contain;
+        mask-size: 20px;
         mask-repeat: no-repeat;
         mask-image: url('$(res)/img/feather-customised/chevron-down.svg');
         background-color: $tertiary-content;
@@ -160,9 +168,6 @@ limitations under the License.
     line-height: $lineHeight;
     max-height: calc($lineHeight * $lines);
 
-    /* to align baseline of topic with room name */
-    margin: 4px 7px 0;
-
     overflow: hidden;
     -webkit-line-clamp: $lines; /* See: https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp */
     -webkit-box-orient: vertical;
@@ -177,7 +182,7 @@ limitations under the License.
 
 .mx_RoomHeader_avatar {
     flex: 0;
-    margin: 0 6px 0 7px;
+    margin: 0 7px;
     position: relative;
 }
 
@@ -206,7 +211,7 @@ limitations under the License.
         mask-size: contain;
     }
 
-    &:hover {
+    &:not(.mx_RoomHeader_closeButton):hover {
         background: rgba($accent, 0.1);
 
         &::before {
@@ -249,6 +254,37 @@ limitations under the License.
     mask-image: url('$(res)/img/element-icons/call/video-call.svg');
 }
 
+.mx_RoomHeader_layoutButton--freedom::before,
+.mx_RoomHeader_freedomIcon::before {
+    mask-image: url('$(res)/img/element-icons/call/freedom.svg');
+}
+
+.mx_RoomHeader_layoutButton--spotlight::before,
+.mx_RoomHeader_spotlightIcon::before {
+    mask-image: url('$(res)/img/element-icons/call/spotlight.svg');
+}
+
+.mx_RoomHeader_closeButton::before {
+    mask-image: url('$(res)/img/cancel.svg');
+    mask-size: 20px;
+    mask-position: center;
+}
+
+.mx_RoomHeader_minimiseButton::before {
+    mask-image: url('$(res)/img/element-icons/reduce.svg');
+}
+
+.mx_RoomHeader_layoutMenu .mx_IconizedContextMenu_icon::before {
+    content: '';
+    width: 16px;
+    height: 16px;
+    display: block;
+    mask-position: center;
+    mask-size: 20px;
+    mask-repeat: no-repeat;
+    background: $primary-content;
+}
+
 @media only screen and (max-width: 480px) {
     .mx_RoomHeader_wrapper {
         padding: 0;

res/css/views/rooms/_TopUnreadMessagesBar.pcss

@@ -51,11 +51,11 @@ limitations under the License.
     position: absolute;
     width: 36px;
     height: 36px;
-    mask-image: url('$(res)/img/feather-customised/chevron-down-thin.svg');
+    mask-image: url('$(res)/img/element-icons/message/chevron-up.svg');
     mask-repeat: no-repeat;
-    mask-size: contain;
+    mask-size: 20px;
+    mask-position: center;
     background: $muted-fg-color;
-    transform: rotate(180deg);
 }
 
 .mx_TopUnreadMessagesBar_markAsRead {

res/css/views/voip/_LegacyCallViewHeader.pcss

@@ -25,7 +25,7 @@ limitations under the License.
     width: 100%;
 
     &.mx_LegacyCallViewHeader_pip {
-        cursor: pointer;
+        cursor: grab;
     }
 }