New room list: minor visual fixes (#29723)

* fix: use correct color for room list header

* fix: use error solid icon

* fix: rename Unread as Unreads

* test: update jest snapshots

* test(e2e): update screenshots

* test: fix test

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

@@ -21,10 +21,6 @@
         }
     }
 
-    button {
-        color: var(--cpd-color-icon-secondary);
-    }
-
     .mx_SpaceMenu_button {
         svg {
             transition: transform 0.1s linear;

src/components/views/rooms/NotificationDecoration.tsx

@@ -7,7 +7,7 @@
 
 import React, { type HTMLProps, type JSX } from "react";
 import MentionIcon from "@vector-im/compound-design-tokens/assets/web/icons/mention";
-import ErrorIcon from "@vector-im/compound-design-tokens/assets/web/icons/error";
+import ErrorIcon from "@vector-im/compound-design-tokens/assets/web/icons/error-solid";
 import NotificationOffIcon from "@vector-im/compound-design-tokens/assets/web/icons/notifications-off-solid";
 import { UnreadCounter, Unread } from "@vector-im/compound-web";
 

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

@@ -47,7 +47,7 @@ export function RoomListHeaderView(): JSX.Element {
                 <ComposeMenu vm={vm} />
             ) : (
                 <IconButton aria-label={_t("action|new_message")} onClick={(e) => vm.createChatRoom(e.nativeEvent)}>
-                    <ComposeIcon />
+                    <ComposeIcon color="var(--cpd-color-icon-secondary)" />
                 </IconButton>
             )}
         </Flex>
@@ -76,7 +76,7 @@ function SpaceMenu({ vm }: SpaceMenuProps): JSX.Element {
             align="start"
             trigger={
                 <IconButton className="mx_SpaceMenu_button" aria-label={_t("room_list|open_space_menu")} size="20px">
-                    <ChevronDownIcon />
+                    <ChevronDownIcon color="var(--cpd-color-icon-secondary)" />
                 </IconButton>
             }
         >
@@ -135,7 +135,7 @@ function ComposeMenu({ vm }: ComposeMenuProps): JSX.Element {
             align="start"
             trigger={
                 <IconButton aria-label={_t("action|add")}>
-                    <ComposeIcon />
+                    <ComposeIcon color="var(--cpd-color-icon-secondary)" />
                 </IconButton>
             }
         >

src/i18n/strings/en_EN.json

@@ -2126,7 +2126,7 @@
             "favourite": "Favourites",
             "people": "People",
             "rooms": "Rooms",
-            "unread": "Unread"
+            "unread": "Unreads"
         },
         "home_menu_label": "Home options",
         "join_public_room_label": "Join public room",

test/unit-tests/components/viewmodels/roomlist/RoomListViewModel-test.tsx

@@ -73,7 +73,7 @@ describe("RoomListViewModel", () => {
             // should have 4 filters
             expect(vm.current.primaryFilters).toHaveLength(4);
             // check the order
-            for (const [i, name] of ["Unread", "Favourites", "People", "Rooms"].entries()) {
+            for (const [i, name] of ["Unreads", "Favourites", "People", "Rooms"].entries()) {
                 expect(vm.current.primaryFilters[i].name).toEqual(name);
                 expect(vm.current.primaryFilters[i].active).toEqual(false);
             }
@@ -218,9 +218,13 @@ describe("RoomListViewModel", () => {
             [
                 "Mentions only",
                 { secondary: SecondaryFilters.MentionsOnly, filterKey: FilterKey.MentionsFilter },
-                "Unread",
+                "Unreads",
+            ],
+            [
+                "Invites only",
+                { secondary: SecondaryFilters.InvitesOnly, filterKey: FilterKey.InvitesFilter },
+                "Unreads",
             ],
-            ["Invites only", { secondary: SecondaryFilters.InvitesOnly, filterKey: FilterKey.InvitesFilter }, "Unread"],
             [
                 "Invites only",
                 { secondary: SecondaryFilters.InvitesOnly, filterKey: FilterKey.InvitesFilter },

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

@@ -35,6 +35,7 @@ exports[`<RoomListHeaderView /> compose menu should display the compose menu 1`]
           style="--cpd-icon-button-size: 100%;"
         >
           <svg
+            color="var(--cpd-color-icon-secondary)"
             fill="currentColor"
             height="1em"
             viewBox="0 0 24 24"
@@ -66,6 +67,7 @@ exports[`<RoomListHeaderView /> compose menu should display the compose menu 1`]
         style="--cpd-icon-button-size: 100%;"
       >
         <svg
+          color="var(--cpd-color-icon-secondary)"
           fill="currentColor"
           height="1em"
           viewBox="0 0 24 24"
@@ -122,6 +124,7 @@ exports[`<RoomListHeaderView /> compose menu should not display the compose menu
           style="--cpd-icon-button-size: 100%;"
         >
           <svg
+            color="var(--cpd-color-icon-secondary)"
             fill="currentColor"
             height="1em"
             viewBox="0 0 24 24"
@@ -147,6 +150,7 @@ exports[`<RoomListHeaderView /> compose menu should not display the compose menu
         style="--cpd-icon-button-size: 100%;"
       >
         <svg
+          color="var(--cpd-color-icon-secondary)"
           fill="currentColor"
           height="1em"
           viewBox="0 0 24 24"
@@ -203,6 +207,7 @@ exports[`<RoomListHeaderView /> space menu should display the space menu 1`] = `
           style="--cpd-icon-button-size: 100%;"
         >
           <svg
+            color="var(--cpd-color-icon-secondary)"
             fill="currentColor"
             height="1em"
             viewBox="0 0 24 24"
@@ -234,6 +239,7 @@ exports[`<RoomListHeaderView /> space menu should display the space menu 1`] = `
         style="--cpd-icon-button-size: 100%;"
       >
         <svg
+          color="var(--cpd-color-icon-secondary)"
           fill="currentColor"
           height="1em"
           viewBox="0 0 24 24"
@@ -291,6 +297,7 @@ exports[`<RoomListHeaderView /> space menu should not display the space menu 1`]
         style="--cpd-icon-button-size: 100%;"
       >
         <svg
+          color="var(--cpd-color-icon-secondary)"
           fill="currentColor"
           height="1em"
           viewBox="0 0 24 24"

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

@@ -35,6 +35,7 @@ exports[`<RoomListPanel /> should not render the RoomListSearch component when U
           style="--cpd-icon-button-size: 100%;"
         >
           <svg
+            color="var(--cpd-color-icon-secondary)"
             fill="currentColor"
             height="1em"
             viewBox="0 0 24 24"
@@ -69,7 +70,7 @@ exports[`<RoomListPanel /> should not render the RoomListSearch component when U
           role="button"
           tabindex="0"
         >
-          Unread
+          Unreads
         </button>
       </li>
       <li
@@ -255,6 +256,7 @@ exports[`<RoomListPanel /> should render the RoomListSearch component when UICom
           style="--cpd-icon-button-size: 100%;"
         >
           <svg
+            color="var(--cpd-color-icon-secondary)"
             fill="currentColor"
             height="1em"
             viewBox="0 0 24 24"
@@ -289,7 +291,7 @@ exports[`<RoomListPanel /> should render the RoomListSearch component when UICom
           role="button"
           tabindex="0"
         >
-          Unread
+          Unreads
         </button>
       </li>
       <li

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

@@ -129,7 +129,7 @@ exports[`<NotificationDecoration /> should render the unset message decoration 1
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 15a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 16q0 .424.287.712.288.288.713.288m0-4q.424 0 .713-.287A.97.97 0 0 0 13 12V8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8v4q0 .424.287.713.288.287.713.287m0 9a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22m0-2q3.35 0 5.675-2.325T20 12t-2.325-5.675T12 4 6.325 6.325 4 12t2.325 5.675T12 20"
+        d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 15a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 16q0 .424.287.712.288.288.713.288m0-4q.424 0 .713-.287A.97.97 0 0 0 13 12V8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8v4q0 .424.287.713.288.287.713.287m0 9a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22"
       />
     </svg>
   </div>