Jika/element-web
1
0
Fork 0
Code Issues Pull Requests Projects Wiki Activity

Switch to Compound icons to replace old icons (#31667)

Browse Source 
* Switch to Compound icons to replace old icons

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Apply same treatment to missed icons

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update snapshots

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Remove duplicated icon

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update icon

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>
This commit is contained in:
Michael Telatynski
2026-01-08 15:50:02 +00:00
committed by GitHub
parent 7d72775af9
commit ce741f055c
36 changed files with 60 additions and 186 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/async-components/views/dialogs/security/CreateSecretStorageDialog.tsx
View File

@@ -351,7 +351,6 @@ export default class CreateSecretStorageDialog extends React.PureComponent<IProp
outlined
>
<div className="mx_CreateSecretStorageDialog_optionTitle">
<span className="mx_CreateSecretStorageDialog_optionIcon mx_CreateSecretStorageDialog_optionIcon_secureBackup" />
{_t("settings|key_backup|setup_secure_backup|generate_security_key_title")}
</div>
<div>{_t("settings|key_backup|setup_secure_backup|generate_security_key_description")}</div>
@@ -370,7 +369,6 @@ export default class CreateSecretStorageDialog extends React.PureComponent<IProp
outlined
>
<div className="mx_CreateSecretStorageDialog_optionTitle">
<span className="mx_CreateSecretStorageDialog_optionIcon mx_CreateSecretStorageDialog_optionIcon_securePhrase" />
{_t("settings|key_backup|setup_secure_backup|enter_phrase_title")}
</div>
<div>{_t("settings|key_backup|setup_secure_backup|use_phrase_only_you_know")}</div>
@@ -696,16 +694,10 @@ export default class CreateSecretStorageDialog extends React.PureComponent<IProp
switch (this.state.phase) {
case Phase.Passphrase:
case Phase.PassphraseConfirm:
titleClass = [
"mx_CreateSecretStorageDialog_titleWithIcon",
"mx_CreateSecretStorageDialog_securePhraseTitle",
];
titleClass = ["mx_CreateSecretStorageDialog_titleWithIcon"];
break;
case Phase.ShowKey:
titleClass = [
"mx_CreateSecretStorageDialog_titleWithIcon",
"mx_CreateSecretStorageDialog_secureBackupTitle",
];
titleClass = ["mx_CreateSecretStorageDialog_titleWithIcon"];
break;
case Phase.ChooseKeyPassphrase:
titleClass = "mx_CreateSecretStorageDialog_centeredTitle";

7
src/components/views/context_menus/MessageContextMenu.tsx
View File

@@ -40,6 +40,7 @@ import {
VisibilityOnIcon,
ShareIcon,
CopyIcon,
TreeIcon,
} from "@vector-im/compound-design-tokens/assets/web/icons";
import { MatrixClientPeg } from "../../../MatrixClientPeg";
@@ -74,8 +75,6 @@ import { type ShowThreadPayload } from "../../../dispatcher/payloads/ShowThreadP
import { CardContext } from "../right_panel/context";
import PinningUtils from "../../../utils/PinningUtils";
import PosthogTrackers from "../../../PosthogTrackers.ts";
import { Icon as ViewInRoomIcon } from "../../../../res/img/element-icons/view-in-room.svg";
import { Icon as ChildRelationshipIcon } from "../../../../res/img/element-icons/child-relationship.svg";
interface IReplyInThreadButton {
mxEvent: MatrixEvent;
@@ -570,7 +569,7 @@ export default class MessageContextMenu extends React.Component<IProps, IState>
if (relatedEventId && SettingsStore.getValue("developerMode")) {
jumpToRelatedEventButton = (
<IconizedContextMenuOption
icon={<ChildRelationshipIcon />}
icon={<TreeIcon />}
label={_t("timeline|context_menu|view_related_event")}
onClick={() => this.onJumpToRelatedEventClick(relatedEventId)}
/>
@@ -691,7 +690,7 @@ export default class MessageContextMenu extends React.Component<IProps, IState>
if (isThreadRootEvent) {
viewInRoomButton = (
<IconizedContextMenuOption
icon={<ViewInRoomIcon />}
icon={<VisibilityOnIcon />}
label={_t("timeline|mab|view_in_room")}
onClick={this.viewInRoom}
/>

5
src/components/views/context_menus/ThreadListContextMenu.tsx
View File

@@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
import React, { useCallback, useEffect } from "react";
import { type MatrixEvent } from "matrix-js-sdk/src/matrix";
import { LinkIcon, OverflowHorizontalIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
import { LinkIcon, OverflowHorizontalIcon, VisibilityOnIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
import { type ButtonEvent } from "../elements/AccessibleButton";
import dis from "../../../dispatcher/dispatcher";
@@ -21,7 +21,6 @@ import IconizedContextMenu, { IconizedContextMenuOption, IconizedContextMenuOpti
import { WidgetLayoutStore } from "../../../stores/widgets/WidgetLayoutStore";
import { MatrixClientPeg } from "../../../MatrixClientPeg";
import { type ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
import { Icon as ViewInRoomIcon } from "../../../../res/img/element-icons/view-in-room.svg";
export interface ThreadListContextMenuProps {
mxEvent: MatrixEvent;
@@ -106,7 +105,7 @@ const ThreadListContextMenu: React.FC<ThreadListContextMenuProps> = ({
<IconizedContextMenuOption
onClick={(e) => viewInRoom(e)}
label={_t("timeline|mab|view_in_room")}
icon={<ViewInRoomIcon />}
icon={<VisibilityOnIcon />}
/>
)}
{permalinkCreator && (

3
src/components/views/dialogs/FeedbackDialog.tsx
View File

@@ -6,7 +6,7 @@ Please see LICENSE files in the repository root for full details.
*/
import React, { type JSX, useEffect, useRef, useState } from "react";
import { ChatSolidIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
import { ChatSolidIcon, BugIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
import QuestionDialog from "./QuestionDialog";
import { _t } from "../../../languageHandler";
@@ -20,7 +20,6 @@ import { submitFeedback } from "../../../rageshake/submit-rageshake";
import { useStateToggle } from "../../../hooks/useStateToggle";
import StyledCheckbox from "../elements/StyledCheckbox";
import ExternalLink from "../elements/ExternalLink";
import { Icon as BugIcon } from "../../../../res/img/feather-customised/bug.svg";
interface IProps {
feature?: string;

8
src/components/views/dialogs/RoomSettingsDialog.tsx
View File

@@ -18,6 +18,8 @@ import {
SettingsIcon,
VoiceCallIcon,
NotificationsIcon,
AdvancedSettingsIcon,
TreeIcon,
} from "@vector-im/compound-design-tokens/assets/web/icons";
import TabbedView, { Tab } from "../../structures/TabbedView";
@@ -40,8 +42,6 @@ import { type NonEmptyArray } from "../../../@types/common";
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 BridgeIcon } from "../../../../res/img/feather-customised/bridge.svg";
export const enum RoomSettingsTab {
General = "ROOM_GENERAL_TAB",
@@ -201,7 +201,7 @@ class RoomSettingsDialog extends React.Component<IProps, IState> {
new Tab(
RoomSettingsTab.Bridges,
_td("room_settings|bridges|title"),
<BridgeIcon />,
<TreeIcon />,
<BridgeSettingsTab room={this.state.room} />,
"RoomSettingsBridges",
),
@@ -222,7 +222,7 @@ class RoomSettingsDialog extends React.Component<IProps, IState> {
new Tab(
RoomSettingsTab.Advanced,
_td("common|advanced"),
<AdvancedIcon />,
<AdvancedSettingsIcon />,
<AdvancedRoomSettingsTab
room={this.state.room}
closeSettingsFn={() => this.props.onFinished(true)}

10
src/components/views/dialogs/SpaceSettingsDialog.tsx
View File

@@ -8,7 +8,12 @@ Please see LICENSE files in the repository root for full details.
import React, { useMemo } from "react";
import { type Room, type MatrixClient } from "matrix-js-sdk/src/matrix";
import { AdminIcon, SettingsSolidIcon, VisibilityOnIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
import {
AdminIcon,
AdvancedSettingsIcon,
SettingsSolidIcon,
VisibilityOnIcon,
} from "@vector-im/compound-design-tokens/assets/web/icons";
import { _t, _td } from "../../../languageHandler";
import BaseDialog from "./BaseDialog";
@@ -23,7 +28,6 @@ import AdvancedRoomSettingsTab from "../settings/tabs/room/AdvancedRoomSettingsT
import RolesRoomSettingsTab from "../settings/tabs/room/RolesRoomSettingsTab";
import { Action } from "../../../dispatcher/actions";
import { type NonEmptyArray } from "../../../@types/common";
import { Icon as AdvancedIcon } from "../../../../res/img/element-icons/room/settings/advanced.svg";
export enum SpaceSettingsTab {
General = "SPACE_GENERAL_TAB",
@@ -69,7 +73,7 @@ const SpaceSettingsDialog: React.FC<IProps> = ({ matrixClient: cli, space, onFin
? new Tab(
SpaceSettingsTab.Advanced,
_td("common|advanced"),
<AdvancedIcon />,
<AdvancedSettingsIcon />,
<AdvancedRoomSettingsTab room={space} closeSettingsFn={onFinished} />,
)
: null,

5
src/components/views/rooms/EventTile/EventTileThreadToolbar.tsx
View File

@@ -7,12 +7,11 @@ Please see LICENSE files in the repository root for full details.
*/
import React, { type JSX } from "react";
import LinkIcon from "@vector-im/compound-design-tokens/assets/web/icons/link";
import { LinkIcon, VisibilityOnIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
import { RovingAccessibleButton } from "../../../../accessibility/RovingTabIndex";
import Toolbar from "../../../../accessibility/Toolbar";
import { _t } from "../../../../languageHandler";
import { Icon as ViewInRoomIcon } from "../../../../../res/img/element-icons/view-in-room.svg";
import { type ButtonEvent } from "../../elements/AccessibleButton";
export function EventTileThreadToolbar({
@@ -30,7 +29,7 @@ export function EventTileThreadToolbar({
title={_t("timeline|mab|view_in_room")}
key="view_in_room"
>
<ViewInRoomIcon />
<VisibilityOnIcon />
</RovingAccessibleButton>
<RovingAccessibleButton
className="mx_MessageActionBar_iconButton"