nikrozman/element-web
1
0
Fork 0
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Replace legacy icons with compound (#31424)

Browse Source 
* Replace legacy dialpad.svg icon with compound

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

* Replace legacy silence.svg icon with compound

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

* Replace legacy tab-userdirectory.svg icon with compound

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

* Replace legacy e2e icons with compound

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

* Remove old mask

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

* Update jest snapshots

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

* Update screenshots

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

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski
2025-12-08 09:27:50 +00:00
committed by GitHub
parent b3e8bc8fea
commit e97de7d2ea
42 changed files with 353 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/views/right_panel/EncryptionPanel.tsx
View File

@@ -10,6 +10,9 @@ import React, { useCallback, useEffect, useRef, useState } from "react";
import { VerificationPhase, type VerificationRequest, VerificationRequestEvent } from "matrix-js-sdk/src/crypto-api";
import { type RoomMember, type User } from "matrix-js-sdk/src/matrix";
import { logger } from "matrix-js-sdk/src/logger";
// ErrorDialog needs path to the image, not the image node
// eslint-disable-next-line no-restricted-imports
import ErrorSolidIcon from "@vector-im/compound-design-tokens/icons/error-solid.svg";
import EncryptionInfo from "./EncryptionInfo";
import VerificationPanel from "./VerificationPanel";
@@ -21,8 +24,6 @@ import { RightPanelPhases } from "../../../stores/right-panel/RightPanelStorePha
import RightPanelStore from "../../../stores/right-panel/RightPanelStore";
import ErrorDialog from "../dialogs/ErrorDialog";
import { useMatrixClientContext } from "../../../contexts/MatrixClientContext";
import WarningDeprecatedSvg from "../../../../res/img/e2e/warning-deprecated.svg";
import WarningSvg from "../../../../res/img/e2e/warning.svg";
// cancellation codes which constitute a key mismatch
const MISMATCHES = ["m.key_mismatch", "m.user_error", "m.mismatched_sas"];
@@ -81,7 +82,7 @@ const EncryptionPanel: React.FC<IProps> = (props: IProps) => {
) {
isShowingMismatchModal.current = true;
Modal.createDialog(ErrorDialog, {
headerImage: WarningDeprecatedSvg,
headerImage: ErrorSolidIcon,
title: _t("encryption|messages_not_secure|title"),
description: (
<div>
@@ -120,7 +121,7 @@ const EncryptionPanel: React.FC<IProps> = (props: IProps) => {
setRequesting(false);
Modal.createDialog(ErrorDialog, {
headerImage: WarningSvg,
headerImage: ErrorSolidIcon,
title: _t("encryption|verification|error_starting_title"),
description: _t("encryption|verification|error_starting_description"),
});

10
src/components/views/settings/devices/DeviceSecurityCard.tsx
View File

@@ -8,11 +8,11 @@ Please see LICENSE files in the repository root for full details.
import classNames from "classnames";
import React from "react";
import { ShieldIcon, ErrorSolidIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
import { Icon as VerifiedIcon } from "../../../../../res/img/e2e/verified.svg";
import { Icon as UnverifiedIcon } from "../../../../../res/img/e2e/warning.svg";
import { Icon as InactiveIcon } from "../../../../../res/img/element-icons/settings/inactive.svg";
import { DeviceSecurityVariation } from "./types";
interface Props {
variation: DeviceSecurityVariation;
heading: string;
@@ -22,9 +22,9 @@ interface Props {
const VariationIcon: Record<DeviceSecurityVariation, React.FC<React.SVGProps<SVGSVGElement>>> = {
[DeviceSecurityVariation.Inactive]: InactiveIcon,
[DeviceSecurityVariation.Verified]: VerifiedIcon,
[DeviceSecurityVariation.Unverified]: UnverifiedIcon,
[DeviceSecurityVariation.Unverifiable]: UnverifiedIcon,
[DeviceSecurityVariation.Verified]: ShieldIcon,
[DeviceSecurityVariation.Unverified]: ErrorSolidIcon,
[DeviceSecurityVariation.Unverifiable]: ErrorSolidIcon,
};
const DeviceSecurityIcon: React.FC<{ variation: DeviceSecurityVariation }> = ({ variation }) => {

7
src/components/views/settings/devices/DeviceTypeIcon.tsx
View File

@@ -8,13 +8,12 @@ Please see LICENSE files in the repository root for full details.
import React from "react";
import classNames from "classnames";
import { ShieldIcon, ErrorSolidIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
import { Icon as UnknownDeviceIcon } from "../../../../../res/img/element-icons/settings/unknown-device.svg";
import { Icon as DesktopIcon } from "../../../../../res/img/element-icons/settings/desktop.svg";
import { Icon as WebIcon } from "../../../../../res/img/element-icons/settings/web.svg";
import { Icon as MobileIcon } from "../../../../../res/img/element-icons/settings/mobile.svg";
import { Icon as VerifiedIcon } from "../../../../../res/img/e2e/verified.svg";
import { Icon as UnverifiedIcon } from "../../../../../res/img/e2e/warning.svg";
import { _t, _td, type TranslationKey } from "../../../../languageHandler";
import { type ExtendedDevice } from "./types";
import { DeviceType } from "../../../../utils/device/parseUserAgent";
@@ -51,13 +50,13 @@ export const DeviceTypeIcon: React.FC<Props> = ({ isVerified, isSelected, device
<Icon className="mx_DeviceTypeIcon_deviceIcon" role="img" aria-label={label} />
</div>
{isVerified ? (
<VerifiedIcon
<ShieldIcon
className={classNames("mx_DeviceTypeIcon_verificationIcon", "verified")}
role="img"
aria-label={_t("common|verified")}
/>
) : (
<UnverifiedIcon
<ErrorSolidIcon
className={classNames("mx_DeviceTypeIcon_verificationIcon", "unverified")}
role="img"
aria-label={_t("common|unverified")}