diff --git a/playwright/snapshots/register/register.spec.ts/terms-prompt-linux.png b/playwright/snapshots/register/register.spec.ts/terms-prompt-linux.png index 92839f2ad9..9ce739c75f 100644 Binary files a/playwright/snapshots/register/register.spec.ts/terms-prompt-linux.png and b/playwright/snapshots/register/register.spec.ts/terms-prompt-linux.png differ diff --git a/res/css/structures/_HomePage.pcss b/res/css/structures/_HomePage.pcss index 62d0d6c18b..df374df4b5 100644 --- a/res/css/structures/_HomePage.pcss +++ b/res/css/structures/_HomePage.pcss @@ -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 */ } } } diff --git a/res/css/structures/_SpaceRoomView.pcss b/res/css/structures/_SpaceRoomView.pcss index 25989fd937..07cd564c08 100644 --- a/res/css/structures/_SpaceRoomView.pcss +++ b/res/css/structures/_SpaceRoomView.pcss @@ -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); - } - } } } } diff --git a/res/css/views/avatars/_DecoratedRoomAvatar.pcss b/res/css/views/avatars/_DecoratedRoomAvatar.pcss index 6ac5d68496..c014e4bce7 100644 --- a/res/css/views/avatars/_DecoratedRoomAvatar.pcss +++ b/res/css/views/avatars/_DecoratedRoomAvatar.pcss @@ -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 { diff --git a/res/css/views/dialogs/_PollCreateDialog.pcss b/res/css/views/dialogs/_PollCreateDialog.pcss index 0689938a24..ba7d9c644d 100644 --- a/res/css/views/dialogs/_PollCreateDialog.pcss +++ b/res/css/views/dialogs/_PollCreateDialog.pcss @@ -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; } } } diff --git a/res/css/views/elements/_DialPadBackspaceButton.pcss b/res/css/views/elements/_DialPadBackspaceButton.pcss index 0dae4b67e2..6325276901 100644 --- a/res/css/views/elements/_DialPadBackspaceButton.pcss +++ b/res/css/views/elements/_DialPadBackspaceButton.pcss @@ -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; } } diff --git a/res/css/views/elements/_ServerPicker.pcss b/res/css/views/elements/_ServerPicker.pcss index 5d04482334..0244673a35 100644 --- a/res/css/views/elements/_ServerPicker.pcss +++ b/res/css/views/elements/_ServerPicker.pcss @@ -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; } } diff --git a/res/css/views/rooms/_NewRoomIntro.pcss b/res/css/views/rooms/_NewRoomIntro.pcss index 9f18e790fd..bdd6244f42 100644 --- a/res/css/views/rooms/_NewRoomIntro.pcss +++ b/res/css/views/rooms/_NewRoomIntro.pcss @@ -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 { diff --git a/res/css/views/spaces/_SpaceCreateMenu.pcss b/res/css/views/spaces/_SpaceCreateMenu.pcss index 8bc7f6e3ad..9b85b30d91 100644 --- a/res/css/views/spaces/_SpaceCreateMenu.pcss +++ b/res/css/views/spaces/_SpaceCreateMenu.pcss @@ -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; } } diff --git a/res/css/views/terms/_InlineTermsAgreement.pcss b/res/css/views/terms/_InlineTermsAgreement.pcss index 3a783cfd32..3b1184ec9d 100644 --- a/res/css/views/terms/_InlineTermsAgreement.pcss +++ b/res/css/views/terms/_InlineTermsAgreement.pcss @@ -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; -} diff --git a/src/components/structures/HomePage.tsx b/src/components/structures/HomePage.tsx index 5cbd2858c5..56444789c1 100644 --- a/src/components/structures/HomePage.tsx +++ b/src/components/structures/HomePage.tsx @@ -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 = ({ justRegistered = false }) => { {introSection}
+ {_tDom("onboarding|send_dm")} + {_tDom("onboarding|explore_rooms")} + {_tDom("onboarding|create_room")}
diff --git a/src/components/structures/SpaceRoomView.tsx b/src/components/structures/SpaceRoomView.tsx index 27c9fb66b0..bf43369d9e 100644 --- a/src/components/structures/SpaceRoomView.tsx +++ b/src/components/structures/SpaceRoomView.tsx @@ -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); }} > + {_t("action|invite")} ); @@ -254,7 +257,9 @@ const SpaceLanding: React.FC<{ space: Room }> = ({ space }) => { }} title={_t("common|settings")} placement="bottom" - /> + > + + ); } @@ -578,10 +583,8 @@ const SpaceSetupPrivateInvite: React.FC<{
- showRoomInviteDialog(space.roomId)} - > + showRoomInviteDialog(space.roomId)}> + {_t("create_space|invite_teammates_by_username")}
diff --git a/src/components/views/avatars/DecoratedRoomAvatar.tsx b/src/components/views/avatars/DecoratedRoomAvatar.tsx index 321c0501dc..5d3d504105 100644 --- a/src/components/views/avatars/DecoratedRoomAvatar.tsx +++ b/src/components/views/avatars/DecoratedRoomAvatar.tsx @@ -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 + > + {this.state.icon === Icon.Globe ? : null} + ); } diff --git a/src/components/views/elements/DialPadBackspaceButton.tsx b/src/components/views/elements/DialPadBackspaceButton.tsx index 2a3b7df5e5..322d5b71db 100644 --- a/src/components/views/elements/DialPadBackspaceButton.tsx +++ b/src/components/views/elements/DialPadBackspaceButton.tsx @@ -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 className="mx_DialPadBackspaceButton" onClick={this.props.onBackspacePress} aria-label={_t("keyboard|backspace")} - /> + > + + ); } diff --git a/src/components/views/elements/PollCreateDialog.tsx b/src/components/views/elements/PollCreateDialog.tsx index 41a3bc9dfb..f72c28f26e 100644 --- a/src/components/views/elements/PollCreateDialog.tsx +++ b/src/components/views/elements/PollCreateDialog.tsx @@ -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 this.onOptionRemove(i)} className="mx_PollCreateDialog_removeOption" disabled={this.state.busy} - /> + > + + ))} = ({ title, dialogTitle, serverConfig, onSe

{title || _t("common|homeserver")}

{!disableCustomUrls ? ( - + + + ) : null} {serverName} diff --git a/src/components/views/rooms/NewRoomIntro.tsx b/src/components/views/rooms/NewRoomIntro.tsx index 989f147697..e8dfbd5d1b 100644 --- a/src/components/views/rooms/NewRoomIntro.tsx +++ b/src/components/views/rooms/NewRoomIntro.tsx @@ -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!); }} > + {_t("invite|to_space", { spaceName: parentSpace.name })} {room.canInvite(cli.getSafeUserId()) && ( @@ -201,6 +202,7 @@ const NewRoomIntro: React.FC = () => { defaultDispatcher.dispatch({ action: "view_invite", roomId }); }} > + {_t("room|intro|room_invite")} )} @@ -216,6 +218,7 @@ const NewRoomIntro: React.FC = () => { defaultDispatcher.dispatch({ action: "view_invite", roomId }); }} > + {_t("room|invite_this_room")}
diff --git a/src/components/views/spaces/SpaceCreateMenu.tsx b/src/components/views/spaces/SpaceCreateMenu.tsx index bed090b164..8d2d619ee4 100644 --- a/src/components/views/spaces/SpaceCreateMenu.tsx +++ b/src/components/views/spaces/SpaceCreateMenu.tsx @@ -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")} - /> + > + + )}

