New room list: fix spacing and padding (#29607)

* fix(menu): reduce gap between button and button size

* fix(notification decoration): increase gap between icons

* fix(room list item): different right padding depending on the menu, notification decoration and the regular case

* test: update snapshots

* test(e2e): update snapshots

res/css/views/rooms/RoomListPanel/_RoomListItemView.pcss

@@ -19,6 +19,10 @@
 
     &:hover {
         background-color: var(--cpd-color-bg-action-secondary-hovered);
+
+        .mx_RoomListItemView_content {
+            padding-right: var(--cpd-space-1-5x);
+        }
     }
 
     .mx_RoomListItemView_container {
@@ -27,7 +31,6 @@
         height: 100%;
 
         .mx_RoomListItemView_content {
-            padding-right: var(--cpd-space-3x);
             height: 100%;
             flex: 1;
             /* The border is only under the room name and the future hover menu  */
@@ -46,8 +49,24 @@
 
 .mx_RoomListItemView_menu_open {
     background-color: var(--cpd-color-bg-action-secondary-hovered);
+
+    .mx_RoomListItemView_content {
+        padding-right: var(--cpd-space-1-5x);
+    }
 }
 
 .mx_RoomListItemView_selected {
     background-color: var(--cpd-color-bg-action-secondary-pressed);
 }
+
+.mx_RoomListItemView_notification_decoration {
+    .mx_RoomListItemView_content {
+        padding-right: var(--cpd-space-2x);
+    }
+}
+
+.mx_RoomListItemView_empty {
+    .mx_RoomListItemView_content {
+        padding-right: var(--cpd-space-3x);
+    }
+}

src/components/views/rooms/NotificationDecoration.tsx

@@ -44,7 +44,7 @@ export function NotificationDecoration({
         <Flex
             align="center"
             justify="center"
-            gap="var(--cpd-space-1x)"
+            gap="var(--cpd-space-1-5x)"
             {...props}
             data-testid="notification-decoration"
         >

src/components/views/rooms/RoomListPanel/RoomListItemMenuView.tsx

@@ -43,7 +43,7 @@ export function RoomListItemMenuView({ room, setMenuOpen }: RoomListItemMenuView
     const vm = useRoomListItemMenuViewModel(room);
 
     return (
-        <Flex className="mx_RoomListItemMenuView" align="center" gap="var(--cpd-space-1x)">
+        <Flex className="mx_RoomListItemMenuView" align="center" gap="var(--cpd-space-0-5x)">
             {vm.showMoreOptionsMenu && <MoreOptionsMenu setMenuOpen={setMenuOpen} vm={vm} />}
         </Flex>
     );
@@ -77,7 +77,7 @@ function MoreOptionsMenu({ vm, setMenuOpen }: MoreOptionsMenuProps): JSX.Element
             title={_t("room_list|room|more_options")}
             showTitle={false}
             align="start"
-            trigger={<MoreOptionsButton />}
+            trigger={<MoreOptionsButton size="24px" />}
         >
             {vm.canMarkAsRead && (
                 <MenuItem

src/components/views/rooms/RoomListPanel/RoomListItemView.tsx

@@ -38,9 +38,14 @@ export function RoomListItemView({ room, isSelected, ...props }: RoomListItemVie
     // Using display: none; and then display:flex when hovered in CSS causes the menu to be misaligned
     const showHoverDecoration = (isMenuOpen || isHover) && vm.showHoverMenu;
 
+    const isNotificationDecorationVisible =
+        !showHoverDecoration && (vm.notificationState.hasAnyNotificationOrActivity || vm.notificationState.muted);
+
     return (
         <button
             className={classNames("mx_RoomListItemView", {
+                mx_RoomListItemView_empty: !isNotificationDecorationVisible && !showHoverDecoration,
+                mx_RoomListItemView_notification_decoration: isNotificationDecorationVisible,
                 mx_RoomListItemView_menu_open: showHoverDecoration,
                 mx_RoomListItemView_selected: isSelected,
             })}

test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomList-test.tsx.snap

@@ -25,7 +25,7 @@ exports[`<RoomList /> should render a room list 1`] = `
           <button
             aria-label="Open room room0"
             aria-selected="false"
-            class="mx_RoomListItemView"
+            class="mx_RoomListItemView mx_RoomListItemView_empty"
             role="gridcell"
             style="height: 48px; left: 0px; position: absolute; top: 0px; width: 100%;"
             type="button"
@@ -72,7 +72,7 @@ exports[`<RoomList /> should render a room list 1`] = `
           <button
             aria-label="Open room room1"
             aria-selected="false"
-            class="mx_RoomListItemView"
+            class="mx_RoomListItemView mx_RoomListItemView_empty"
             role="gridcell"
             style="height: 48px; left: 0px; position: absolute; top: 48px; width: 100%;"
             type="button"
@@ -119,7 +119,7 @@ exports[`<RoomList /> should render a room list 1`] = `
           <button
             aria-label="Open room room2"
             aria-selected="false"
-            class="mx_RoomListItemView"
+            class="mx_RoomListItemView mx_RoomListItemView_empty"
             role="gridcell"
             style="height: 48px; left: 0px; position: absolute; top: 96px; width: 100%;"
             type="button"
@@ -166,7 +166,7 @@ exports[`<RoomList /> should render a room list 1`] = `
           <button
             aria-label="Open room room3"
             aria-selected="false"
-            class="mx_RoomListItemView"
+            class="mx_RoomListItemView mx_RoomListItemView_empty"
             role="gridcell"
             style="height: 48px; left: 0px; position: absolute; top: 144px; width: 100%;"
             type="button"
@@ -213,7 +213,7 @@ exports[`<RoomList /> should render a room list 1`] = `
           <button
             aria-label="Open room room4"
             aria-selected="false"
-            class="mx_RoomListItemView"
+            class="mx_RoomListItemView mx_RoomListItemView_empty"
             role="gridcell"
             style="height: 48px; left: 0px; position: absolute; top: 192px; width: 100%;"
             type="button"
@@ -260,7 +260,7 @@ exports[`<RoomList /> should render a room list 1`] = `
           <button
             aria-label="Open room room5"
             aria-selected="false"
-            class="mx_RoomListItemView"
+            class="mx_RoomListItemView mx_RoomListItemView_empty"
             role="gridcell"
             style="height: 48px; left: 0px; position: absolute; top: 240px; width: 100%;"
             type="button"
@@ -307,7 +307,7 @@ exports[`<RoomList /> should render a room list 1`] = `
           <button
             aria-label="Open room room6"
             aria-selected="false"
-            class="mx_RoomListItemView"
+            class="mx_RoomListItemView mx_RoomListItemView_empty"
             role="gridcell"
             style="height: 48px; left: 0px; position: absolute; top: 288px; width: 100%;"
             type="button"
@@ -354,7 +354,7 @@ exports[`<RoomList /> should render a room list 1`] = `
           <button
             aria-label="Open room room7"
             aria-selected="false"
-            class="mx_RoomListItemView"
+            class="mx_RoomListItemView mx_RoomListItemView_empty"
             role="gridcell"
             style="height: 48px; left: 0px; position: absolute; top: 336px; width: 100%;"
             type="button"
@@ -401,7 +401,7 @@ exports[`<RoomList /> should render a room list 1`] = `
           <button
             aria-label="Open room room8"
             aria-selected="false"
-            class="mx_RoomListItemView"
+            class="mx_RoomListItemView mx_RoomListItemView_empty"
             role="gridcell"
             style="height: 48px; left: 0px; position: absolute; top: 384px; width: 100%;"
             type="button"
@@ -448,7 +448,7 @@ exports[`<RoomList /> should render a room list 1`] = `
           <button
             aria-label="Open room room9"
             aria-selected="false"
-            class="mx_RoomListItemView"
+            class="mx_RoomListItemView mx_RoomListItemView_empty"
             role="gridcell"
             style="height: 48px; left: 0px; position: absolute; top: 432px; width: 100%;"
             type="button"

test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListItemMenuView-test.tsx.snap

@@ -4,7 +4,7 @@ exports[`<RoomListItemMenuView /> should render the more options menu 1`] = `
 <DocumentFragment>
   <div
     class="mx_Flex mx_RoomListItemMenuView"
-    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-0-5x); --mx-flex-wrap: nowrap;"
   >
     <button
       aria-disabled="false"
@@ -16,7 +16,7 @@ exports[`<RoomListItemMenuView /> should render the more options menu 1`] = `
       data-state="closed"
       id="radix-:r0:"
       role="button"
-      style="--cpd-icon-button-size: 32px;"
+      style="--cpd-icon-button-size: 24px;"
       tabindex="0"
       type="button"
     >

test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListItemView-test.tsx.snap

@@ -5,7 +5,7 @@ exports[`<RoomListItemView /> should be selected if isSelected=true 1`] = `
   <button
     aria-label="Open room room1"
     aria-selected="true"
-    class="mx_RoomListItemView mx_RoomListItemView_selected"
+    class="mx_RoomListItemView mx_RoomListItemView_empty mx_RoomListItemView_selected"
     type="button"
   >
     <div
@@ -55,7 +55,7 @@ exports[`<RoomListItemView /> should render a room item 1`] = `
   <button
     aria-label="Open room room1"
     aria-selected="false"
-    class="mx_RoomListItemView"
+    class="mx_RoomListItemView mx_RoomListItemView_empty"
     type="button"
   >
     <div

test/unit-tests/components/views/rooms/__snapshots__/NotificationDecoration-test.tsx.snap

@@ -5,7 +5,7 @@ exports[`<NotificationDecoration /> should render the activity decoration 1`] =
   <div
     class="mx_Flex"
     data-testid="notification-decoration"
-    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
   >
     <div
       class="_unread_1k06b_8"
@@ -21,7 +21,7 @@ exports[`<NotificationDecoration /> should render the invitation decoration 1`]
   <div
     class="mx_Flex"
     data-testid="notification-decoration"
-    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
   >
     <span
       class="_unread-counter_1ibqq_8"
@@ -37,7 +37,7 @@ exports[`<NotificationDecoration /> should render the mention decoration 1`] = `
   <div
     class="mx_Flex"
     data-testid="notification-decoration"
-    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
   >
     <svg
       fill="var(--cpd-color-icon-accent-primary)"
@@ -64,7 +64,7 @@ exports[`<NotificationDecoration /> should render the muted decoration 1`] = `
   <div
     class="mx_Flex"
     data-testid="notification-decoration"
-    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
   >
     <svg
       fill="var(--cpd-color-icon-tertiary)"
@@ -89,7 +89,7 @@ exports[`<NotificationDecoration /> should render the notification decoration 1`
   <div
     class="mx_Flex"
     data-testid="notification-decoration"
-    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
   >
     <span
       class="_unread-counter_1ibqq_8"
@@ -105,7 +105,7 @@ exports[`<NotificationDecoration /> should render the notification decoration wi
   <div
     class="mx_Flex"
     data-testid="notification-decoration"
-    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
   >
     <div
       class="_unread-counter_1ibqq_8"
@@ -119,7 +119,7 @@ exports[`<NotificationDecoration /> should render the unset message decoration 1
   <div
     class="mx_Flex"
     data-testid="notification-decoration"
-    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
   >
     <svg
       fill="var(--cpd-color-icon-critical-primary)"