Skip to content

Commit 74a919c

Browse files
t3chguyt3chguy
authored
Deduplicate icons using Compound Design Tokens (#28381)
* Deduplicate icons using Compound Design Tokens Signed-off-by: Michael Telatynski <[email protected]> * Remove unused test images Signed-off-by: Michael Telatynski <[email protected]> * Update snapshots & screenshots Signed-off-by: Michael Telatynski <[email protected]> --------- Signed-off-by: Michael Telatynski <[email protected]>
1 parent b92101a commit 74a919c

File tree

26 files changed

+75
-104
lines changed

26 files changed

+75
-104
lines changed

‎playwright/snapshots/forgot-password/forgot-password.spec.ts/forgot-password-verify-email-linux.png

-31 Bytes
Loading

‎res/css/structures/_RoomStatusBar.pcss

+1-1
Original file line numberDiff line numberDiff line change
@@ -125,7 +125,7 @@ Please see LICENSE files in the repository root for full details.
125125
padding-left: 34px; /* 28px from above, but +6px to account for the wider icon */
126126

127127
&::before {
128-
mask-image: url("$(res)/img/element-icons/retry.svg");
128+
mask-image: url("@vector-im/compound-design-tokens/icons/restart.svg");
129129
}
130130
}
131131
}

‎res/css/structures/_SpaceHierarchy.pcss

+1-1
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@ Please see LICENSE files in the repository root for full details.
7777
height: 16px;
7878
width: 16px;
7979
left: 0;
80-
background-image: url("$(res)/img/element-icons/warning-badge.svg");
80+
background-image: url("@vector-im/compound-design-tokens/icons/error.svg");
8181
background-size: cover;
8282
background-repeat: no-repeat;
8383
}

‎res/css/views/context_menus/_MessageContextMenu.pcss

+2-2
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ Please see LICENSE files in the repository root for full details.
2929
}
3030

3131
.mx_MessageContextMenu_iconReport::before {
32-
mask-image: url("$(res)/img/element-icons/warning-badge.svg");
32+
mask-image: url("@vector-im/compound-design-tokens/icons/error.svg");
3333
}
3434

3535
.mx_MessageContextMenu_iconLink::before {
@@ -61,7 +61,7 @@ Please see LICENSE files in the repository root for full details.
6161
}
6262

6363
.mx_MessageContextMenu_iconResend::before {
64-
mask-image: url("$(res)/img/element-icons/retry.svg");
64+
mask-image: url("@vector-im/compound-design-tokens/icons/restart.svg");
6565
}
6666

6767
.mx_MessageContextMenu_iconSource::before {

‎res/css/views/dialogs/_AddExistingToSpaceDialog.pcss

+1-1
Original file line numberDiff line numberDiff line change
@@ -125,7 +125,7 @@ Please see LICENSE files in the repository root for full details.
125125
mask-repeat: no-repeat;
126126
mask-position: center;
127127
mask-size: contain;
128-
mask-image: url("$(res)/img/element-icons/retry.svg");
128+
mask-image: url("@vector-im/compound-design-tokens/icons/restart.svg");
129129
width: 18px;
130130
height: 18px;
131131
left: 0;

‎res/css/views/dialogs/security/_AccessSecretStorageDialog.pcss

+2-2
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ Please see LICENSE files in the repository root for full details.
2121

2222
&.mx_AccessSecretStorageDialog_resetBadge::before {
2323
/* The image isn't capable of masking, so we use a background instead. */
24-
background-image: url("$(res)/img/element-icons/warning-badge.svg");
24+
background-image: url("@vector-im/compound-design-tokens/icons/error.svg");
2525
background-size: 24px;
2626
background-color: transparent;
2727
}
@@ -120,7 +120,7 @@ Please see LICENSE files in the repository root for full details.
120120
width: 16px;
121121
left: 0;
122122
top: 2px; /* alignment */
123-
background-image: url("$(res)/img/element-icons/warning-badge.svg");
123+
background-image: url("@vector-im/compound-design-tokens/icons/error.svg");
124124
background-size: contain;
125125
}
126126

‎res/css/views/elements/_InfoTooltip.pcss

+1-1
Original file line numberDiff line numberDiff line change
@@ -29,5 +29,5 @@ Please see LICENSE files in the repository root for full details.
2929
}
3030

3131
.mx_InfoTooltip_icon_warning::before {
32-
mask-image: url("$(res)/img/element-icons/warning.svg");
32+
mask-image: url("@vector-im/compound-design-tokens/icons/error.svg");
3333
}

‎res/css/views/messages/_MessageActionBar.pcss

+4
Original file line numberDiff line numberDiff line change
@@ -108,6 +108,10 @@ Please see LICENSE files in the repository root for full details.
108108
color: var(--cpd-color-icon-primary);
109109
}
110110

