diff --git a/res/css/_common.pcss b/res/css/_common.pcss index ec83fef901e..0c977b79f33 100644 --- a/res/css/_common.pcss +++ b/res/css/_common.pcss @@ -496,10 +496,9 @@ legend { } @define-mixin customisedCancelButton { - cursor: pointer; - position: relative; - width: 28px; - height: 28px; + width: 20px; + height: 20px; + padding: var(--cpd-space-1x); border-radius: 14px; background-color: var(--cpd-color-bg-subtle-secondary); @@ -507,18 +506,10 @@ legend { background-color: var(--cpd-color-bg-subtle-primary); } - &::before { - content: ""; - width: 28px; - height: 28px; - left: 0; - top: 0; - position: absolute; - mask-image: url("@vector-im/compound-design-tokens/icons/close.svg"); - mask-repeat: no-repeat; - mask-position: center; - mask-size: 20px; - background-color: var(--cpd-color-icon-secondary); + svg { + width: inherit; + height: inherit; + color: var(--cpd-color-icon-secondary); } } @@ -858,18 +849,16 @@ legend { line-height: $font-24px; margin-right: 0; - span { - display: flex; - align-items: center; + display: flex; + align-items: center; - &::before { - content: ""; - display: inline-block; - background-color: $button-fg-color; - mask-position: center; - mask-repeat: no-repeat; - margin-right: 8px; - } + svg { + width: 16px; + height: 16px; + display: inline-block; + color: $button-fg-color; + margin-right: 8px; + vertical-align: middle; } } @@ -882,15 +871,11 @@ legend { } @define-mixin ThreadSummaryIcon { - content: ""; display: inline-block; - mask-image: url("@vector-im/compound-design-tokens/icons/threads.svg"); - mask-position: center; - mask-repeat: no-repeat; - mask-size: contain; height: 18px; - min-width: 18px; - background-color: $icon-button-color !important; + width: 18px; + flex-shrink: 0; + color: $icon-button-color; } @define-mixin composerButtonHighLight { diff --git a/res/css/components/views/polls/_PollOption.pcss b/res/css/components/views/polls/_PollOption.pcss index 4fecce4752a..2691cd90cb7 100644 --- a/res/css/components/views/polls/_PollOption.pcss +++ b/res/css/components/views/polls/_PollOption.pcss @@ -59,28 +59,19 @@ Please see LICENSE files in the repository root for full details. /* override checked radio button styling to show checkmark instead */ .mx_StyledRadioButton_checked { input[type="radio"]:checked + div { - position: relative; - border-width: 2px; border-color: var(--cpd-color-icon-primary); background-color: var(--cpd-color-icon-primary); - &::before { - content: ""; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - mask-image: url("@vector-im/compound-design-tokens/icons/check.svg"); - mask-size: 12px 12px; - mask-repeat: no-repeat; - mask-position: center; - background-color: var(--cpd-color-icon-on-solid-primary); - width: 12px; - height: 12px; - } - div { - visibility: hidden; + background: none; + + svg { + color: var(--cpd-color-icon-on-solid-primary); + width: 12px; + height: 12px; + margin: -2px; + display: block; + } } } } diff --git a/res/css/structures/_TabbedView.pcss b/res/css/structures/_TabbedView.pcss index 60fe2f72115..527fb702fb1 100644 --- a/res/css/structures/_TabbedView.pcss +++ b/res/css/structures/_TabbedView.pcss @@ -37,28 +37,11 @@ Please see LICENSE files in the repository root for full details. .mx_TabbedView_tabLabel:hover, .mx_TabbedView_tabLabel_active { color: $tab-label-active-fg-color; - - .mx_TabbedView_maskedIcon::before { - background-color: var(--cpd-color-icon-primary); - } } .mx_TabbedView_tabLabel_active { background-color: var(--cpd-color-bg-subtle-secondary); } - - .mx_TabbedView_maskedIcon { - width: 20px; - height: 20px; - margin-right: var(--cpd-space-3x); - } - - .mx_TabbedView_maskedIcon::before { - mask-size: 20px; - width: 20px; - height: 20px; - transition: background-color 0.1s; - } } .mx_TabbedView_tabsOnTop { @@ -89,23 +72,6 @@ Please see LICENSE files in the repository root for full details. color: $accent; } } - - .mx_TabbedView_tabLabel_active .mx_TabbedView_maskedIcon::before { - background-color: $accent; - } - - .mx_TabbedView_maskedIcon { - width: 22px; - height: 22px; - margin-left: 0px; - margin-right: 8px; - } - - .mx_TabbedView_maskedIcon::before { - mask-size: 22px; - width: inherit; - height: inherit; - } } .mx_TabbedView_tabLabels { @@ -136,18 +102,6 @@ Please see LICENSE files in the repository root for full details. } } -.mx_TabbedView_maskedIcon { - display: inline-block; -} - -.mx_TabbedView_maskedIcon::before { - display: inline-block; - background-color: var(--cpd-color-icon-secondary); - mask-repeat: no-repeat; - mask-position: center; - content: ""; -} - .mx_TabbedView_tabLabel_text { vertical-align: middle; } @@ -173,10 +127,6 @@ Please see LICENSE files in the repository root for full details. .mx_TabbedView_tabPanel { margin-left: 72px; /* 40px sidebar + 32px padding */ } - .mx_TabbedView_maskedIcon { - margin-right: auto; - margin-left: auto; - } .mx_TabbedView_tabLabels { width: auto; } diff --git a/res/css/views/dialogs/_AnalyticsLearnMoreDialog.pcss b/res/css/views/dialogs/_AnalyticsLearnMoreDialog.pcss index ace00603437..e48800c881f 100644 --- a/res/css/views/dialogs/_AnalyticsLearnMoreDialog.pcss +++ b/res/css/views/dialogs/_AnalyticsLearnMoreDialog.pcss @@ -42,18 +42,13 @@ Please see LICENSE files in the repository root for full details. vertical-align: middle; position: relative; - &::before { - content: ""; + svg { position: absolute; width: 26px; height: 26px; left: 0; top: 0; - background-color: #0dbd8b; - mask-image: url("@vector-im/compound-design-tokens/icons/check-circle.svg"); - mask-repeat: no-repeat; - mask-position: center; - mask-size: contain; + color: #0dbd8b; } } } diff --git a/res/css/views/messages/_LegacyCallEvent.pcss b/res/css/views/messages/_LegacyCallEvent.pcss index b7a69d1f34a..16905485b6c 100644 --- a/res/css/views/messages/_LegacyCallEvent.pcss +++ b/res/css/views/messages/_LegacyCallEvent.pcss @@ -37,50 +37,6 @@ Please see LICENSE files in the repository root for full details. } } - &.mx_LegacyCallEvent_voice { - .mx_LegacyCallEvent_type_icon::before, - .mx_LegacyCallEvent_content_button_callBack span::before, - .mx_LegacyCallEvent_content_button_answer span::before { - mask-image: url("@vector-im/compound-design-tokens/icons/voice-call-solid.svg"); - } - - &.mx_LegacyCallEvent_rejected, - &.mx_LegacyCallEvent_noAnswer { - .mx_LegacyCallEvent_type_icon::before { - mask-image: url("@vector-im/compound-design-tokens/icons/end-call.svg"); - } - } - } - - &.mx_LegacyCallEvent_video { - .mx_LegacyCallEvent_type_icon::before, - .mx_LegacyCallEvent_content_button_callBack span::before, - .mx_LegacyCallEvent_content_button_answer span::before { - mask-image: url("@vector-im/compound-design-tokens/icons/video-call-solid.svg"); - } - - &.mx_LegacyCallEvent_rejected, - &.mx_LegacyCallEvent_noAnswer { - .mx_LegacyCallEvent_type_icon::before { - mask-image: url("@vector-im/compound-design-tokens/icons/video-call-declined-solid.svg"); - } - } - } - - &.mx_LegacyCallEvent_missed { - &.mx_LegacyCallEvent_voice { - .mx_LegacyCallEvent_type_icon::before { - mask-image: url("@vector-im/compound-design-tokens/icons/voice-call-missed-solid.svg"); - } - } - - &.mx_LegacyCallEvent_video { - .mx_LegacyCallEvent_type_icon::before { - mask-image: url("@vector-im/compound-design-tokens/icons/video-call-missed-solid.svg"); - } - } - } - .mx_LegacyCallEvent_info { display: flex; flex-direction: row; @@ -106,26 +62,8 @@ Please see LICENSE files in the repository root for full details. } .mx_LegacyCallEvent_type { - display: flex; - align-items: center; font-weight: 400; color: $secondary-content; - - .mx_LegacyCallEvent_type_icon { - height: 13px; - width: 13px; - margin-right: 5px; - - &::before { - content: ""; - position: absolute; - height: 13px; - width: 13px; - background-color: $secondary-content; - mask-repeat: no-repeat; - mask-size: contain; - } - } } } } @@ -145,19 +83,6 @@ Please see LICENSE files in the repository root for full details. @mixin LegacyCallButton; padding: 0 $spacing-12; font-size: inherit; - - span::before { - mask-size: 16px; - width: 16px; - height: 16px; - flex-shrink: 0; - } - } - - .mx_LegacyCallEvent_content_button_reject { - span::before { - mask-image: url("@vector-im/compound-design-tokens/icons/end-call.svg"); - } } .mx_LegacyCallEvent_content_tooltip { @@ -189,6 +114,21 @@ Please see LICENSE files in the repository root for full details. } } +.mx_LegacyCallEvent_type_icon { + height: 16px; + width: 16px; + margin-right: 6px; + display: inline-block; + vertical-align: -2px; + + svg { + position: absolute; + height: inherit; + width: inherit; + color: $tertiary-content; + } +} + .mx_EventTile[data-layout="bubble"] { .mx_EventTile_e2eIcon + .mx_LegacyCallEvent_wrapper { .mx_LegacyCallEvent { diff --git a/res/css/views/right_panel/_VerificationPanel.pcss b/res/css/views/right_panel/_VerificationPanel.pcss index 40b6de32668..37da9af79f0 100644 --- a/res/css/views/right_panel/_VerificationPanel.pcss +++ b/res/css/views/right_panel/_VerificationPanel.pcss @@ -39,14 +39,6 @@ Please see LICENSE files in the repository root for full details. } } - .mx_EncryptionPanel_cancel { - @mixin customisedCancelButton; - position: absolute; - z-index: 100; - top: 14px; - right: 14px; - } - .mx_VerificationPanel_qrCode { padding: 4px 4px 0 4px; background: white; diff --git a/res/css/views/rooms/_EventTile.pcss b/res/css/views/rooms/_EventTile.pcss index 6ec7a87fb99..cc532079b6d 100644 --- a/res/css/views/rooms/_EventTile.pcss +++ b/res/css/views/rooms/_EventTile.pcss @@ -1065,7 +1065,7 @@ $left-gutter: 64px; position: relative; font: var(--cpd-font-body-sm-regular); - &::before { + > svg { @mixin ThreadSummaryIcon; } diff --git a/res/css/views/rooms/_ThreadSummary.pcss b/res/css/views/rooms/_ThreadSummary.pcss index 0d88d4f8c62..a030918f24c 100644 --- a/res/css/views/rooms/_ThreadSummary.pcss +++ b/res/css/views/rooms/_ThreadSummary.pcss @@ -112,7 +112,7 @@ Please see LICENSE files in the repository root for full details. display: inline-block; margin-bottom: $spacing-8; - &::before { + > svg { @mixin ThreadSummaryIcon; vertical-align: middle; margin-inline-end: $spacing-8; diff --git a/res/css/views/toasts/_IncomingLegacyCallToast.pcss b/res/css/views/toasts/_IncomingLegacyCallToast.pcss index 2d0dae1888f..a1ec8867c47 100644 --- a/res/css/views/toasts/_IncomingLegacyCallToast.pcss +++ b/res/css/views/toasts/_IncomingLegacyCallToast.pcss @@ -44,36 +44,6 @@ Please see LICENSE files in the repository root for full details. display: flex; flex-direction: row; align-items: center; - - .mx_LegacyCallEvent_type_icon { - height: 16px; - width: 16px; - margin-right: 6px; - - &::before { - content: ""; - position: absolute; - height: inherit; - width: inherit; - background-color: $tertiary-content; - mask-repeat: no-repeat; - mask-size: contain; - } - } - } - - &.mx_IncomingLegacyCallToast_content_voice { - .mx_LegacyCallEvent_type .mx_LegacyCallEvent_type_icon::before, - .mx_IncomingLegacyCallToast_buttons .mx_IncomingLegacyCallToast_button_accept span::before { - mask-image: url("@vector-im/compound-design-tokens/icons/voice-call-solid.svg"); - } - } - - &.mx_IncomingLegacyCallToast_content_video { - .mx_LegacyCallEvent_type .mx_LegacyCallEvent_type_icon::before, - .mx_IncomingLegacyCallToast_buttons .mx_IncomingLegacyCallToast_button_accept span::before { - mask-image: url("@vector-im/compound-design-tokens/icons/video-call-solid.svg"); - } } .mx_IncomingLegacyCallToast_buttons { @@ -84,27 +54,10 @@ Please see LICENSE files in the repository root for full details. .mx_IncomingLegacyCallToast_button { @mixin LegacyCallButton; - padding: 0px 8px; + padding: 8px; flex-shrink: 0; flex-grow: 1; font-size: $font-15px; - - span { - padding: 8px 0; - } - - &.mx_IncomingLegacyCallToast_button_accept span::before { - mask-size: 13px; - width: 13px; - height: 13px; - } - - &.mx_IncomingLegacyCallToast_button_decline span::before { - mask-image: url("@vector-im/compound-design-tokens/icons/end-call.svg"); - mask-size: 16px; - width: 16px; - height: 16px; - } } } } diff --git a/src/components/structures/TabbedView.tsx b/src/components/structures/TabbedView.tsx index 1746c136529..efffd49025b 100644 --- a/src/components/structures/TabbedView.tsx +++ b/src/components/structures/TabbedView.tsx @@ -93,11 +93,7 @@ function TabLabel({ tab, isActive, showToolip, onClick }: ITab let tabIcon: JSX.Element | undefined; if (tab.icon) { - if (typeof tab.icon === "object") { - tabIcon = tab.icon; - } else if (typeof tab.icon === "string") { - tabIcon = ; - } + tabIcon = tab.icon; } const id = domIDForTabID(tab.id); diff --git a/src/components/structures/auth/CompleteSecurity.tsx b/src/components/structures/auth/CompleteSecurity.tsx index ed3b3d9a202..27676bb5615 100644 --- a/src/components/structures/auth/CompleteSecurity.tsx +++ b/src/components/structures/auth/CompleteSecurity.tsx @@ -8,6 +8,7 @@ Please see LICENSE files in the repository root for full details. import React from "react"; import { Glass } from "@vector-im/compound-web"; +import { CloseIcon } from "@vector-im/compound-design-tokens/assets/web/icons"; import { _t } from "../../../languageHandler"; import { Phase, SetupEncryptionStore } from "../../../stores/SetupEncryptionStore"; @@ -92,7 +93,9 @@ export default class CompleteSecurity extends React.Component { onClick={this.onSkipClick} className="mx_CompleteSecurity_skip" aria-label={_t("encryption|verification|after_new_login|skip_verification")} - /> + > + + ); } diff --git a/src/components/structures/auth/forgot-password/VerifyEmailModal.tsx b/src/components/structures/auth/forgot-password/VerifyEmailModal.tsx index 5f57146fe5a..460495e3173 100644 --- a/src/components/structures/auth/forgot-password/VerifyEmailModal.tsx +++ b/src/components/structures/auth/forgot-password/VerifyEmailModal.tsx @@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details. import React, { type ReactNode } from "react"; import { Tooltip } from "@vector-im/compound-web"; -import { RestartIcon } from "@vector-im/compound-design-tokens/assets/web/icons"; +import { CloseIcon, RestartIcon } from "@vector-im/compound-design-tokens/assets/web/icons"; import { _t } from "../../../../languageHandler"; import AccessibleButton from "../../../views/elements/AccessibleButton"; @@ -77,7 +77,9 @@ export const VerifyEmailModal: React.FC = ({ onClick={onCloseClick} className="mx_Dialog_cancelButton" aria-label={_t("dialog_close_label")} - /> + > + + ); }; diff --git a/src/components/views/context_menus/DialpadContextMenu.tsx b/src/components/views/context_menus/DialpadContextMenu.tsx index 004c86ff72d..b3cc6a21fe0 100644 --- a/src/components/views/context_menus/DialpadContextMenu.tsx +++ b/src/components/views/context_menus/DialpadContextMenu.tsx @@ -8,6 +8,7 @@ Please see LICENSE files in the repository root for full details. import React, { createRef } from "react"; import { type MatrixCall } from "matrix-js-sdk/src/webrtc/call"; +import { CloseIcon } from "@vector-im/compound-design-tokens/assets/web/icons"; import AccessibleButton, { type ButtonEvent } from "../elements/AccessibleButton"; import ContextMenu, { type IProps as IContextMenuProps } from "../../structures/ContextMenu"; @@ -65,7 +66,9 @@ export default class DialpadContextMenu extends React.Component
- + + +
= ({ {_t("analytics|pseudonymous_usage_data", { analyticsOwner })}
    -
  • {_t("analytics|bullet_1", {}, { Bold: (sub) => {sub} })}
    • -
  • {_t("analytics|bullet_2", {}, { Bold: (sub) => {sub} })}
    • -
  • {_t("analytics|disable_prompt")}
    • +
  • + + {_t("analytics|bullet_1", {}, { Bold: (sub) => {sub} })} +
    • +
  • + + {_t("analytics|bullet_2", {}, { Bold: (sub) => {sub} })} +
    • +
  • + + {_t("analytics|disable_prompt")} +
{privacyPolicyLink}
diff --git a/src/components/views/dialogs/BaseDialog.tsx b/src/components/views/dialogs/BaseDialog.tsx index 8eba4d3fc6e..4c08c805603 100644 --- a/src/components/views/dialogs/BaseDialog.tsx +++ b/src/components/views/dialogs/BaseDialog.tsx @@ -13,6 +13,7 @@ import FocusLock from "react-focus-lock"; import classNames from "classnames"; import { type MatrixClient } from "matrix-js-sdk/src/matrix"; import { I18nContext } from "@element-hq/web-shared-components"; +import { CloseIcon } from "@vector-im/compound-design-tokens/assets/web/icons"; import AccessibleButton from "../elements/AccessibleButton"; import { MatrixClientPeg } from "../../../MatrixClientPeg"; @@ -134,7 +135,9 @@ export default class BaseDialog extends React.Component { title={_t("action|close")} aria-label={_t("dialog_close_label")} placement="bottom" - /> + > + + ); } diff --git a/src/components/views/dialogs/ScrollableBaseModal.tsx b/src/components/views/dialogs/ScrollableBaseModal.tsx index a379b90d5fa..9f4ad52dd3a 100644 --- a/src/components/views/dialogs/ScrollableBaseModal.tsx +++ b/src/components/views/dialogs/ScrollableBaseModal.tsx @@ -9,6 +9,7 @@ Please see LICENSE files in the repository root for full details. import React, { type FormEvent } from "react"; import { type MatrixClient } from "matrix-js-sdk/src/matrix"; import FocusLock from "react-focus-lock"; +import { CloseIcon } from "@vector-im/compound-design-tokens/assets/web/icons"; import { MatrixClientPeg } from "../../../MatrixClientPeg"; import MatrixClientContext from "../../../contexts/MatrixClientContext"; @@ -91,7 +92,9 @@ export default abstract class ScrollableBaseModal< onClick={this.onCancel} className="mx_CompoundDialog_cancelButton" aria-label={_t("dialog_close_label")} - /> + > + +
{this.renderContent()}
diff --git a/src/components/views/elements/EditableItemList.tsx b/src/components/views/elements/EditableItemList.tsx index c5679a543b7..28d4b9dc1c2 100644 --- a/src/components/views/elements/EditableItemList.tsx +++ b/src/components/views/elements/EditableItemList.tsx @@ -7,6 +7,7 @@ Please see LICENSE files in the repository root for full details. */ import React, { type JSX, type ChangeEvent } from "react"; +import { CloseIcon } from "@vector-im/compound-design-tokens/assets/web/icons"; import { _t } from "../../../languageHandler"; import Field from "./Field"; @@ -74,12 +75,14 @@ export class EditableItem extends React.Component { return (
-
+ > + + {this.props.value}
); diff --git a/src/components/views/elements/StyledRadioButton.tsx b/src/components/views/elements/StyledRadioButton.tsx index 54bee73b4a4..e56787044fb 100644 --- a/src/components/views/elements/StyledRadioButton.tsx +++ b/src/components/views/elements/StyledRadioButton.tsx @@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com Please see LICENSE files in the repository root for full details. */ -import React, { type Ref } from "react"; +import React, { type JSX, type Ref } from "react"; import classnames from "classnames"; interface IProps extends React.InputHTMLAttributes { @@ -16,6 +16,11 @@ interface IProps extends React.InputHTMLAttributes { // If false, they'll be in a div. Putting interactive components that have labels // themselves in labels can cause strange bugs like https://github.com/vector-im/element-web/issues/18031 childrenInLabel?: boolean; + + /** + * If provided will override the default dot icon drawn for checked state + */ + icon?: JSX.Element; } export default class StyledRadioButton extends React.PureComponent { @@ -25,7 +30,7 @@ export default class StyledRadioButton extends React.PureComponent { }; public render(): React.ReactNode { - const { children, className, disabled, outlined, childrenInLabel, inputRef, ...otherProps } = this.props; + const { children, className, disabled, outlined, childrenInLabel, inputRef, icon, ...otherProps } = this.props; const _className = classnames("mx_StyledRadioButton", className, { mx_StyledRadioButton_disabled: disabled, mx_StyledRadioButton_enabled: !disabled, @@ -42,9 +47,9 @@ export default class StyledRadioButton extends React.PureComponent { disabled={disabled} {...otherProps} /> - {/* Used to render the radio button circle */}
-
+ {/* Empty div is used to render the radio button circle */} +
{icon}
); diff --git a/src/components/views/messages/LegacyCallEvent.tsx b/src/components/views/messages/LegacyCallEvent.tsx index 7996a2a8a68..2941705b0b4 100644 --- a/src/components/views/messages/LegacyCallEvent.tsx +++ b/src/components/views/messages/LegacyCallEvent.tsx @@ -6,12 +6,21 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com Please see LICENSE files in the repository root for full details. */ -import React, { type JSX, createRef } from "react"; +import React, { createRef, type JSX } from "react"; import { type MatrixEvent } from "matrix-js-sdk/src/matrix"; import { CallErrorCode, CallState } from "matrix-js-sdk/src/webrtc/call"; import classNames from "classnames"; import { Clock } from "@element-hq/web-shared-components"; -import { VolumeOffSolidIcon, VolumeOnSolidIcon } from "@vector-im/compound-design-tokens/assets/web/icons"; +import { + EndCallIcon, + VideoCallDeclinedSolidIcon, + VideoCallMissedSolidIcon, + VideoCallSolidIcon, + VoiceCallMissedSolidIcon, + VoiceCallSolidIcon, + VolumeOffSolidIcon, + VolumeOnSolidIcon, +} from "@vector-im/compound-design-tokens/assets/web/icons"; import { _t } from "../../../languageHandler"; import MemberAvatar from "../avatars/MemberAvatar"; @@ -36,6 +45,17 @@ interface IState { length: number; } +export function getCallStateIcon(isVoice: boolean, state: undefined | "missed" | "declined"): JSX.Element { + let icon = isVoice ? : ; + if (state === "missed") { + icon = isVoice ? : ; + } else if (state === "declined") { + icon = isVoice ? : ; + } + + return
{icon}
; +} + export default class LegacyCallEvent extends React.PureComponent { private wrapperElement = createRef(); private resizeObserver?: ResizeObserver; @@ -90,11 +110,12 @@ export default class LegacyCallEvent extends React.PureComponent private renderCallBackButton(text: string): JSX.Element { return ( - {text} + {this.props.callEventGrouper.isVoice ? : } + {text} ); } @@ -122,18 +143,20 @@ export default class LegacyCallEvent extends React.PureComponent
{silenceIcon} - {_t("action|decline")} + + {_t("action|decline")} - {_t("action|accept")} + {this.props.callEventGrouper.isVoice ? : } + {_t("action|accept")} {this.props.timestamp}
@@ -265,15 +288,23 @@ export default class LegacyCallEvent extends React.PureComponent mx_LegacyCallEvent_voice: isVoice, mx_LegacyCallEvent_video: !isVoice, mx_LegacyCallEvent_narrow: this.state.narrow, - mx_LegacyCallEvent_missed: this.props.callEventGrouper.callWasMissed, - mx_LegacyCallEvent_noAnswer: callState === CallState.Ended && hangupReason === CallErrorCode.InviteTimeout, - mx_LegacyCallEvent_rejected: callState === CallState.Ended && this.props.callEventGrouper.gotRejected, }); + let silenceIcon; if (this.state.narrow && this.state.callState === CallState.Ringing) { silenceIcon = this.renderSilenceIcon(); } + let iconState: Parameters[1] = undefined; + if (this.props.callEventGrouper.callWasMissed) { + iconState = "missed"; + } else if ( + callState === CallState.Ended && + (hangupReason === CallErrorCode.InviteTimeout || this.props.callEventGrouper.gotRejected) + ) { + iconState = "declined"; + } + return (
@@ -283,7 +314,7 @@ export default class LegacyCallEvent extends React.PureComponent
{sender}
-
+ {getCallStateIcon(!!isVoice, iconState)} {callType}
diff --git a/src/components/views/polls/PollOption.tsx b/src/components/views/polls/PollOption.tsx index 277ebc3395d..96c21ce60c5 100644 --- a/src/components/views/polls/PollOption.tsx +++ b/src/components/views/polls/PollOption.tsx @@ -9,6 +9,7 @@ Please see LICENSE files in the repository root for full details. import React, { type ReactNode } from "react"; import classNames from "classnames"; import { type PollAnswerSubevent } from "matrix-js-sdk/src/extensible_events_v1/PollStartEvent"; +import { CheckIcon } from "@vector-im/compound-design-tokens/assets/web/icons"; import { _t } from "../../../languageHandler"; import { Icon as TrophyIcon } from "../../../../res/img/element-icons/trophy.svg"; @@ -85,6 +86,7 @@ const ActivePollOption: React.FC & { chi disabled={isEnded} aria-label={ariaLabel} onChange={() => onOptionSelected?.(answer.id)} + icon={isChecked ? : undefined} > diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx index 91b76ee6313..2546936ab5f 100644 --- a/src/components/views/rooms/EventTile.tsx +++ b/src/components/views/rooms/EventTile.tsx @@ -35,7 +35,7 @@ import { } from "matrix-js-sdk/src/crypto-api"; import { Tooltip } from "@vector-im/compound-web"; import { uniqueId } from "lodash"; -import { CircleIcon, CheckCircleIcon } from "@vector-im/compound-design-tokens/assets/web/icons"; +import { CircleIcon, CheckCircleIcon, ThreadsIcon } from "@vector-im/compound-design-tokens/assets/web/icons"; import ReplyChain from "../elements/ReplyChain"; import { _t } from "../../../languageHandler"; @@ -498,6 +498,7 @@ export class UnwrappedEventTile extends React.Component return (
+ {this.state.thread.length}
@@ -515,12 +516,18 @@ export class UnwrappedEventTile extends React.Component if (this.props.highlightLink) { return ( + {_t("timeline|thread_info_basic")} ); } - return

{_t("timeline|thread_info_basic")}

; + return ( +

+ + {_t("timeline|thread_info_basic")} +

+ ); } } diff --git a/src/components/views/voip/DialPadModal.tsx b/src/components/views/voip/DialPadModal.tsx index 538f59c3ea6..dbc707dac9d 100644 --- a/src/components/views/voip/DialPadModal.tsx +++ b/src/components/views/voip/DialPadModal.tsx @@ -7,6 +7,7 @@ Please see LICENSE files in the repository root for full details. */ import React, { type ChangeEvent, createRef, type SyntheticEvent } from "react"; +import { CloseIcon } from "@vector-im/compound-design-tokens/assets/web/icons"; import AccessibleButton, { type ButtonEvent } from "../elements/AccessibleButton"; import Field from "../elements/Field"; @@ -106,7 +107,9 @@ export default class DialpadModal extends React.PureComponent { return (
- + + +
{dialPadField} diff --git a/src/toasts/IncomingLegacyCallToast.tsx b/src/toasts/IncomingLegacyCallToast.tsx index 4f976ced9fb..bbcf241587c 100644 --- a/src/toasts/IncomingLegacyCallToast.tsx +++ b/src/toasts/IncomingLegacyCallToast.tsx @@ -11,14 +11,20 @@ Please see LICENSE files in the repository root for full details. import React from "react"; import { CallType, type MatrixCall } from "matrix-js-sdk/src/webrtc/call"; -import classNames from "classnames"; -import { VolumeOffSolidIcon, VolumeOnSolidIcon } from "@vector-im/compound-design-tokens/assets/web/icons"; +import { + EndCallIcon, + VideoCallSolidIcon, + VoiceCallSolidIcon, + VolumeOffSolidIcon, + VolumeOnSolidIcon, +} from "@vector-im/compound-design-tokens/assets/web/icons"; import LegacyCallHandler, { LegacyCallHandlerEvent } from "../LegacyCallHandler"; import { MatrixClientPeg } from "../MatrixClientPeg"; import { _t } from "../languageHandler"; import RoomAvatar from "../components/views/avatars/RoomAvatar"; import AccessibleButton, { type ButtonEvent } from "../components/views/elements/AccessibleButton"; +import { getCallStateIcon } from "../components/views/messages/LegacyCallEvent.tsx"; export const getIncomingLegacyCallToastKey = (callId: string): string => `call_${callId}`; @@ -95,34 +101,31 @@ export default class IncomingLegacyCallToast extends React.Component -
+
{room ? room.name : _t("voip|unknown_caller")}
-
+ {getCallStateIcon(isVoice, undefined)} {isVoice ? _t("voip|voice_call") : _t("voip|video_call")}
- {_t("action|decline")} + + {_t("action|decline")} - {_t("action|accept")} + {isVoice ? : } + {_t("action|accept")}
diff --git a/test/unit-tests/async-components/dialogs/security/__snapshots__/NewRecoveryMethodDialog-test.tsx.snap b/test/unit-tests/async-components/dialogs/security/__snapshots__/NewRecoveryMethodDialog-test.tsx.snap index 2221bd135cc..5e98003daec 100644 --- a/test/unit-tests/async-components/dialogs/security/__snapshots__/NewRecoveryMethodDialog-test.tsx.snap +++ b/test/unit-tests/async-components/dialogs/security/__snapshots__/NewRecoveryMethodDialog-test.tsx.snap @@ -73,7 +73,19 @@ exports[` when key backup is disabled 1`] = ` class="mx_AccessibleButton mx_Dialog_cancelButton" role="button" tabindex="0" - /> + > + + + +
when key backup is enabled 1`] = ` class="mx_AccessibleButton mx_Dialog_cancelButton" role="button" tabindex="0" - /> + > + + + +
with an existing session onAction() room actions leave_r class="mx_AccessibleButton mx_Dialog_cancelButton" role="button" tabindex="0" - /> + > + + + +
`; @@ -535,6 +547,18 @@ exports[` with an existing session onAction() room actions leave_r class="mx_AccessibleButton mx_Dialog_cancelButton" role="button" tabindex="0" - /> + > + + + +
`; diff --git a/test/unit-tests/components/structures/auth/__snapshots__/CompleteSecurity-test.tsx.snap b/test/unit-tests/components/structures/auth/__snapshots__/CompleteSecurity-test.tsx.snap index db02841ed41..e22247b8270 100644 --- a/test/unit-tests/components/structures/auth/__snapshots__/CompleteSecurity-test.tsx.snap +++ b/test/unit-tests/components/structures/auth/__snapshots__/CompleteSecurity-test.tsx.snap @@ -29,7 +29,19 @@ exports[`CompleteSecurity Allows verifying with another device if one is availab class="mx_AccessibleButton mx_CompleteSecurity_skip" role="button" tabindex="0" - /> + > + + + +
+ > + + + +
{ + it("should match snapshot", async () => { + const { getByText, asFragment } = render( + , + ); + + expect(getByText("Help improve Element")).toBeInTheDocument(); + expect(asFragment()).toMatchSnapshot(); + }); +}); diff --git a/test/unit-tests/components/views/dialogs/__snapshots__/AnalyticsLearnMoreDialog-test.tsx.snap b/test/unit-tests/components/views/dialogs/__snapshots__/AnalyticsLearnMoreDialog-test.tsx.snap new file mode 100644 index 00000000000..12ee8850f0f --- /dev/null +++ b/test/unit-tests/components/views/dialogs/__snapshots__/AnalyticsLearnMoreDialog-test.tsx.snap @@ -0,0 +1,142 @@ +// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing + +exports[`AnalyticsLearnMoreDialog should match snapshot 1`] = ` + +
+
should fetch github proxy url for each repo with ol class="mx_AccessibleButton mx_Dialog_cancelButton" role="button" tabindex="0" - /> + > + + + +
+ > + + + +
+ > + + + +
for a private room should create a private room 1` class="mx_AccessibleButton mx_Dialog_cancelButton" role="button" tabindex="0" - /> + > + + + +
for a private room should render not the advanced class="mx_AccessibleButton mx_Dialog_cancelButton" role="button" tabindex="0" - /> + > + + + +
for a private room when the state encryption labs class="mx_AccessibleButton mx_Dialog_cancelButton" role="button" tabindex="0" - /> + > + + + +
+ > + + + +
renders export dialog 1`] = ` class="mx_AccessibleButton mx_Dialog_cancelButton" role="button" tabindex="0" - /> + > + + + +
`; diff --git a/test/unit-tests/components/views/dialogs/__snapshots__/IntegrationsDisabledDialog-test.tsx.snap b/test/unit-tests/components/views/dialogs/__snapshots__/IntegrationsDisabledDialog-test.tsx.snap index 1d1fdbd307d..699e4f745ac 100644 --- a/test/unit-tests/components/views/dialogs/__snapshots__/IntegrationsDisabledDialog-test.tsx.snap +++ b/test/unit-tests/components/views/dialogs/__snapshots__/IntegrationsDisabledDialog-test.tsx.snap @@ -57,7 +57,19 @@ exports[` should render as expected 1`] = ` class="mx_AccessibleButton mx_Dialog_cancelButton" role="button" tabindex="0" - /> + > + + + +
+ > + + + +
+ > + + + +
+ > + + + +
should list spaces which are not par class="mx_AccessibleButton mx_Dialog_cancelButton" role="button" tabindex="0" - /> + > + + + +
should render empty state 1`] = ` class="mx_AccessibleButton mx_Dialog_cancelButton" role="button" tabindex="0" - /> + > + + + +
+ > + + + +
should match the snapshot 1`] = ` class="mx_AccessibleButton mx_Dialog_cancelButton" role="button" tabindex="0" - /> + > + + + +
should support events with 1`] = ` class="mx_AccessibleButton mx_Dialog_cancelButton" role="button" tabindex="0" - /> + > + + + +
+ > + + + +
should render dialog 1`] = ` class="mx_AccessibleButton mx_Dialog_cancelButton" role="button" tabindex="0" - /> + > + + + +
+ > + + + +
+ > + + + +
+ > + + + +
+ > + + + +
+ > + + + +
+ > + + + +
should render 1`] = ` class="mx_AccessibleButton mx_Dialog_cancelButton" role="button" tabindex="0" - /> + > + + + +
should display the dialog for the device of a class="mx_AccessibleButton mx_Dialog_cancelButton" role="button" tabindex="0" - /> + > + + + +
should display the dialog for the device of t class="mx_AccessibleButton mx_Dialog_cancelButton" role="button" tabindex="0" - /> + > + + + +
should display image preview 1`] = ` class="mx_AccessibleButton mx_Dialog_cancelButton" role="button" tabindex="0" - /> + > + + + +
+ > + + + +
+ > + + + +
+ > + + + +
+ > + + + +
+ > + + + +
+ > + + + +
+ > + + + +
+ > + + + +
+ > + + + +
should display an error when recovery key is class="mx_AccessibleButton mx_Dialog_cancelButton" role="button" tabindex="0" - /> + > + + + +
should not raise an error when recovery is v class="mx_AccessibleButton mx_Dialog_cancelButton" role="button" tabindex="0" - /> + > + + + +
should render 1`] = ` class="mx_AccessibleButton mx_Dialog_cancelButton" role="button" tabindex="0" - /> + > + + + +
should restore key backup when Recovery key class="mx_AccessibleButton mx_Dialog_cancelButton" role="button" tabindex="0" - /> + > + + + +
should restore key backup when passphrase is class="mx_AccessibleButton mx_Dialog_cancelButton" role="button" tabindex="0" - /> + > + + + +
should restore key backup when the key is ca class="mx_AccessibleButton mx_Dialog_cancelButton" role="button" tabindex="0" - /> + > + + + +
should restore key backup when the key is in class="mx_AccessibleButton mx_Dialog_cancelButton" role="button" tabindex="0" - /> + > + + + +
+ > + + + +
@@ -241,7 +253,19 @@ exports[`PollCreateDialog renders a question and some options 1`] = ` class="mx_AccessibleButton mx_CompoundDialog_cancelButton" role="button" tabindex="0" - /> + > + + + + @@ -492,7 +516,19 @@ exports[`PollCreateDialog renders info from a previous event 1`] = ` class="mx_AccessibleButton mx_CompoundDialog_cancelButton" role="button" tabindex="0" - /> + > + + + + diff --git a/test/unit-tests/components/views/messages/__snapshots__/MPollBody-test.tsx.snap b/test/unit-tests/components/views/messages/__snapshots__/MPollBody-test.tsx.snap index 1b57a0aa0fa..6d16a9fd6a3 100644 --- a/test/unit-tests/components/views/messages/__snapshots__/MPollBody-test.tsx.snap +++ b/test/unit-tests/components/views/messages/__snapshots__/MPollBody-test.tsx.snap @@ -147,7 +147,19 @@ exports[`MPollBody renders a finished poll 1`] = ` value="italian" />
-
+
+ + + +
-
+
+ + + +
-
+
+ + + +
-
+
+ + + +
-
+
+ + + +
-
+
+ + + +
-
+
+ + + +
join rule handles error when updating join class="mx_AccessibleButton mx_Dialog_cancelButton" role="button" tabindex="0" - /> + > + + + +
`; @@ -215,6 +227,18 @@ exports[` join rule warns when trying to make an encr class="mx_AccessibleButton mx_Dialog_cancelButton" role="button" tabindex="0" - /> + > + + + +
`; diff --git a/test/unit-tests/components/views/spaces/__snapshots__/AddExistingToSpaceDialog-test.tsx.snap b/test/unit-tests/components/views/spaces/__snapshots__/AddExistingToSpaceDialog-test.tsx.snap index 00190952232..df79247826f 100644 --- a/test/unit-tests/components/views/spaces/__snapshots__/AddExistingToSpaceDialog-test.tsx.snap +++ b/test/unit-tests/components/views/spaces/__snapshots__/AddExistingToSpaceDialog-test.tsx.snap @@ -130,7 +130,19 @@ exports[` looks as expected 1`] = ` class="mx_AccessibleButton mx_Dialog_cancelButton" role="button" tabindex="0" - /> + > + + + +