diff --git a/src/components/views/terms/InlineTermsAgreement.tsx b/src/components/views/terms/InlineTermsAgreement.tsx index fbe8f23b37..1269e4049a 100644 --- a/src/components/views/terms/InlineTermsAgreement.tsx +++ b/src/components/views/terms/InlineTermsAgreement.tsx @@ -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 { - return ( - - {policy.name} - - - ); + return {policy.name}; }, }, ); diff --git a/test/unit-tests/components/views/avatars/__snapshots__/DecoratedRoomAvatar-test.tsx.snap b/test/unit-tests/components/views/avatars/__snapshots__/DecoratedRoomAvatar-test.tsx.snap index db3bf6264b..5c52ccf215 100644 --- a/test/unit-tests/components/views/avatars/__snapshots__/DecoratedRoomAvatar-test.tsx.snap +++ b/test/unit-tests/components/views/avatars/__snapshots__/DecoratedRoomAvatar-test.tsx.snap @@ -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" - /> + > + + + + `; diff --git a/test/unit-tests/components/views/elements/__snapshots__/PollCreateDialog-test.tsx.snap b/test/unit-tests/components/views/elements/__snapshots__/PollCreateDialog-test.tsx.snap index 93d794a179..769df7e5b5 100644 --- a/test/unit-tests/components/views/elements/__snapshots__/PollCreateDialog-test.tsx.snap +++ b/test/unit-tests/components/views/elements/__snapshots__/PollCreateDialog-test.tsx.snap @@ -111,7 +111,19 @@ exports[`PollCreateDialog renders a blank poll 1`] = ` class="mx_AccessibleButton mx_PollCreateDialog_removeOption" role="button" tabindex="0" - /> + > + + + +
+ > + + + +
+ > + + + +
+ > + + + +
+ > + + + +
+ > + + + +
+ > + + + +