New room list: fix multiple visual issues (#29673)

* fix(room list item): add bold when there is a notification

* fix(room list item menu): fix color of check icon

* fix(menu): remove chevron

* chore: update @vector-im/compound-web

* test(room list): update tests

* test(e2e): update snapshots

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

@@ -41,6 +41,7 @@ describe("<RoomListItemView />", () => {
             showHoverMenu: false,
             notificationState: new RoomNotificationState(room, false),
             a11yLabel: "Open room room1",
+            isBold: false,
         };
 
         mocked(useRoomListItemViewModel).mockReturnValue(defaultValue);

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

@@ -62,6 +62,7 @@ exports[`<RoomList /> should render a room list 1`] = `
                 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); --mx-flex-wrap: nowrap;"
               >
                 <span
+                  class="mx_RoomListItemView_roomName"
                   title="room0"
                 >
                   room0
@@ -109,6 +110,7 @@ exports[`<RoomList /> should render a room list 1`] = `
                 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); --mx-flex-wrap: nowrap;"
               >
                 <span
+                  class="mx_RoomListItemView_roomName"
                   title="room1"
                 >
                   room1
@@ -156,6 +158,7 @@ exports[`<RoomList /> should render a room list 1`] = `
                 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); --mx-flex-wrap: nowrap;"
               >
                 <span
+                  class="mx_RoomListItemView_roomName"
                   title="room2"
                 >
                   room2
@@ -203,6 +206,7 @@ exports[`<RoomList /> should render a room list 1`] = `
                 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); --mx-flex-wrap: nowrap;"
               >
                 <span
+                  class="mx_RoomListItemView_roomName"
                   title="room3"
                 >
                   room3
@@ -250,6 +254,7 @@ exports[`<RoomList /> should render a room list 1`] = `
                 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); --mx-flex-wrap: nowrap;"
               >
                 <span
+                  class="mx_RoomListItemView_roomName"
                   title="room4"
                 >
                   room4
@@ -297,6 +302,7 @@ exports[`<RoomList /> should render a room list 1`] = `
                 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); --mx-flex-wrap: nowrap;"
               >
                 <span
+                  class="mx_RoomListItemView_roomName"
                   title="room5"
                 >
                   room5
@@ -344,6 +350,7 @@ exports[`<RoomList /> should render a room list 1`] = `
                 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); --mx-flex-wrap: nowrap;"
               >
                 <span
+                  class="mx_RoomListItemView_roomName"
                   title="room6"
                 >
                   room6
@@ -391,6 +398,7 @@ exports[`<RoomList /> should render a room list 1`] = `
                 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); --mx-flex-wrap: nowrap;"
               >
                 <span
+                  class="mx_RoomListItemView_roomName"
                   title="room7"
                 >
                   room7
@@ -438,6 +446,7 @@ exports[`<RoomList /> should render a room list 1`] = `
                 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); --mx-flex-wrap: nowrap;"
               >
                 <span
+                  class="mx_RoomListItemView_roomName"
                   title="room8"
                 >
                   room8
@@ -485,6 +494,7 @@ exports[`<RoomList /> should render a room list 1`] = `
                 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); --mx-flex-wrap: nowrap;"
               >
                 <span
+                  class="mx_RoomListItemView_roomName"
                   title="room9"
                 >
                   room9

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

@@ -40,6 +40,7 @@ exports[`<RoomListItemView /> should be selected if isSelected=true 1`] = `
         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); --mx-flex-wrap: nowrap;"
       >
         <span
+          class="mx_RoomListItemView_roomName"
           title="room1"
         >
           room1
@@ -90,6 +91,7 @@ exports[`<RoomListItemView /> should render a room item 1`] = `
         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); --mx-flex-wrap: nowrap;"
       >
         <span
+          class="mx_RoomListItemView_roomName"
           title="room1"
         >
           room1

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

@@ -24,7 +24,7 @@ exports[`<NotificationDecoration /> should render the invitation decoration 1`]
     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"
+      class="_unread-counter_9mg0k_8"
     >
       1
     </span>
@@ -51,7 +51,7 @@ exports[`<NotificationDecoration /> should render the mention decoration 1`] = `
       />
     </svg>
     <span
-      class="_unread-counter_1ibqq_8"
+      class="_unread-counter_9mg0k_8"
     >
       1
     </span>
@@ -92,7 +92,7 @@ exports[`<NotificationDecoration /> should render the notification decoration 1`
     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"
+      class="_unread-counter_9mg0k_8"
     >
       1
     </span>
@@ -108,7 +108,7 @@ exports[`<NotificationDecoration /> should render the notification decoration wi
     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"
+      class="_unread-counter_9mg0k_8"
     />
   </div>
 </DocumentFragment>