Switch to non-solid compound icons for room settings & composer (#31561)

* Switch to non-solid compound icons for room settings & composer Also manually fixes sticker.svg to be tintable until it is redrawn Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Replace sticker.svg Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update snapshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --------- Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2025-12-25 03:01:10 +01:00 · 2025-12-19 10:19:02 +00:00 · 2025-12-19 10:19:02 +00:00 · 63bf04384a
commit 63bf04384a
parent e15f80c371
11 changed files with 34 additions and 28 deletions
--- a/package.json
+++ b/package.json
@ -92,7 +92,7 @@
        "@matrix-org/spec": "^1.7.0",
        "@sentry/browser": "^10.0.0",
        "@types/png-chunks-extract": "^1.0.2",
-        "@vector-im/compound-design-tokens": "6.4.2",
+        "@vector-im/compound-design-tokens": "6.4.3",
        "@vector-im/compound-web": "^8.3.1",
        "@vector-im/matrix-wysiwyg": "2.40.0",
        "@zxcvbn-ts/core": "^3.0.4",
--- a/playwright/snapshots/settings/general-room-settings-tab.spec.ts/General-room-settings-tab-should-be-rendered-properly-1-linux.png
+++ b/playwright/snapshots/settings/general-room-settings-tab.spec.ts/General-room-settings-tab-should-be-rendered-properly-1-linux.png
--- a/playwright/snapshots/settings/room-settings/room-security-tab.spec.ts/room-security-settings-linux.png
+++ b/playwright/snapshots/settings/room-settings/room-security-tab.spec.ts/room-security-settings-linux.png
--- a/playwright/snapshots/settings/room-settings/room-security-tab.spec.ts/room-security-settings-world-readable-linux.png
+++ b/playwright/snapshots/settings/room-settings/room-security-tab.spec.ts/room-security-settings-world-readable-linux.png
--- a/playwright/snapshots/settings/room-settings/room-video-tab.spec.ts/room-video-settings-linux.png
+++ b/playwright/snapshots/settings/room-settings/room-video-tab.spec.ts/room-video-settings-linux.png
--- a/res/img/element-icons/room/composer/sticker.svg
+++ b/res/img/element-icons/room/composer/sticker.svg
@ -1,7 +0,0 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<mask id="path-1-inside-1" fill="white">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M8.83268 19.9326C3.85983 19.3544 0 15.128 0 10C0 4.47715 4.47715 0 10 0C15.1526 0 19.395 3.89699 19.9407 8.9044C19.906 8.88852 19.8701 8.87447 19.833 8.8624C16.7196 7.85038 13.2389 8.47712 10.8486 10.8893C8.46405 13.2956 7.84019 16.7967 8.83268 19.9326ZM10.7222 19.2778L19.2195 10.7805C16.7328 9.97252 14.0596 10.4993 12.2608 12.3145C10.4761 14.1155 9.94832 16.7851 10.7222 19.2778Z"/>
-</mask>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M8.83268 19.9326C3.85983 19.3544 0 15.128 0 10C0 4.47715 4.47715 0 10 0C15.1526 0 19.395 3.89699 19.9407 8.9044C19.906 8.88852 19.8701 8.87447 19.833 8.8624C16.7196 7.85038 13.2389 8.47712 10.8486 10.8893C8.46405 13.2956 7.84019 16.7967 8.83268 19.9326ZM10.7222 19.2778L19.2195 10.7805C16.7328 9.97252 14.0596 10.4993 12.2608 12.3145C10.4761 14.1155 9.94832 16.7851 10.7222 19.2778Z" fill="black"/>
-<path d="M8.83268 19.9326L8.7175 20.9233C9.05357 20.9624 9.38653 20.8284 9.6019 20.5675C9.81726 20.3065 9.88566 19.9542 9.78357 19.6316L8.83268 19.9326ZM19.9407 8.9044L19.5254 9.81119C19.8517 9.96064 20.2331 9.92324 20.5242 9.71327C20.8152 9.5033 20.9711 9.15314 20.9322 8.79635L19.9407 8.9044ZM19.833 8.8624L20.1413 7.91388L20.1413 7.91388L19.833 8.8624ZM10.8486 10.8893L11.557 11.5913L10.8486 10.8893ZM10.7222 19.2778L9.76968 19.5735C9.87326 19.9072 10.1439 20.1623 10.483 20.2461C10.8222 20.3298 11.1804 20.2301 11.4275 19.983L10.7222 19.2778ZM19.2195 10.7805L19.9248 11.4857C20.1702 11.2403 20.2704 10.8851 20.1894 10.5476C20.1083 10.2102 19.8578 9.93913 19.5277 9.8319L19.2195 10.7805ZM12.2608 12.3145L12.9693 13.0165L12.2608 12.3145ZM-0.997378 10C-0.997378 15.6401 3.24762 20.2874 8.7175 20.9233L8.94786 18.9419C4.47204 18.4215 0.997378 14.6158 0.997378 10H-0.997378ZM10 -0.997378C3.92632 -0.997378 -0.997378 3.92632 -0.997378 10H0.997378C0.997378 5.02799 5.02799 0.997378 10 0.997378V-0.997378ZM20.9322 8.79635C20.332 3.28845 15.6672 -0.997378 10 -0.997378V0.997378C14.638 0.997378 18.458 4.50552 18.9492 9.01244L20.9322 8.79635ZM19.5246 9.81093L19.5254 9.81119L20.356 7.9976C20.2866 7.96583 20.215 7.93783 20.1413 7.91388L19.5246 9.81093ZM11.557 11.5913C13.6521 9.47718 16.7269 8.9015 19.5246 9.81093L20.1413 7.91388C16.7123 6.79926 12.8258 7.47705 10.1401 10.1873L11.557 11.5913ZM9.78357 19.6316C8.88863 16.804 9.46516 13.7023 11.557 11.5913L10.1401 10.1873C7.46293 12.8889 6.79174 16.7894 7.88179 20.2335L9.78357 19.6316ZM11.4275 19.983L19.9248 11.4857L18.5143 10.0752L10.017 18.5725L11.4275 19.983ZM19.5277 9.8319C16.7239 8.92094 13.6455 9.50024 11.5524 11.6124L12.9693 13.0165C14.4738 11.4983 16.7417 11.0241 18.9113 11.729L19.5277 9.8319ZM11.5524 11.6124C9.47765 13.7061 8.89993 16.7721 9.76968 19.5735L11.6747 18.9821C10.9967 16.7982 11.4746 14.5248 12.9693 13.0165L11.5524 11.6124Z" fill="black" mask="url(#path-1-inside-1)"/>
-</svg>
--- a/src/components/views/dialogs/RoomSettingsDialog.tsx
+++ b/src/components/views/dialogs/RoomSettingsDialog.tsx
@ -13,10 +13,11 @@ import { RoomEvent, type Room, RoomStateEvent, type MatrixEvent, EventType } fro
 import {
    AdminIcon,
    GroupIcon,
-    LockSolidIcon,
+    LockIcon,
    PollsIcon,
-    SettingsSolidIcon,
-    VoiceCallSolidIcon,
+    SettingsIcon,
+    VoiceCallIcon,
+    NotificationsIcon,
 } from "@vector-im/compound-design-tokens/assets/web/icons";

 import TabbedView, { Tab } from "../../structures/TabbedView";
@ -40,7 +41,6 @@ import { PollHistoryTab } from "../settings/tabs/room/PollHistoryTab";
 import ErrorBoundary from "../elements/ErrorBoundary";
 import { PeopleRoomSettingsTab } from "../settings/tabs/room/PeopleRoomSettingsTab";
 import { Icon as AdvancedIcon } from "../../../../res/img/element-icons/room/settings/advanced.svg";
-import { Icon as NotificationsIcon } from "../../../../res/img/element-icons/notifications.svg";
 import { Icon as BridgeIcon } from "../../../../res/img/feather-customised/bridge.svg";

 export const enum RoomSettingsTab {
@ -140,7 +140,7 @@ class RoomSettingsDialog extends React.Component<IProps, IState> {
            new Tab(
                RoomSettingsTab.General,
                _td("common|general"),
-                <SettingsSolidIcon />,
+                <SettingsIcon />,
                <GeneralRoomSettingsTab room={this.state.room} />,
                "RoomSettingsGeneral",
            ),
@ -160,7 +160,7 @@ class RoomSettingsDialog extends React.Component<IProps, IState> {
                new Tab(
                    RoomSettingsTab.Voip,
                    _td("settings|voip|title"),
-                    <VoiceCallSolidIcon />,
+                    <VoiceCallIcon />,
                    <VoipRoomSettingsTab room={this.state.room} />,
                ),
            );
@ -169,7 +169,7 @@ class RoomSettingsDialog extends React.Component<IProps, IState> {
            new Tab(
                RoomSettingsTab.Security,
                _td("room_settings|security|title"),
-                <LockSolidIcon />,
+                <LockIcon />,
                <SecurityRoomSettingsTab room={this.state.room} closeSettingsFn={() => this.props.onFinished(true)} />,
                "RoomSettingsSecurityPrivacy",
            ),
--- a/src/components/views/location/LocationButton.tsx
+++ b/src/components/views/location/LocationButton.tsx
@ -9,7 +9,7 @@ Please see LICENSE files in the repository root for full details.
 import React, { type ReactNode, type SyntheticEvent, useContext } from "react";
 import classNames from "classnames";
 import { type RoomMember, type IEventRelation } from "matrix-js-sdk/src/matrix";
-import { LocationPinSolidIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
+import { LocationPinIcon } from "@vector-im/compound-design-tokens/assets/web/icons";

 import { _t } from "../../../languageHandler";
 import { CollapsibleButton } from "../rooms/CollapsibleButton";
@ -56,7 +56,7 @@ const LocationButton: React.FC<IProps> = ({ roomId, sender, menuPosition, relati
    return (
        <React.Fragment>
            <CollapsibleButton className={className} onClick={openMenu} title={_t("common|location")} inputRef={button}>
-                <LocationPinSolidIcon />
+                <LocationPinIcon />
            </CollapsibleButton>

            {contextMenu}
--- a/src/components/views/rooms/MessageComposerButtons.tsx
+++ b/src/components/views/rooms/MessageComposerButtons.tsx
@ -17,9 +17,10 @@ import {
 import React, { type JSX, createContext, type ReactElement, type ReactNode, useContext, useRef } from "react";
 import {
    AttachmentIcon,
-    MicOnSolidIcon,
+    MicOnIcon,
    OverflowHorizontalIcon,
    PollsIcon,
+    StickerIcon,
    TextFormattingIcon,
 } from "@vector-im/compound-design-tokens/assets/web/icons";

@ -42,7 +43,6 @@ import { filterBoolean } from "../../../utils/arrays";
 import { useSettingValue } from "../../../hooks/useSettings";
 import AccessibleButton, { type ButtonEvent } from "../elements/AccessibleButton";
 import { useScopedRoomContext } from "../../../contexts/ScopedRoomContext.tsx";
-import { Icon as StickersIcon } from "../../../../res/img/element-icons/room/composer/sticker.svg";

 interface IProps {
    addEmoji: (emoji: string) => boolean;
@ -260,7 +260,7 @@ function showStickersButton(props: IProps): ReactElement | null {
            onClick={() => props.setStickerPickerOpen(!props.isStickerPickerOpen)}
            title={props.isStickerPickerOpen ? _t("composer|close_sticker_picker") : _t("common|sticker")}
        >
-            <StickersIcon />
+            <StickerIcon />
        </CollapsibleButton>
    ) : null;
 }
@ -274,7 +274,7 @@ function voiceRecordingButton(props: IProps, narrow: boolean): ReactElement | nu
            onClick={props.onRecordStartEndClick}
            title={_t("composer|voice_message_button")}
        >
-            <MicOnSolidIcon />
+            <MicOnIcon />
        </CollapsibleButton>
    );
 }
--- a/test/unit-tests/components/views/dialogs/snapshots/RoomSettingsDialog-test.tsx.snap
+++ b/test/unit-tests/components/views/dialogs/snapshots/RoomSettingsDialog-test.tsx.snap
@ -18,7 +18,10 @@ NodeList [
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
-        d="M12.731 2C13.432 2 14 2.568 14 3.269c0 .578.396 1.074.935 1.286q.128.052.253.106c.531.23 1.162.16 1.572-.25a1.27 1.27 0 0 1 1.794 0l1.034 1.035a1.27 1.27 0 0 1 0 1.794c-.41.41-.48 1.04-.248 1.572l.105.253c.212.539.708.935 1.286.935.701 0 1.269.568 1.269 1.269v1.462c0 .701-.568 1.269-1.269 1.269-.578 0-1.074.396-1.287.935q-.05.128-.104.253c-.232.531-.161 1.162.248 1.572a1.27 1.27 0 0 1 0 1.794l-1.034 1.034a1.27 1.27 0 0 1-1.794 0c-.41-.41-1.04-.48-1.572-.248a8 8 0 0 1-.253.105c-.539.212-.935.708-.935 1.286 0 .701-.568 1.269-1.269 1.269H11.27c-.702 0-1.27-.568-1.27-1.269 0-.578-.396-1.074-.935-1.287a8 8 0 0 1-.253-.104c-.531-.232-1.162-.161-1.572.248a1.27 1.27 0 0 1-1.794 0l-1.034-1.034a1.27 1.27 0 0 1 0-1.794c.41-.41.48-1.04.249-1.572a8 8 0 0 1-.106-.253C4.343 14.396 3.847 14 3.27 14 2.568 14 2 13.432 2 12.731V11.27c0-.702.568-1.27 1.269-1.27.578 0 1.074-.396 1.286-.935q.052-.128.106-.253c.23-.531.16-1.162-.25-1.572a1.27 1.27 0 0 1 0-1.794l1.035-1.034a1.27 1.27 0 0 1 1.794 0c.41.41 1.04.48 1.572.249a8 8 0 0 1 .253-.106c.539-.212.935-.708.935-1.286C10 2.568 10.568 2 11.269 2zM12 16a4 4 0 1 0 0-8 4 4 0 0 0 0 8"
+        d="M16 12a4 4 0 1 1-8 0 4 4 0 0 1 8 0m-2 0a2 2 0 1 0-4 0 2 2 0 0 0 4 0"
+      />
+      <path
+        d="M11.312 2h1.376A2.31 2.31 0 0 1 15 4.312v.247l.002.003c.01.014.031.033.064.047.03.013.056.013.07.01h.002l.177-.177a2.31 2.31 0 0 1 3.27 0l.973.974a2.31 2.31 0 0 1 0 3.269l-.177.177v.003a.13.13 0 0 0 .01.07.15.15 0 0 0 .047.063l.003.002h.247A2.31 2.31 0 0 1 22 11.312v1.376A2.31 2.31 0 0 1 19.688 15h-.247l-.003.002a.15.15 0 0 0-.047.064.13.13 0 0 0-.01.07v.002l.177.177a2.31 2.31 0 0 1 0 3.27l-.974.973a2.31 2.31 0 0 1-3.269 0l-.177-.177h-.003a.13.13 0 0 0-.07.01.15.15 0 0 0-.063.047l-.002.003v.247A2.31 2.31 0 0 1 12.688 22h-1.376A2.31 2.31 0 0 1 9 19.688v-.247l-.002-.003a.15.15 0 0 0-.064-.047.13.13 0 0 0-.07-.01h-.002l-.177.177a2.31 2.31 0 0 1-3.27 0l-.973-.974a2.31 2.31 0 0 1 0-3.269l.177-.177v-.003a.14.14 0 0 0-.01-.07.15.15 0 0 0-.047-.063L4.559 15h-.247A2.31 2.31 0 0 1 2 12.688v-1.376A2.31 2.31 0 0 1 4.312 9h.247l.003-.002a.15.15 0 0 0 .047-.064.14.14 0 0 0 .01-.07v-.002l-.177-.177a2.31 2.31 0 0 1 0-3.27l.974-.973a2.31 2.31 0 0 1 3.269 0l.177.177h.003a.14.14 0 0 0 .07-.01.15.15 0 0 0 .063-.047L9 4.559v-.247A2.31 2.31 0 0 1 11.312 2M11 4.312v.257c0 .893-.59 1.593-1.299 1.887-.716.297-1.622.21-2.248-.418l-.182-.182a.31.31 0 0 0-.441 0l-.974.974a.31.31 0 0 0 0 .44l.182.183c.627.626.715 1.531.418 2.248C6.162 10.41 5.462 11 4.569 11h-.257a.31.31 0 0 0-.312.312v1.376c0 .172.14.312.312.312h.257c.893 0 1.593.59 1.887 1.299.297.716.21 1.622-.418 2.248l-.182.182a.31.31 0 0 0 0 .441l.974.973a.31.31 0 0 0 .44 0l.183-.181c.626-.627 1.532-.715 2.248-.418.709.294 1.299.994 1.299 1.887v.257c0 .172.14.312.312.312h1.376c.172 0 .312-.14.312-.312v-.257c0-.893.59-1.593 1.299-1.887.716-.297 1.622-.21 2.249.418l.181.181c.122.122.32.122.441 0l.973-.973a.31.31 0 0 0 0-.44l-.181-.183c-.627-.626-.715-1.532-.418-2.248.294-.709.994-1.299 1.887-1.299h.257c.172 0 .312-.14.312-.312v-1.376a.31.31 0 0 0-.312-.312h-.257c-.893 0-1.593-.59-1.887-1.299-.297-.717-.21-1.622.418-2.248l.181-.182a.31.31 0 0 0 0-.441l-.973-.974a.31.31 0 0 0-.44 0l-.183.182c-.626.627-1.532.715-2.248.418C13.59 6.162 13 5.462 13 4.569v-.257A.31.31 0 0 0 12.688 4h-1.376a.31.31 0 0 0-.312.312"
      />
    </svg>
    <span
@ -44,7 +47,7 @@ NodeList [
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
-        d="M6 22q-.824 0-1.412-.587A1.93 1.93 0 0 1 4 20V10q0-.825.588-1.412A1.93 1.93 0 0 1 6 8h1V6q0-2.075 1.463-3.537Q9.926 1 12 1q2.075 0 3.537 1.463Q17 3.925 17 6v2h1q.824 0 1.413.588Q20 9.175 20 10v10q0 .824-.587 1.413A1.93 1.93 0 0 1 18 22zM9 8h6V6q0-1.25-.875-2.125A2.9 2.9 0 0 0 12 3q-1.25 0-2.125.875A2.9 2.9 0 0 0 9 6z"
+        d="M6 22q-.824 0-1.412-.587A1.93 1.93 0 0 1 4 20V10q0-.825.588-1.412A1.93 1.93 0 0 1 6 8h1V6q0-2.075 1.463-3.537Q9.926 1 12 1q2.075 0 3.537 1.463Q17 3.925 17 6v2h1q.824 0 1.413.588Q20 9.175 20 10v10q0 .824-.587 1.413A1.93 1.93 0 0 1 18 22zm0-2h12V10H6zM9 8h6V6q0-1.25-.875-2.125A2.9 2.9 0 0 0 12 3q-1.25 0-2.125.875A2.9 2.9 0 0 0 9 6z"
      />
    </svg>
    <span
@ -90,7 +93,17 @@ NodeList [
    role="tab"
    tabindex="-1"
  >
-    <div />
+    <svg
+      fill="currentColor"
+      height="1em"
+      viewBox="0 0 24 24"
+      width="1em"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M12 3c7 0 7 7 7 7v6l1.293 1.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7m5 7.01v-.022l-.009-.146a7 7 0 0 0-.073-.607 6.6 6.6 0 0 0-.582-1.84c-.319-.638-.766-1.215-1.398-1.637C14.318 5.344 13.4 5 12 5s-2.317.344-2.937.758c-.633.422-1.08.999-1.4 1.636a6.6 6.6 0 0 0-.58 1.841A7 7 0 0 0 7 9.988v6.84L6.828 17h10.344L17 16.828zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+      />
+    </svg>
    <span
      class="mx_TabbedView_tabLabel_text"
      id="mx_tabpanel_ROOM_NOTIFICATIONS_TAB_label"
--- a/yarn.lock
+++ b/yarn.lock
@ -4196,10 +4196,10 @@
  resolved "https://registry.yarnpkg.com/@unrs/resolver-binding-win32-x64-msvc/-/resolver-binding-win32-x64-msvc-1.11.1.tgz#538b1e103bf8d9864e7b85cc96fa8d6fb6c40777"
  integrity sha512-lrW200hZdbfRtztbygyaq/6jP6AKE8qQN2KvPcJ+x7wiD038YtnYtZ82IMNJ69GJibV7bwL3y9FgK+5w/pYt6g==

-"@vector-im/compound-design-tokens@6.4.2":
-  version "6.4.2"
-  resolved "https://registry.yarnpkg.com/@vector-im/compound-design-tokens/-/compound-design-tokens-6.4.2.tgz#29189d6480c8ccf09ce143cb4618fb13a56a7583"
-  integrity sha512-LHLGZgnatH3mQXn9TF+m/SUinPS2nKvuCT/r2AQ7HAgEIG/S/Ck6e/iV4IFQLSZnd9gU0RlMsLkP2UQ/AKUEBA==
+"@vector-im/compound-design-tokens@6.4.3":
+  version "6.4.3"
+  resolved "https://registry.yarnpkg.com/@vector-im/compound-design-tokens/-/compound-design-tokens-6.4.3.tgz#f8a98308650e841ffba6ca0820055e2bfe2b8af1"
+  integrity sha512-Zyqag2QCAfpRipLHSX/LEXj6OGFgBpilMQvNdr3a0iXeGASfkM3HZGid077kMRp9lvyHiQfPIs1BdllENwDSNQ==

 "@vector-im/compound-design-tokens@^6.3.0":
  version "6.4.1"