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
2025-04-14 09:45:32 +02:00
parent c929eedd81
commit f39f3d2164
15 changed files with 24 additions and 15 deletions
--- a/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/room-panel-empty-room-list-linux.png
+++ b/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/room-panel-empty-room-list-linux.png
--- a/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/unread-primary-filters-linux.png
+++ b/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/unread-primary-filters-linux.png
--- a/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/unselected-primary-filters-linux.png
+++ b/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/unselected-primary-filters-linux.png
--- a/playwright/snapshots/left-panel/room-list-panel/room-list-panel.spec.ts/room-list-panel-linux.png
+++ b/playwright/snapshots/left-panel/room-list-panel/room-list-panel.spec.ts/room-list-panel-linux.png
--- a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-open-more-options-linux.png
+++ b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-open-more-options-linux.png
--- a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-open-notification-options-linux.png
+++ b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-open-notification-options-linux.png
--- a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-open-notification-options-selection-linux.png
+++ b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-open-notification-options-selection-linux.png
--- a/res/css/views/rooms/RoomListPanel/_RoomListHeaderView.pcss
+++ b/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;
--- a/src/components/views/rooms/NotificationDecoration.tsx
+++ b/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";

--- a/src/components/views/rooms/RoomListPanel/RoomListHeaderView.tsx
+++ b/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>
            }
        >
--- a/src/i18n/strings/en_EN.json
+++ b/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",
--- a/test/unit-tests/components/viewmodels/roomlist/RoomListViewModel-test.tsx
+++ b/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 },
--- a/test/unit-tests/components/views/rooms/RoomListPanel/snapshots/RoomListHeaderView-test.tsx.snap
+++ b/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"
--- a/test/unit-tests/components/views/rooms/RoomListPanel/snapshots/RoomListPanel-test.tsx.snap
+++ b/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
--- a/test/unit-tests/components/views/rooms/snapshots/NotificationDecoration-test.tsx.snap
+++ b/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>