111+
&.mx_MessageActionBar_retryButton {
112+
--MessageActionBar-icon-size: 16px;
113+
}
114+
111115
&.mx_MessageActionBar_downloadButton {
112116
--MessageActionBar-icon-size: 14px;
113117

‎res/css/views/rooms/_EntityTile.pcss

+2-1
Original file line numberDiff line numberDiff line change
@@ -31,8 +31,9 @@ Please see LICENSE files in the repository root for full details.
3131
position: absolute;
3232
top: calc(50% - 8px); /* center */
3333
right: -8px;
34-
mask: url("$(res)/img/member_chevron.png");
34+
mask: url("@vector-im/compound-design-tokens/icons/chevron-right.svg");
3535
mask-repeat: no-repeat;
36+
mask-position: center;
3637
width: 16px;
3738
height: 16px;
3839
background-color: $header-panel-text-primary-color;

‎res/css/views/rooms/_ThreadSummary.pcss

+4-4
Original file line numberDiff line numberDiff line change
@@ -53,11 +53,11 @@ Please see LICENSE files in the repository root for full details.
5353
content: "";
5454
position: absolute;
5555
top: 50%;
56-
right: $spacing-12;
56+
right: var(--cpd-space-1x);
5757
transform: translateY(-50%);
58-
width: 12px;
59-
height: 12px;
60-
mask-image: url("$(res)/img/compound/chevron-right-12px.svg");
58+
width: 24px;
59+
height: 24px;
60+
mask-image: url("@vector-im/compound-design-tokens/icons/chevron-right.svg");
6161
mask-position: center;
6262
mask-size: contain;
6363
mask-repeat: no-repeat;

‎res/img/compound/chevron-right-12px.svg

-10
This file was deleted.

‎res/img/compound/retry-16px.svg

-3
This file was deleted.

‎res/img/element-icons/retry.svg

-7
This file was deleted.

‎res/img/element-icons/warning-badge.svg

-32
This file was deleted.

‎res/img/element-icons/warning.svg

-3
This file was deleted.

‎res/img/member_chevron.png

-271 Bytes
Binary file not shown.

‎src/components/structures/auth/forgot-password/CheckEmail.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,10 @@ Please see LICENSE files in the repository root for full details.
88

99
import React, { ReactNode } from "react";
1010
import { Tooltip } from "@vector-im/compound-web";
11+
import { RestartIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
1112

1213
import AccessibleButton from "../../../views/elements/AccessibleButton";
1314
import { Icon as EMailPromptIcon } from "../../../../../res/img/element-icons/email-prompt.svg";
14-
import { Icon as RetryIcon } from "../../../../../res/img/compound/retry-16px.svg";
1515
import { _t } from "../../../../languageHandler";
1616
import { useTimeoutToggle } from "../../../../hooks/useTimeoutToggle";
1717
import { ErrorMessage } from "../../ErrorMessage";
@@ -60,7 +60,7 @@ export const CheckEmail: React.FC<CheckEmailProps> = ({
6060
<span className="mx_VerifyEMailDialog_text-light">{_t("auth|check_email_resend_prompt")}</span>
6161
<Tooltip description={_t("auth|check_email_resend_tooltip")} placement="top" open={tooltipVisible}>
6262
<AccessibleButton className="mx_AuthBody_resend-button" kind="link" onClick={onResendClickFn}>
63-
<RetryIcon className="mx_Icon mx_Icon_16" />
63+
<RestartIcon className="mx_Icon mx_Icon_16" />
6464
{_t("action|resend")}
6565
</AccessibleButton>
6666
</Tooltip>

‎src/components/structures/auth/forgot-password/VerifyEmailModal.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,10 @@ Please see LICENSE files in the repository root for full details.
88

99
import React, { ReactNode } from "react";
1010
import { Tooltip } from "@vector-im/compound-web";
11+
import { RestartIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
1112

1213
import { _t } from "../../../../languageHandler";
1314
import AccessibleButton from "../../../views/elements/AccessibleButton";
14-
import { Icon as RetryIcon } from "../../../../../res/img/compound/retry-16px.svg";
1515
import { Icon as EmailPromptIcon } from "../../../../../res/img/element-icons/email-prompt.svg";
1616
import { useTimeoutToggle } from "../../../../hooks/useTimeoutToggle";
1717
import { ErrorMessage } from "../../ErrorMessage";
@@ -59,7 +59,7 @@ export const VerifyEmailModal: React.FC<Props> = ({
5959
<span className="mx_VerifyEMailDialog_text-light">{_t("auth|check_email_resend_prompt")}</span>
6060
<Tooltip description={_t("auth|check_email_resend_tooltip")} placement="top" open={tooltipVisible}>
6161
<AccessibleButton className="mx_AuthBody_resend-button" kind="link" onClick={onResendClickFn}>
62-
<RetryIcon className="mx_Icon mx_Icon_16" />
62+
<RestartIcon className="mx_Icon mx_Icon_16" />
6363
{_t("action|resend")}
6464
</AccessibleButton>
6565
</Tooltip>

‎src/components/views/dialogs/AddExistingToSpaceDialog.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import { Room, EventType } from "matrix-js-sdk/src/matrix";
1212
import { KnownMembership } from "matrix-js-sdk/src/types";
1313
import { sleep } from "matrix-js-sdk/src/utils";
1414
import { logger } from "matrix-js-sdk/src/logger";
15+
import { ErrorIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
1516

1617
import { _t, _td, TranslationKey } from "../../../languageHandler";
1718
import BaseDialog from "./BaseDialog";
@@ -34,7 +35,6 @@ import LazyRenderList from "../elements/LazyRenderList";
3435
import { useSettingValue } from "../../../hooks/useSettings";
3536
import { filterBoolean } from "../../../utils/arrays";
3637
import { NonEmptyArray } from "../../../@types/common";
37-
import WarningBadgeSvg from "../../../../res/img/element-icons/warning-badge.svg";
3838

3939
// These values match CSS
4040
const ROW_HEIGHT = 32 + 12;
@@ -229,7 +229,7 @@ export const AddExistingToSpace: React.FC<IAddExistingToSpaceProps> = ({
229229
if (error) {
230230
footer = (
231231
<>
232-
<img src={WarningBadgeSvg} height="24" width="24" alt="" />
232+
<ErrorIcon height="24px" width="24px" />
233233

234234
<span className="mx_AddExistingToSpaceDialog_error">
235235
<div className="mx_AddExistingToSpaceDialog_errorHeading">

‎src/components/views/dialogs/ModalWidgetDialog.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ import {
2222
WidgetApiFromWidgetAction,
2323
WidgetKind,
2424
} from "matrix-widget-api";
25+
import { ErrorIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
2526

2627
import BaseDialog from "./BaseDialog";
2728
import { _t, getUserLanguage } from "../../../languageHandler";
@@ -33,7 +34,6 @@ import { arrayFastClone } from "../../../utils/arrays";
3334
import { ElementWidget } from "../../../stores/widgets/StopGapWidget";
3435
import { ELEMENT_CLIENT_ID } from "../../../identifiers";
3536
import SettingsStore from "../../../settings/SettingsStore";
36-
import WarningBadgeSvg from "../../../../res/img/element-icons/warning-badge.svg";
3737

3838
interface IProps {
3939
widgetDefinition: IModalWidgetOpenRequestData;
@@ -186,7 +186,7 @@ export default class ModalWidgetDialog extends React.PureComponent<IProps, IStat
186186
onFinished={this.props.onFinished}
187187
>
188188
<div className="mx_ModalWidgetDialog_warning">
189-
<img src={WarningBadgeSvg} height="16" width="16" alt="" />
189+
<ErrorIcon width="16px" height="16px" />
190190
{_t("widget|modal_data_warning", {
191191
widgetDomain: parsed.hostname,
192192
})}

‎src/components/views/location/MapError.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,8 @@ Please see LICENSE files in the repository root for full details.
88

99
import React from "react";
1010
import classNames from "classnames";
11+
import { ErrorIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
1112

12-
import { Icon as WarningBadge } from "../../../../res/img/element-icons/warning-badge.svg";
1313
import { _t } from "../../../languageHandler";
1414
import { getLocationShareErrorMessage, LocationShareError } from "../../../utils/location";
1515
import AccessibleButton from "../elements/AccessibleButton";
@@ -29,7 +29,7 @@ export const MapError: React.FC<MapErrorProps> = ({ error, isMinimised, classNam
2929
className={classNames("mx_MapError", className, { mx_MapError_isMinimised: isMinimised })}
3030
onClick={onClick}
3131
>
32-
<WarningBadge className="mx_MapError_icon" />
32+
<ErrorIcon className="mx_MapError_icon" />
3333
<Heading className="mx_MapError_heading" size="3">
3434
{_t("location_sharing|failed_load_map")}
3535
</Heading>

‎src/components/views/messages/MessageActionBar.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -27,11 +27,11 @@ import {
2727
OverflowHorizontalIcon,
2828
ReplyIcon,
2929
DeleteIcon,
30+
RestartIcon,
3031
} from "@vector-im/compound-design-tokens/assets/web/icons";
3132

3233
import { Icon as EditIcon } from "../../../../res/img/element-icons/room/message-bar/edit.svg";
3334
import { Icon as EmojiIcon } from "../../../../res/img/element-icons/room/message-bar/emoji.svg";
34-
import { Icon as ResendIcon } from "../../../../res/img/element-icons/retry.svg";
3535
import { Icon as ThreadIcon } from "../../../../res/img/element-icons/message/thread.svg";
3636
import { Icon as ExpandMessageIcon } from "../../../../res/img/element-icons/expand-message.svg";
3737
import { Icon as CollapseMessageIcon } from "../../../../res/img/element-icons/collapse-message.svg";
@@ -475,14 +475,14 @@ export default class MessageActionBar extends React.PureComponent<IMessageAction
475475
0,
476476
0,
477477
<RovingAccessibleButton
478-
className="mx_MessageActionBar_iconButton"
478+
className="mx_MessageActionBar_iconButton mx_MessageActionBar_retryButton"
479479
title={_t("action|retry")}
480480
onClick={this.onResendClick}
481481
onContextMenu={this.onResendClick}
482482
key="resend"
483483
placement="left"
484484
>
485-
<ResendIcon />
485+
<RestartIcon />
486486
</RovingAccessibleButton>,
487487
);
488488

0 commit comments

Comments
 (0)