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

Prefer wrapped Compound React icon assets (#122)

Browse Source 
* Prefer wrapped Compound React icon assets

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

* Add eslint rule for CDT svg imports

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

* Update snapshots

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

* Fix height

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>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski
2024-10-04 13:42:15 +01:00
committed by GitHub
parent 0a9b4aecd3
commit 7ef8663388
34 changed files with 835 additions and 158 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/structures/RoomStatusBar.tsx
View File

@@ -269,7 +269,7 @@ export default class RoomStatusBar extends React.PureComponent<IProps, IState> {
<div className="mx_RoomStatusBar">
<div role="alert">
<div className="mx_RoomStatusBar_connectionLostBar">
<WarningIcon width="24" height="24" />
<WarningIcon width="24px" height="24px" />
<div>
<div className="mx_RoomStatusBar_connectionLostBar_title">
{_t("room|status_bar|server_connectivity_lost_title")}

4
src/components/views/auth/LoginWithQRFlow.tsx
View File

@@ -12,8 +12,8 @@ import {
LegacyRendezvousFailureReason,
MSC4108FailureReason,
} from "matrix-js-sdk/src/rendezvous";
import { Icon as ChevronLeftIcon } from "@vector-im/compound-design-tokens/icons/chevron-left.svg";
import { Icon as CheckCircleSolidIcon } from "@vector-im/compound-design-tokens/icons/check-circle-solid.svg";
import ChevronLeftIcon from "@vector-im/compound-design-tokens/assets/web/icons/chevron-left";
import CheckCircleSolidIcon from "@vector-im/compound-design-tokens/assets/web/icons/check-circle-solid";
import ErrorIcon from "@vector-im/compound-design-tokens/assets/web/icons/error";
import { Heading, MFAInput, Text } from "@vector-im/compound-web";
import classNames from "classnames";

4
src/components/views/messages/MessageActionBar.tsx
View File

@@ -21,8 +21,8 @@ import {
EventType,
} from "matrix-js-sdk/src/matrix";
import classNames from "classnames";
import { Icon as PinIcon } from "@vector-im/compound-design-tokens/icons/pin.svg";
import { Icon as UnpinIcon } from "@vector-im/compound-design-tokens/icons/unpin.svg";
import PinIcon from "@vector-im/compound-design-tokens/assets/web/icons/pin";
import UnpinIcon from "@vector-im/compound-design-tokens/assets/web/icons/unpin";
import { Icon as ContextMenuIcon } from "../../../../res/img/element-icons/context-menu.svg";
import { Icon as EditIcon } from "../../../../res/img/element-icons/room/message-bar/edit.svg";

4
src/components/views/messages/PinnedMessageBadge.tsx
View File

@@ -7,7 +7,7 @@
*/
import React, { JSX } from "react";
import { Icon as PinIcon } from "@vector-im/compound-design-tokens/icons/pin-solid.svg";
import PinIcon from "@vector-im/compound-design-tokens/assets/web/icons/pin-solid";
import { _t } from "../../../languageHandler.tsx";
@@ -17,7 +17,7 @@ import { _t } from "../../../languageHandler.tsx";
export function PinnedMessageBadge(): JSX.Element {
return (
<div className="mx_PinnedMessageBadge">
<PinIcon width="16" />
<PinIcon width="16px" height="16px" />
{_t("room|pinned_message_badge")}
</div>
);

2
src/components/views/right_panel/BaseCard.tsx
View File

@@ -10,7 +10,7 @@ import React, { forwardRef, ReactNode, KeyboardEvent, Ref, MouseEvent } from "re
import classNames from "classnames";
import { IconButton, Text } from "@vector-im/compound-web";
import CloseIcon from "@vector-im/compound-design-tokens/assets/web/icons/close";
import { Icon as ChevronLeftIcon } from "@vector-im/compound-design-tokens/icons/chevron-left.svg";
import ChevronLeftIcon from "@vector-im/compound-design-tokens/assets/web/icons/chevron-left";
import AutoHideScrollbar from "../../structures/AutoHideScrollbar";
import { _t } from "../../../languageHandler";

4
src/components/views/right_panel/ExtensionsCard.tsx
View File

@@ -10,8 +10,8 @@ import React, { useEffect, useMemo, useState } from "react";
import { Room } from "matrix-js-sdk/src/matrix";
import classNames from "classnames";
import { Button, Link, Separator, Text } from "@vector-im/compound-web";
import { Icon as PlusIcon } from "@vector-im/compound-design-tokens/icons/plus.svg";
import { Icon as ExtensionsIcon } from "@vector-im/compound-design-tokens/icons/extensions.svg";
import PlusIcon from "@vector-im/compound-design-tokens/assets/web/icons/plus";
import ExtensionsIcon from "@vector-im/compound-design-tokens/assets/web/icons/extensions";
import BaseCard from "./BaseCard";
import WidgetUtils, { useWidgets } from "../../../utils/WidgetUtils";

10
src/components/views/right_panel/RoomSummaryCard.tsx
View File

@@ -21,10 +21,10 @@ import {
Form,
} from "@vector-im/compound-web";
import FavouriteIcon from "@vector-im/compound-design-tokens/assets/web/icons/favourite";
import { Icon as UserAddIcon } from "@vector-im/compound-design-tokens/icons/user-add.svg";
import UserAddIcon from "@vector-im/compound-design-tokens/assets/web/icons/user-add";
import LinkIcon from "@vector-im/compound-design-tokens/assets/web/icons/link";
import SettingsIcon from "@vector-im/compound-design-tokens/assets/web/icons/settings";
import { Icon as ExportArchiveIcon } from "@vector-im/compound-design-tokens/icons/export-archive.svg";
import ExportArchiveIcon from "@vector-im/compound-design-tokens/assets/web/icons/export-archive";
import LeaveIcon from "@vector-im/compound-design-tokens/assets/web/icons/leave";
import FilesIcon from "@vector-im/compound-design-tokens/assets/web/icons/files";
import ExtensionsIcon from "@vector-im/compound-design-tokens/assets/web/icons/extensions";
@@ -32,11 +32,11 @@ import UserProfileIcon from "@vector-im/compound-design-tokens/assets/web/icons/
import ThreadsIcon from "@vector-im/compound-design-tokens/assets/web/icons/threads";
import PollsIcon from "@vector-im/compound-design-tokens/assets/web/icons/polls";
import PinIcon from "@vector-im/compound-design-tokens/assets/web/icons/pin";
import { Icon as LockIcon } from "@vector-im/compound-design-tokens/icons/lock-solid.svg";
import { Icon as LockOffIcon } from "@vector-im/compound-design-tokens/icons/lock-off.svg";
import LockIcon from "@vector-im/compound-design-tokens/assets/web/icons/lock-solid";
import LockOffIcon from "@vector-im/compound-design-tokens/assets/web/icons/lock-off";
import PublicIcon from "@vector-im/compound-design-tokens/assets/web/icons/public";
import ErrorIcon from "@vector-im/compound-design-tokens/assets/web/icons/error";
import { Icon as ChevronDownIcon } from "@vector-im/compound-design-tokens/icons/chevron-down.svg";
import ChevronDownIcon from "@vector-im/compound-design-tokens/assets/web/icons/chevron-down";
import { EventType, JoinRule, Room, RoomStateEvent } from "matrix-js-sdk/src/matrix";
import MatrixClientContext from "../../../contexts/MatrixClientContext";

6
src/components/views/right_panel/UserInfo.tsx
View File

@@ -31,12 +31,12 @@ import ChatIcon from "@vector-im/compound-design-tokens/assets/web/icons/chat";
import CheckIcon from "@vector-im/compound-design-tokens/assets/web/icons/check";
import ShareIcon from "@vector-im/compound-design-tokens/assets/web/icons/share";
import MentionIcon from "@vector-im/compound-design-tokens/assets/web/icons/mention";
import { Icon as InviteIcon } from "@vector-im/compound-design-tokens/icons/user-add.svg";
import InviteIcon from "@vector-im/compound-design-tokens/assets/web/icons/user-add";
import BlockIcon from "@vector-im/compound-design-tokens/assets/web/icons/block";
import DeleteIcon from "@vector-im/compound-design-tokens/assets/web/icons/delete";
import CloseIcon from "@vector-im/compound-design-tokens/assets/web/icons/close";
import { Icon as ChatProblemIcon } from "@vector-im/compound-design-tokens/icons/chat-problem.svg";
import { Icon as VisibilityOffIcon } from "@vector-im/compound-design-tokens/icons/visibility-off.svg";
import ChatProblemIcon from "@vector-im/compound-design-tokens/assets/web/icons/chat-problem";
import VisibilityOffIcon from "@vector-im/compound-design-tokens/assets/web/icons/visibility-off";
import LeaveIcon from "@vector-im/compound-design-tokens/assets/web/icons/leave";
import dis from "../../../dispatcher/dispatcher";

2
src/components/views/rooms/MemberList.tsx
View File

@@ -26,7 +26,7 @@ import {
import { KnownMembership } from "matrix-js-sdk/src/types";
import { throttle } from "lodash";
import { Button, Tooltip } from "@vector-im/compound-web";
import { Icon as UserAddIcon } from "@vector-im/compound-design-tokens/icons/user-add-solid.svg";
import UserAddIcon from "@vector-im/compound-design-tokens/assets/web/icons/user-add-solid";
import { _t } from "../../../languageHandler";
import dis from "../../../dispatcher/dispatcher";

12
src/components/views/rooms/PinnedEventTile.tsx
View File

@@ -10,12 +10,12 @@ Please see LICENSE files in the repository root for full details.
import React, { JSX, useCallback, useState } from "react";
import { EventTimeline, EventType, MatrixEvent, Room } from "matrix-js-sdk/src/matrix";
import { IconButton, Menu, MenuItem, Separator, Tooltip } from "@vector-im/compound-web";
import { Icon as ViewIcon } from "@vector-im/compound-design-tokens/icons/visibility-on.svg";
import { Icon as UnpinIcon } from "@vector-im/compound-design-tokens/icons/unpin.svg";
import { Icon as ForwardIcon } from "@vector-im/compound-design-tokens/icons/forward.svg";
import { Icon as TriggerIcon } from "@vector-im/compound-design-tokens/icons/overflow-horizontal.svg";
import { Icon as DeleteIcon } from "@vector-im/compound-design-tokens/icons/delete.svg";
import { Icon as ThreadIcon } from "@vector-im/compound-design-tokens/icons/threads.svg";
import ViewIcon from "@vector-im/compound-design-tokens/assets/web/icons/visibility-on";
import UnpinIcon from "@vector-im/compound-design-tokens/assets/web/icons/unpin";
import ForwardIcon from "@vector-im/compound-design-tokens/assets/web/icons/forward";
import TriggerIcon from "@vector-im/compound-design-tokens/assets/web/icons/overflow-horizontal";
import DeleteIcon from "@vector-im/compound-design-tokens/assets/web/icons/delete";
import ThreadIcon from "@vector-im/compound-design-tokens/assets/web/icons/threads";
import classNames from "classnames";
import dis from "../../../dispatcher/dispatcher";

4
src/components/views/rooms/PinnedMessageBanner.tsx
View File

@@ -7,7 +7,7 @@
*/
import React, { JSX, useEffect, useMemo, useState } from "react";
import { Icon as PinIcon } from "@vector-im/compound-design-tokens/icons/pin-solid.svg";
import PinIcon from "@vector-im/compound-design-tokens/assets/web/icons/pin-solid";
import { Button } from "@vector-im/compound-web";
import { M_POLL_START, MatrixEvent, MsgType, Room } from "matrix-js-sdk/src/matrix";
import classNames from "classnames";
@@ -92,7 +92,7 @@ export function PinnedMessageBanner({ room, permalinkCreator }: PinnedMessageBan
>
<div className="mx_PinnedMessageBanner_content">
<Indicators count={eventCount} currentIndex={currentEventIndex} />
<PinIcon width="20" className="mx_PinnedMessageBanner_PinIcon" />
<PinIcon width="20px" height="20px" className="mx_PinnedMessageBanner_PinIcon" />
{!isSinglePinnedEvent && (
<div className="mx_PinnedMessageBanner_title" data-testid="banner-counter">
{_t(

10
src/components/views/rooms/RoomHeader.tsx
View File

@@ -8,12 +8,12 @@ Please see LICENSE files in the repository root for full details.
import React, { useCallback, useContext, useMemo, useState } from "react";
import { Body as BodyText, Button, IconButton, Menu, MenuItem, Tooltip } from "@vector-im/compound-web";
import { Icon as VideoCallIcon } from "@vector-im/compound-design-tokens/icons/video-call-solid.svg";
import { Icon as VoiceCallIcon } from "@vector-im/compound-design-tokens/icons/voice-call.svg";
import VideoCallIcon from "@vector-im/compound-design-tokens/assets/web/icons/video-call-solid";
import VoiceCallIcon from "@vector-im/compound-design-tokens/assets/web/icons/voice-call";
import CloseCallIcon from "@vector-im/compound-design-tokens/assets/web/icons/close";
import { Icon as ThreadsIcon } from "@vector-im/compound-design-tokens/icons/threads-solid.svg";
import { Icon as RoomInfoIcon } from "@vector-im/compound-design-tokens/icons/info-solid.svg";
import { Icon as NotificationsIcon } from "@vector-im/compound-design-tokens/icons/notifications-solid.svg";
import ThreadsIcon from "@vector-im/compound-design-tokens/assets/web/icons/threads-solid";
import RoomInfoIcon from "@vector-im/compound-design-tokens/assets/web/icons/info-solid";
import NotificationsIcon from "@vector-im/compound-design-tokens/assets/web/icons/notifications-solid";
import VerifiedIcon from "@vector-im/compound-design-tokens/assets/web/icons/verified";
import ErrorIcon from "@vector-im/compound-design-tokens/assets/web/icons/error";
import PublicIcon from "@vector-im/compound-design-tokens/assets/web/icons/public";

2
src/components/views/rooms/RoomHeader/VideoRoomChatButton.tsx
View File

@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
*/
import React, { useContext } from "react";
import { Icon as ChatIcon } from "@vector-im/compound-design-tokens/icons/chat-solid.svg";
import ChatIcon from "@vector-im/compound-design-tokens/assets/web/icons/chat-solid";
import { Room } from "matrix-js-sdk/src/matrix";
import { IconButton, Tooltip } from "@vector-im/compound-web";

2
src/components/views/rooms/ThreadSummary.tsx
View File

@@ -9,7 +9,7 @@ Please see LICENSE files in the repository root for full details.
import React, { useContext, useState } from "react";
import { Thread, ThreadEvent, IContent, MatrixEvent, MatrixEventEvent } from "matrix-js-sdk/src/matrix";
import { IndicatorIcon } from "@vector-im/compound-web";
import { Icon as ThreadIconSolid } from "@vector-im/compound-design-tokens/icons/threads-solid.svg";
import ThreadIconSolid from "@vector-im/compound-design-tokens/assets/web/icons/threads-solid";
import { _t } from "../../../languageHandler";
import { CardContext } from "../right_panel/context";

4
src/components/views/settings/UserProfileSettings.tsx
View File

@@ -9,8 +9,8 @@ Please see LICENSE files in the repository root for full details.
import React, { ChangeEvent, ReactNode, useCallback, useEffect, useMemo, useState } from "react";
import { logger } from "matrix-js-sdk/src/logger";
import { EditInPlace, Alert, ErrorMessage } from "@vector-im/compound-web";
import { Icon as PopOutIcon } from "@vector-im/compound-design-tokens/icons/pop-out.svg";
import { Icon as SignOutIcon } from "@vector-im/compound-design-tokens/icons/sign-out.svg";
import PopOutIcon from "@vector-im/compound-design-tokens/assets/web/icons/pop-out";
import SignOutIcon from "@vector-im/compound-design-tokens/assets/web/icons/sign-out";
import { _t } from "../../../languageHandler";
import { OwnProfileStore } from "../../../stores/OwnProfileStore";

2
src/components/views/settings/devices/LoginWithQRSection.tsx
View File

@@ -17,7 +17,7 @@ import {
MatrixClient,
DEVICE_CODE_SCOPE,
} from "matrix-js-sdk/src/matrix";
import { Icon as QrCodeIcon } from "@vector-im/compound-design-tokens/icons/qr-code.svg";
import QrCodeIcon from "@vector-im/compound-design-tokens/assets/web/icons/qr-code";
import { _t } from "../../../../languageHandler";
import AccessibleButton from "../../elements/AccessibleButton";

2
src/components/views/settings/tabs/user/SidebarUserSettingsTab.tsx
View File

@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
*/
import React, { ChangeEvent, useMemo } from "react";
import { Icon as CameraCircle } from "@vector-im/compound-design-tokens/icons/video-call-solid.svg";
import CameraCircle from "@vector-im/compound-design-tokens/assets/web/icons/video-call-solid";
import { Icon as HomeIcon } from "../../../../../../res/img/element-icons/home.svg";
import { Icon as FavoriteIcon } from "../../../../../../res/img/element-icons/roomlist/favorite.svg";

4
src/components/views/spaces/threads-activity-centre/ThreadsActivityCentreButton.tsx
View File

@@ -7,7 +7,7 @@
*/
import React, { ComponentProps, forwardRef } from "react";
import { Icon } from "@vector-im/compound-design-tokens/icons/threads-solid.svg";
import ThreadsSolidIcon from "@vector-im/compound-design-tokens/assets/web/icons/threads-solid";
import classNames from "classnames";
import { IconButton, Text, Tooltip } from "@vector-im/compound-web";
@@ -51,7 +51,7 @@ export const ThreadsActivityCentreButton = forwardRef<HTMLButtonElement, Threads
ref={ref}
>
<>
<Icon className="mx_ThreadsActivityCentreButton_Icon" />
<ThreadsSolidIcon className="mx_ThreadsActivityCentreButton_Icon" />
{/* This is dirty, but we need to add the label to the indicator icon */}
{displayLabel && (
<Text