Replace batch of legacy icons with compound design tokens (#31360)

* Replace element-icons/call/dialpad.svg with compound

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

* Replace element-icons/call/hangup.svg with compound

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

* Replace element-icons/call/video-call.svg with compound

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

* Replace element-icons/call/voice-call.svg with compound

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

* Replace element-icons/cloud-off.svg with compound

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

* Replace element-icons/eye.svg with compound

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

* Remove debug

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
2025-12-01 10:38:20 +00:00
committed by GitHub
parent 0c293bbbd0
commit f46869e114
31 changed files with 32 additions and 53 deletions

View File

@@ -344,7 +344,7 @@ export default class LeftPanel extends React.Component<IProps, IState> {
if (this.state.supportsPstnProtocol) {
dialPadButton = (
<AccessibleButton
className={classNames("mx_LeftPanel_dialPadButton", {})}
className="mx_LeftPanel_dialPadButton"
onClick={this.onDialPad}
title={_t("left_panel|open_dial_pad")}
/>

View File

@@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
import React, { type FC, type RefObject, useCallback, useMemo } from "react";
import { type Room, RoomEvent } from "matrix-js-sdk/src/matrix";
import BackIcon from "@vector-im/compound-design-tokens/assets/web/icons/arrow-left";
import { ArrowLeftIcon, EndCallIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
import PersistentApp from "../elements/PersistentApp";
import defaultDispatcher from "../../../dispatcher/dispatcher";
@@ -20,7 +20,6 @@ import { Container, WidgetLayoutStore } from "../../../stores/widgets/WidgetLayo
import { useTypedEventEmitterState } from "../../../hooks/useEventEmitter";
import Toolbar from "../../../accessibility/Toolbar";
import { RovingAccessibleButton } from "../../../accessibility/RovingTabIndex";
import { Icon as HangupIcon } from "../../../../res/img/element-icons/call/hangup.svg";
import { _t } from "../../../languageHandler";
import { WidgetType } from "../../../widgets/WidgetType";
import { WidgetMessagingStore } from "../../../stores/widgets/WidgetMessagingStore";
@@ -112,7 +111,7 @@ export const WidgetPip: FC<Props> = ({ widgetId, room, viewingRoom, onStartMovin
className="mx_WidgetPip_backButton"
aria-label={_t("action|back")}
>
<BackIcon className="mx_Icon mx_Icon_16" />
<ArrowLeftIcon className="mx_Icon mx_Icon_16" />
{roomName}
</RovingAccessibleButton>
</Toolbar>
@@ -124,7 +123,7 @@ export const WidgetPip: FC<Props> = ({ widgetId, room, viewingRoom, onStartMovin
aria-label={_t("action|leave")}
placement="top"
>
<HangupIcon className="mx_Icon mx_Icon_24" />
<EndCallIcon className="mx_Icon mx_Icon_24" />
</RovingAccessibleButton>
</Toolbar>
)}

View File

@@ -99,7 +99,7 @@ html {
background-color: $dark-fg;
mask-repeat: no-repeat;
mask-position: center;
mask-image: url("$(res)/img/element-icons/call/video-call.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/video-call-solid.svg");
mask-size: $icon-size;
display: block;
width: $icon-size;