Switch from svg masks to svg rendering in more places (#31652)
* Replace icons with Compound alternatives Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Remove unused icon Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Replace more icons with Compound alternatives Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Swap for outline icons in spotlight & update screenshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Switch emoji picker to use emoji for header icons Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update screenshot Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update football emoji Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Switch from svg masks to svg rendering in ExtensionsCard Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Switch from svg masks to svg rendering in BaseCard Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Switch from svg masks to svg rendering in EmojiPicker Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Switch from svg masks to svg rendering in Spotlight Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update snapshot Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update screenshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Tweak emoji and fix disabled state Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Switch from svg masks to svg rendering in HomePage Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Switch from svg masks to svg rendering in DecoratedRoomAvatar Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Switch from svg masks to svg rendering in SpaceRoomView Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Switch from svg masks to svg rendering in DialPadBackspaceButton Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Switch from svg masks to svg rendering in NewRoomIntro Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Switch from svg masks to svg rendering in SpaceCreateMenu Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Switch from svg masks to svg rendering in InlineTermsAgreement Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Switch from svg masks to svg rendering in PollCreateDialog Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Switch from svg masks to svg rendering in ServerPicker Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Revert size change Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Delint 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
@@ -8,6 +8,7 @@ Please see LICENSE files in the repository root for full details.
|
||||
|
||||
import React, { type JSX } from "react";
|
||||
import { useContext, useState } from "react";
|
||||
import { ChatSolidIcon, ExploreIcon, GroupIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
|
||||
|
||||
import AutoHideScrollbar from "./AutoHideScrollbar";
|
||||
import { getHomePageUrl } from "../../utils/pages";
|
||||
@@ -117,12 +118,15 @@ const HomePage: React.FC<IProps> = ({ justRegistered = false }) => {
|
||||
{introSection}
|
||||
<div className="mx_HomePage_default_buttons">
|
||||
<AccessibleButton onClick={onClickSendDm} className="mx_HomePage_button_sendDm">
|
||||
<ChatSolidIcon />
|
||||
{_tDom("onboarding|send_dm")}
|
||||
</AccessibleButton>
|
||||
<AccessibleButton onClick={onClickExplore} className="mx_HomePage_button_explore">
|
||||
<ExploreIcon />
|
||||
{_tDom("onboarding|explore_rooms")}
|
||||
</AccessibleButton>
|
||||
<AccessibleButton onClick={onClickNewRoom} className="mx_HomePage_button_createGroup">
|
||||
<GroupIcon />
|
||||
{_tDom("onboarding|create_room")}
|
||||
</AccessibleButton>
|
||||
</div>
|
||||
|
||||
@@ -14,6 +14,8 @@ import {
|
||||
GroupIcon,
|
||||
PlusIcon,
|
||||
RoomIcon,
|
||||
SettingsSolidIcon,
|
||||
UserAddIcon,
|
||||
UserProfileSolidIcon,
|
||||
VideoCallSolidIcon,
|
||||
} from "@vector-im/compound-design-tokens/assets/web/icons";
|
||||
@@ -231,6 +233,7 @@ const SpaceLanding: React.FC<{ space: Room }> = ({ space }) => {
|
||||
showSpaceInvite(space);
|
||||
}}
|
||||
>
|
||||
<UserAddIcon />
|
||||
{_t("action|invite")}
|
||||
</AccessibleButton>
|
||||
);
|
||||
@@ -254,7 +257,9 @@ const SpaceLanding: React.FC<{ space: Room }> = ({ space }) => {
|
||||
}}
|
||||
title={_t("common|settings")}
|
||||
placement="bottom"
|
||||
/>
|
||||
>
|
||||
<SettingsSolidIcon />
|
||||
</AccessibleButton>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -578,10 +583,8 @@ const SpaceSetupPrivateInvite: React.FC<{
|
||||
</form>
|
||||
|
||||
<div className="mx_SpaceRoomView_inviteTeammates_buttons">
|
||||
<AccessibleButton
|
||||
className="mx_SpaceRoomView_inviteTeammates_inviteDialogButton"
|
||||
onClick={() => showRoomInviteDialog(space.roomId)}
|
||||
>
|
||||
<AccessibleButton onClick={() => showRoomInviteDialog(space.roomId)}>
|
||||
<UserAddIcon />
|
||||
{_t("create_space|invite_teammates_by_username")}
|
||||
</AccessibleButton>
|
||||
</div>
|
||||
|
||||
@@ -19,6 +19,7 @@ import {
|
||||
} from "matrix-js-sdk/src/matrix";
|
||||
import { UnstableValue } from "matrix-js-sdk/src/NamespacedValue";
|
||||
import { Tooltip } from "@vector-im/compound-web";
|
||||
import { PublicIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
|
||||
|
||||
import RoomAvatar from "./RoomAvatar";
|
||||
import NotificationBadge from "../rooms/NotificationBadge";
|
||||
@@ -204,7 +205,9 @@ export default class DecoratedRoomAvatar extends React.PureComponent<IProps, ISt
|
||||
<div
|
||||
tabIndex={this.props.tooltipProps?.tabIndex ?? 0}
|
||||
className={`mx_DecoratedRoomAvatar_icon mx_DecoratedRoomAvatar_icon_${this.state.icon.toLowerCase()}`}
|
||||
/>
|
||||
>
|
||||
{this.state.icon === Icon.Globe ? <PublicIcon /> : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -7,6 +7,7 @@ Please see LICENSE files in the repository root for full details.
|
||||
*/
|
||||
|
||||
import React from "react";
|
||||
import { BackspaceSolidIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
|
||||
|
||||
import { _t } from "../../../languageHandler";
|
||||
import AccessibleButton, { type ButtonEvent } from "./AccessibleButton";
|
||||
@@ -24,7 +25,9 @@ export default class DialPadBackspaceButton extends React.PureComponent<IProps>
|
||||
className="mx_DialPadBackspaceButton"
|
||||
onClick={this.props.onBackspacePress}
|
||||
aria-label={_t("keyboard|backspace")}
|
||||
/>
|
||||
>
|
||||
<BackspaceSolidIcon />
|
||||
</AccessibleButton>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -18,6 +18,7 @@ import {
|
||||
type TimelineEvents,
|
||||
} from "matrix-js-sdk/src/matrix";
|
||||
import { PollStartEvent } from "matrix-js-sdk/src/extensible_events_v1/PollStartEvent";
|
||||
import { CloseIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
|
||||
|
||||
import ScrollableBaseModal, { type IScrollableBaseState } from "../dialogs/ScrollableBaseModal";
|
||||
import QuestionDialog from "../dialogs/QuestionDialog";
|
||||
@@ -233,7 +234,9 @@ export default class PollCreateDialog extends ScrollableBaseModal<IProps, IState
|
||||
onClick={() => this.onOptionRemove(i)}
|
||||
className="mx_PollCreateDialog_removeOption"
|
||||
disabled={this.state.busy}
|
||||
/>
|
||||
>
|
||||
<CloseIcon />
|
||||
</AccessibleButton>
|
||||
</div>
|
||||
))}
|
||||
<AccessibleButton
|
||||
|
||||
@@ -7,6 +7,7 @@ Please see LICENSE files in the repository root for full details.
|
||||
*/
|
||||
|
||||
import React from "react";
|
||||
import { InfoIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
|
||||
|
||||
import AccessibleButton from "./AccessibleButton";
|
||||
import { type ValidatedServerConfig } from "../../../utils/ValidatedServerConfig";
|
||||
@@ -86,11 +87,9 @@ const ServerPicker: React.FC<IProps> = ({ title, dialogTitle, serverConfig, onSe
|
||||
<div className="mx_ServerPicker">
|
||||
<h2>{title || _t("common|homeserver")}</h2>
|
||||
{!disableCustomUrls ? (
|
||||
<AccessibleButton
|
||||
className="mx_ServerPicker_help"
|
||||
onClick={onHelpClick}
|
||||
aria-label={_t("common|help")}
|
||||
/>
|
||||
<AccessibleButton className="mx_ServerPicker_help" onClick={onHelpClick} aria-label={_t("common|help")}>
|
||||
<InfoIcon />
|
||||
</AccessibleButton>
|
||||
) : null}
|
||||
<span className="mx_ServerPicker_server" title={typeof serverName === "string" ? serverName : undefined}>
|
||||
{serverName}
|
||||
|
||||
@@ -9,7 +9,7 @@ Please see LICENSE files in the repository root for full details.
|
||||
import React, { type JSX, useContext } from "react";
|
||||
import { EventType, type Room, type User, type MatrixClient } from "matrix-js-sdk/src/matrix";
|
||||
import { KnownMembership } from "matrix-js-sdk/src/types";
|
||||
import { ErrorSolidIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
|
||||
import { ErrorSolidIcon, UserAddIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
|
||||
|
||||
import MatrixClientContext from "../../../contexts/MatrixClientContext";
|
||||
import DMRoomMap from "../../../utils/DMRoomMap";
|
||||
@@ -191,6 +191,7 @@ const NewRoomIntro: React.FC = () => {
|
||||
showSpaceInvite(parentSpace!);
|
||||
}}
|
||||
>
|
||||
<UserAddIcon />
|
||||
{_t("invite|to_space", { spaceName: parentSpace.name })}
|
||||
</AccessibleButton>
|
||||
{room.canInvite(cli.getSafeUserId()) && (
|
||||
@@ -201,6 +202,7 @@ const NewRoomIntro: React.FC = () => {
|
||||
defaultDispatcher.dispatch({ action: "view_invite", roomId });
|
||||
}}
|
||||
>
|
||||
<UserAddIcon />
|
||||
{_t("room|intro|room_invite")}
|
||||
</AccessibleButton>
|
||||
)}
|
||||
@@ -216,6 +218,7 @@ const NewRoomIntro: React.FC = () => {
|
||||
defaultDispatcher.dispatch({ action: "view_invite", roomId });
|
||||
}}
|
||||
>
|
||||
<UserAddIcon />
|
||||
{_t("room|invite_this_room")}
|
||||
</AccessibleButton>
|
||||
</div>
|
||||
|
||||
@@ -27,7 +27,7 @@ import {
|
||||
type ICreateRoomOpts,
|
||||
} from "matrix-js-sdk/src/matrix";
|
||||
import { logger } from "matrix-js-sdk/src/logger";
|
||||
import { LockSolidIcon, PublicIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
|
||||
import { LockSolidIcon, PublicIcon, ChevronLeftIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
|
||||
|
||||
import { _t } from "../../../languageHandler";
|
||||
import ContextMenu, { ChevronFace } from "../../structures/ContextMenu";
|
||||
@@ -300,7 +300,9 @@ const SpaceCreateMenu: React.FC<{
|
||||
className="mx_SpaceCreateMenu_back"
|
||||
onClick={() => setVisibility(null)}
|
||||
title={_t("action|go_back")}
|
||||
/>
|
||||
>
|
||||
<ChevronLeftIcon />
|
||||
</AccessibleButton>
|
||||
)}
|
||||
|
||||
<h2>
|
||||
|
||||
@@ -13,6 +13,7 @@ import { objectClone } from "../../../utils/objects";
|
||||
import StyledCheckbox from "../elements/StyledCheckbox";
|
||||
import AccessibleButton from "../elements/AccessibleButton";
|
||||
import { pickBestPolicyLanguage, type ServicePolicyPair } from "../../../Terms";
|
||||
import ExternalLink from "../elements/ExternalLink.tsx";
|
||||
|
||||
interface IProps {
|
||||
policiesAndServicePairs: ServicePolicyPair[];
|
||||
@@ -84,12 +85,7 @@ export default class InlineTermsAgreement extends React.Component<IProps, IState
|
||||
{},
|
||||
{
|
||||
policyLink: () => {
|
||||
return (
|
||||
<a href={policy.url} rel="noreferrer noopener" target="_blank">
|
||||
{policy.name}
|
||||
<span className="mx_InlineTermsAgreement_link" />
|
||||
</a>
|
||||
);
|
||||
return <ExternalLink href={policy.url}>{policy.name}</ExternalLink>;
|
||||
},
|
||||
},
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user