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
committed by
GitHub
GitHub
parent
2c90eee2dd
commit
220e93596a
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 MiB After Width: | Height: | Size: 1.1 MiB |
@@ -70,29 +70,13 @@ Please see LICENSE files in the repository root for full details.
|
||||
color: #fff; /* on all themes */
|
||||
background-color: $accent;
|
||||
|
||||
&::before {
|
||||
svg {
|
||||
top: 20px;
|
||||
left: 60px; /* (160px-40px)/2 */
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
|
||||
content: "";
|
||||
position: absolute;
|
||||
background-color: #fff; /* on all themes */
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: contain;
|
||||
}
|
||||
|
||||
&.mx_HomePage_button_sendDm::before {
|
||||
mask-image: url("@vector-im/compound-design-tokens/icons/chat-solid.svg");
|
||||
}
|
||||
|
||||
&.mx_HomePage_button_explore::before {
|
||||
mask-image: url("@vector-im/compound-design-tokens/icons/explore.svg");
|
||||
}
|
||||
|
||||
&.mx_HomePage_button_createGroup::before {
|
||||
mask-image: url("@vector-im/compound-design-tokens/icons/group.svg");
|
||||
color: #fff; /* on all themes */
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -144,11 +144,8 @@ Please see LICENSE files in the repository root for full details.
|
||||
.mx_SpaceRoomView_landing_settingsButton {
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
svg {
|
||||
position: absolute;
|
||||
content: "";
|
||||
mask-position: center;
|
||||
mask-repeat: no-repeat;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -156,13 +153,11 @@ Please see LICENSE files in the repository root for full details.
|
||||
padding: 4px 18px 4px 40px;
|
||||
height: min-content;
|
||||
|
||||
&::before {
|
||||
svg {
|
||||
left: 8px;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
background: var(--cpd-color-icon-on-solid-primary);
|
||||
mask-size: 16px;
|
||||
mask-image: url("@vector-im/compound-design-tokens/icons/user-add.svg");
|
||||
color: var(--cpd-color-icon-on-solid-primary);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -170,14 +165,12 @@ Please see LICENSE files in the repository root for full details.
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
|
||||
&::before {
|
||||
svg {
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
background: $tertiary-content;
|
||||
mask-size: contain;
|
||||
mask-image: url("@vector-im/compound-design-tokens/icons/settings-solid.svg");
|
||||
color: $tertiary-content;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -207,35 +200,23 @@ Please see LICENSE files in the repository root for full details.
|
||||
display: inline-block;
|
||||
padding-left: 32px;
|
||||
line-height: 24px; /* to center icons */
|
||||
color: var(--cpd-color-text-primary);
|
||||
font-weight: var(--cpd-font-weight-semibold);
|
||||
text-decoration: underline;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
svg {
|
||||
position: absolute;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: $secondary-content;
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center;
|
||||
mask-size: contain;
|
||||
color: var(--cpd-color-icon-primary);
|
||||
}
|
||||
|
||||
& + .mx_AccessibleButton {
|
||||
margin-left: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_SpaceRoomView_inviteTeammates_inviteDialogButton {
|
||||
color: var(--cpd-color-text-primary);
|
||||
font-weight: var(--cpd-font-weight-semibold);
|
||||
text-decoration: underline;
|
||||
|
||||
&::before {
|
||||
mask-image: url("@vector-im/compound-design-tokens/icons/user-add.svg");
|
||||
background-color: var(--cpd-color-icon-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -38,12 +38,10 @@ Please see LICENSE files in the repository root for full details.
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.mx_DecoratedRoomAvatar_icon_globe::before {
|
||||
mask-position: center;
|
||||
mask-size: contain;
|
||||
mask-repeat: no-repeat;
|
||||
background: $secondary-content;
|
||||
mask-image: url("@vector-im/compound-design-tokens/icons/public.svg");
|
||||
.mx_DecoratedRoomAvatar_icon_globe svg {
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
color: $secondary-content;
|
||||
}
|
||||
|
||||
.mx_DecoratedRoomAvatar_icon_offline::before {
|
||||
|
||||
@@ -43,23 +43,17 @@ Please see LICENSE files in the repository root for full details.
|
||||
|
||||
.mx_PollCreateDialog_removeOption {
|
||||
margin-left: 12px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
padding: var(--cpd-space-0-5x);
|
||||
border-radius: 50%;
|
||||
background-color: $quinary-content;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
mask: url("@vector-im/compound-design-tokens/icons/close.svg");
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center;
|
||||
mask-size: 16px;
|
||||
svg {
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
position: absolute;
|
||||
background-color: $secondary-content;
|
||||
color: $secondary-content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -7,26 +7,14 @@ Please see LICENSE files in the repository root for full details.
|
||||
*/
|
||||
|
||||
.mx_DialPadBackspaceButton {
|
||||
position: relative;
|
||||
height: 28px;
|
||||
width: 28px;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
padding: var(--cpd-space-1x);
|
||||
|
||||
&::before {
|
||||
/* force this element to appear on the DOM */
|
||||
content: "";
|
||||
|
||||
background-color: #8d97a5;
|
||||
svg {
|
||||
color: #8d97a5;
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
|
||||
mask-image: url("@vector-im/compound-design-tokens/icons/backspace-solid.svg");
|
||||
mask-position: 8px;
|
||||
mask-size: 20px;
|
||||
mask-repeat: no-repeat;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -23,28 +23,19 @@ Please see LICENSE files in the repository root for full details.
|
||||
}
|
||||
|
||||
.mx_ServerPicker_help {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 10px;
|
||||
grid-column: 2;
|
||||
grid-row: 1;
|
||||
margin-left: auto;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
position: relative;
|
||||
margin-top: -2px;
|
||||
margin-right: -2px;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
left: -2px;
|
||||
mask-position: center;
|
||||
mask-size: contain;
|
||||
mask-repeat: no-repeat;
|
||||
mask-image: url("@vector-im/compound-design-tokens/icons/info.svg");
|
||||
background: $icon-button-color;
|
||||
svg {
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
color: $icon-button-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -25,23 +25,15 @@ Please see LICENSE files in the repository root for full details.
|
||||
line-height: $font-24px;
|
||||
display: inline-block;
|
||||
|
||||
&:not(.mx_AccessibleButton_kind_primary_outline)::before {
|
||||
content: "";
|
||||
svg {
|
||||
display: inline-block;
|
||||
background-color: $button-fg-color;
|
||||
mask-position: center;
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: 20px;
|
||||
color: $button-fg-color;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: 5px;
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_NewRoomIntro_inviteButton::before {
|
||||
mask-image: url("@vector-im/compound-design-tokens/icons/user-add.svg");
|
||||
}
|
||||
}
|
||||
|
||||
> h2 {
|
||||
|
||||
@@ -35,26 +35,15 @@ Please see LICENSE files in the repository root for full details.
|
||||
}
|
||||
|
||||
.mx_SpaceCreateMenu_back {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
position: relative;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
padding: var(--cpd-space-0-5x);
|
||||
background-color: $panel-actions;
|
||||
border-radius: 14px;
|
||||
margin-bottom: 12px;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
height: 28px;
|
||||
width: 28px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: $tertiary-content;
|
||||
transform: rotate(90deg);
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: 2px 3px;
|
||||
mask-size: 24px;
|
||||
mask-image: url("@vector-im/compound-design-tokens/icons/chevron-down.svg");
|
||||
svg {
|
||||
color: $tertiary-content;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -24,15 +24,3 @@ Please see LICENSE files in the repository root for full details.
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_InlineTermsAgreement_link {
|
||||
display: inline-block;
|
||||
mask-image: url("@vector-im/compound-design-tokens/icons/pop-out.svg");
|
||||
background-color: $accent;
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: contain;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
margin-left: 3px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
@@ -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>;
|
||||
},
|
||||
},
|
||||
);
|
||||
|
||||
@@ -19,7 +19,19 @@ exports[`DecoratedRoomAvatar shows an avatar with globe icon and tooltip for pub
|
||||
aria-labelledby="_r_0_"
|
||||
class="mx_DecoratedRoomAvatar_icon mx_DecoratedRoomAvatar_icon_globe"
|
||||
tabindex="0"
|
||||
/>
|
||||
>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
viewBox="0 0 24 24"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M12 22a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22m-1-2.05V18q-.825 0-1.412-.587A1.93 1.93 0 0 1 9 16v-1l-4.8-4.8q-.075.45-.138.9Q4 11.55 4 12q0 3.025 1.987 5.3T11 19.95m6.9-2.55q.5-.55.9-1.187.4-.638.662-1.326.263-.687.4-1.412Q20 12.75 20 12a7.85 7.85 0 0 0-1.363-4.475A7.7 7.7 0 0 0 15 4.6V5q0 .824-.588 1.412A1.93 1.93 0 0 1 13 7h-2v2q0 .424-.287.713A.97.97 0 0 1 10 10H8v2h6q.424 0 .713.287.287.288.287.713v3h1q.65 0 1.175.387.525.388.725 1.013"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</DocumentFragment>
|
||||
`;
|
||||
|
||||
@@ -111,7 +111,19 @@ exports[`PollCreateDialog renders a blank poll 1`] = `
|
||||
class="mx_AccessibleButton mx_PollCreateDialog_removeOption"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
/>
|
||||
>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
viewBox="0 0 24 24"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="mx_PollCreateDialog_option"
|
||||
@@ -137,7 +149,19 @@ exports[`PollCreateDialog renders a blank poll 1`] = `
|
||||
class="mx_AccessibleButton mx_PollCreateDialog_removeOption"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
/>
|
||||
>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
viewBox="0 0 24 24"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="mx_AccessibleButton mx_PollCreateDialog_addOption mx_AccessibleButton_hasKind mx_AccessibleButton_kind_secondary"
|
||||
@@ -290,7 +314,19 @@ exports[`PollCreateDialog renders a question and some options 1`] = `
|
||||
class="mx_AccessibleButton mx_PollCreateDialog_removeOption"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
/>
|
||||
>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
viewBox="0 0 24 24"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="mx_PollCreateDialog_option"
|
||||
@@ -316,7 +352,19 @@ exports[`PollCreateDialog renders a question and some options 1`] = `
|
||||
class="mx_AccessibleButton mx_PollCreateDialog_removeOption"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
/>
|
||||
>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
viewBox="0 0 24 24"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="mx_PollCreateDialog_option"
|
||||
@@ -342,7 +390,19 @@ exports[`PollCreateDialog renders a question and some options 1`] = `
|
||||
class="mx_AccessibleButton mx_PollCreateDialog_removeOption"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
/>
|
||||
>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
viewBox="0 0 24 24"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="mx_AccessibleButton mx_PollCreateDialog_addOption mx_AccessibleButton_hasKind mx_AccessibleButton_kind_secondary"
|
||||
@@ -493,7 +553,19 @@ exports[`PollCreateDialog renders info from a previous event 1`] = `
|
||||
class="mx_AccessibleButton mx_PollCreateDialog_removeOption"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
/>
|
||||
>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
viewBox="0 0 24 24"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="mx_PollCreateDialog_option"
|
||||
@@ -519,7 +591,19 @@ exports[`PollCreateDialog renders info from a previous event 1`] = `
|
||||
class="mx_AccessibleButton mx_PollCreateDialog_removeOption"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
/>
|
||||
>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
viewBox="0 0 24 24"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="mx_AccessibleButton mx_PollCreateDialog_addOption mx_AccessibleButton_hasKind mx_AccessibleButton_kind_secondary"
|
||||
|
||||
Reference in New Issue
Block a user