Fix color of icon button with outline (#30361)

* fix: room list header button color

* fix: room member list invite button

* test: update room list search snapshot

* test(e2e): update screenshots

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

@@ -12,10 +12,6 @@
     border-bottom: var(--cpd-border-width-1) solid var(--cpd-color-bg-subtle-primary);
     padding: 0 var(--cpd-space-3x);
 
-    svg {
-        fill: var(--cpd-color-icon-secondary);
-    }
-
     .mx_RoomListSearch_search {
         /* The search button should take all the remaining space */
         flex: 1;
@@ -23,6 +19,10 @@
         color: var(--cpd-color-text-secondary);
         min-width: 0;
 
+        svg {
+            fill: var(--cpd-color-icon-secondary);
+        }
+
         span {
             flex: 1;
 
@@ -42,10 +42,4 @@
             }
         }
     }
-
-    .mx_RoomListSearch_button:hover {
-        svg {
-            fill: var(--cpd-color-icon-primary);
-        }
-    }
 }

src/components/views/rooms/MemberList/MemberListHeaderView.tsx

@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 
 import { Search, Text, Button, Tooltip, InlineSpinner } from "@vector-im/compound-web";
 import React from "react";
-import InviteIcon from "@vector-im/compound-design-tokens/assets/web/icons/user-add-solid";
+import InviteIcon from "@vector-im/compound-design-tokens/assets/web/icons/user-add";
 import { UserAddIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import { Flex } from "../../../utils/Flex";
@@ -45,7 +45,7 @@ const InviteButton: React.FC<Props> = ({ vm }) => {
             <OptionalTooltip canInvite={vm.canInvite}>
                 <Button
                     className="mx_MemberListHeaderView_invite_small"
-                    kind="primary"
+                    kind="secondary"
                     onClick={vm.onInviteButtonClick}
                     size="sm"
                     iconOnly={true}

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

@@ -61,7 +61,6 @@ export function RoomListSearch({ activeSpace }: RoomListSearchProps): JSX.Elemen
             </Button>
             {displayDialButton && (
                 <Button
-                    className="mx_RoomListSearch_button"
                     kind="secondary"
                     size="sm"
                     Icon={DialPadIcon}
@@ -74,7 +73,6 @@ export function RoomListSearch({ activeSpace }: RoomListSearchProps): JSX.Elemen
             )}
             {displayExploreButton && (
                 <Button
-                    className="mx_RoomListSearch_button"
                     kind="secondary"
                     size="sm"
                     Icon={ExploreIcon}

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

@@ -42,7 +42,7 @@ exports[`<RoomListSearch /> should display search and explore buttons 1`] = `
     </button>
     <button
       aria-label="Explore rooms"
-      class="_button_vczzf_8 mx_RoomListSearch_button _has-icon_vczzf_57 _icon-only_vczzf_50"
+      class="_button_vczzf_8 _has-icon_vczzf_57 _icon-only_vczzf_50"
       data-kind="secondary"
       data-size="sm"
       role="button"
@@ -107,7 +107,7 @@ exports[`<RoomListSearch /> should display the dial button when the PTSN protoco
     </button>
     <button
       aria-label="Open dial pad"
-      class="_button_vczzf_8 mx_RoomListSearch_button _has-icon_vczzf_57 _icon-only_vczzf_50"
+      class="_button_vczzf_8 _has-icon_vczzf_57 _icon-only_vczzf_50"
       data-kind="secondary"
       data-size="sm"
       role="button"
@@ -128,7 +128,7 @@ exports[`<RoomListSearch /> should display the dial button when the PTSN protoco
     </button>
     <button
       aria-label="Explore rooms"
-      class="_button_vczzf_8 mx_RoomListSearch_button _has-icon_vczzf_57 _icon-only_vczzf_50"
+      class="_button_vczzf_8 _has-icon_vczzf_57 _icon-only_vczzf_50"
       data-kind="secondary"
       data-size="sm"
       role="button"