diff --git a/res/css/structures/_RoomView.pcss b/res/css/structures/_RoomView.pcss index b7ab171615..eab4c3252d 100644 --- a/res/css/structures/_RoomView.pcss +++ b/res/css/structures/_RoomView.pcss @@ -61,18 +61,13 @@ Please see LICENSE files in the repository root for full details. background-repeat: no-repeat; position: relative; - &::before { - background-color: $info-plinth-fg-color; - mask: url("@vector-im/compound-design-tokens/icons/search.svg"); - mask-repeat: no-repeat; - mask-position: center; - mask-size: 50px; - content: ""; + svg { + color: $info-plinth-fg-color; + width: 50px; + height: 50px; position: absolute; top: 286px; - left: 0; - right: 0; - height: 50px; + left: calc(50% - 25px); } } diff --git a/res/css/structures/_SpaceHierarchy.pcss b/res/css/structures/_SpaceHierarchy.pcss index 50f13e4d6f..7f6a429543 100644 --- a/res/css/structures/_SpaceHierarchy.pcss +++ b/res/css/structures/_SpaceHierarchy.pcss @@ -169,18 +169,6 @@ Please see LICENSE files in the repository root for full details. color: $tertiary-content; font-size: $font-12px; line-height: $font-15px; - - .mx_InfoTooltip_icon { - margin-right: 4px; - position: relative; - vertical-align: text-top; - - &::before { - position: absolute; - top: 0; - left: 0; - } - } } .mx_InfoTooltip { diff --git a/res/css/views/directory/_NetworkDropdown.pcss b/res/css/views/directory/_NetworkDropdown.pcss index dc2a12ab41..f728c05091 100644 --- a/res/css/views/directory/_NetworkDropdown.pcss +++ b/res/css/views/directory/_NetworkDropdown.pcss @@ -49,8 +49,9 @@ Please see LICENSE files in the repository root for full details. .mx_NetworkDropdown_removeServer { position: relative; display: inline-block; - width: 16px; - height: 16px; + width: 14px; + height: 14px; + padding: 1px; background: $quinary-content; border-radius: 8px; text-align: center; @@ -58,19 +59,10 @@ Please see LICENSE files in the repository root for full details. color: $secondary-content; margin-left: auto; - &::before { - background-color: $secondary-content; - content: ""; - mask-repeat: no-repeat; - mask-position: center; - mask-size: 14px; - width: inherit; + svg { + color: $secondary-content; height: inherit; - position: absolute; - left: 50%; - top: 50%; - transform: translate(-50%, -50%); - mask-image: url("@vector-im/compound-design-tokens/icons/close.svg"); + width: inherit; } } diff --git a/res/css/views/elements/_FacePile.pcss b/res/css/views/elements/_FacePile.pcss index 1e4acb75e8..de37d5ba6d 100644 --- a/res/css/views/elements/_FacePile.pcss +++ b/res/css/views/elements/_FacePile.pcss @@ -13,23 +13,12 @@ Please see LICENSE files in the repository root for full details. border-radius: 100%; width: 28px; height: 28px; + box-sizing: border-box; + padding: var(--cpd-space-1x); background-color: $panels; + color: $tertiary-content; display: inline-block; - - &::before { - content: ""; - z-index: 1; - position: absolute; - top: 0; - left: 0; - height: inherit; - width: inherit; - background: $tertiary-content; - mask-position: center; - mask-size: 20px; - mask-repeat: no-repeat; - mask-image: url("@vector-im/compound-design-tokens/icons/overflow-horizontal.svg"); - } + z-index: 1; } .mx_FacePile_summary { diff --git a/res/css/views/elements/_InfoTooltip.pcss b/res/css/views/elements/_InfoTooltip.pcss index a214f0bf83..800f50597b 100644 --- a/res/css/views/elements/_InfoTooltip.pcss +++ b/res/css/views/elements/_InfoTooltip.pcss @@ -10,24 +10,15 @@ Please see LICENSE files in the repository root for full details. width: 16px; height: 16px; display: inline-block; + + svg { + height: inherit; + width: inherit; + color: $muted-fg-color; + } } .mx_InfoTooltip_icon::before { display: inline-block; - background-color: $muted-fg-color; - mask-repeat: no-repeat; - mask-size: 16px; - width: 16px; - height: 16px; - mask-position: center; - content: ""; vertical-align: middle; } - -.mx_InfoTooltip_icon_info::before { - mask-image: url("@vector-im/compound-design-tokens/icons/info.svg"); -} - -.mx_InfoTooltip_icon_warning::before { - mask-image: url("@vector-im/compound-design-tokens/icons/error-solid.svg"); -} diff --git a/res/css/views/elements/_MiniAvatarUploader.pcss b/res/css/views/elements/_MiniAvatarUploader.pcss index 6fbe209ac9..2963d83e46 100644 --- a/res/css/views/elements/_MiniAvatarUploader.pcss +++ b/res/css/views/elements/_MiniAvatarUploader.pcss @@ -13,28 +13,22 @@ Please see LICENSE files in the repository root for full details. .mx_MiniAvatarUploader_indicator { position: absolute; - height: 26px; - width: 26px; + height: 16px; + width: 16px; + padding: 5px; right: -6px; bottom: -6px; background-color: $background; border-radius: 50%; - z-index: 1; line-height: 0; .mx_MiniAvatarUploader_cameraIcon { - height: 100%; - width: 100%; - - background-color: $secondary-content; - mask-position: center; - mask-repeat: no-repeat; - mask-image: url("@vector-im/compound-design-tokens/icons/take-photo-solid.svg"); - mask-size: 16px; - z-index: 2; + height: inherit; + width: inherit; + color: $secondary-content; } } } diff --git a/res/css/views/elements/_Validation.pcss b/res/css/views/elements/_Validation.pcss index 28ea95c0b0..f4e6766f50 100644 --- a/res/css/views/elements/_Validation.pcss +++ b/res/css/views/elements/_Validation.pcss @@ -11,7 +11,7 @@ Please see LICENSE files in the repository root for full details. } .mx_Validation_details { - padding-left: 20px; + padding-left: 0; margin: 0; } @@ -20,7 +20,6 @@ Please see LICENSE files in the repository root for full details. } .mx_Validation_detail { - position: relative; font-weight: normal; list-style: none; margin-bottom: 0.5em; @@ -29,33 +28,18 @@ Please see LICENSE files in the repository root for full details. margin-bottom: 0; } - &::before { - content: ""; - position: absolute; + svg { width: 14px; height: 14px; - top: 0; - left: -18px; - mask-repeat: no-repeat; - mask-position: center; - mask-size: contain; + margin-right: var(--cpd-space-1x); + vertical-align: text-bottom; } &.mx_Validation_valid { color: $accent; - - &::before { - mask-image: url("@vector-im/compound-design-tokens/icons/check.svg"); - background-color: $accent; - } } &.mx_Validation_invalid { color: $alert; - - &::before { - mask-image: url("@vector-im/compound-design-tokens/icons/close.svg"); - background-color: $alert; - } } } diff --git a/res/css/views/messages/_DateSeparator.pcss b/res/css/views/messages/_DateSeparator.pcss index fe13412561..50d56b085a 100644 --- a/res/css/views/messages/_DateSeparator.pcss +++ b/res/css/views/messages/_DateSeparator.pcss @@ -27,9 +27,5 @@ Please see LICENSE files in the repository root for full details. align-self: center; width: 16px; height: 16px; - mask-position: center; - mask-size: contain; - mask-repeat: no-repeat; - mask-image: url("@vector-im/compound-design-tokens/icons/chevron-down.svg"); - background-color: var(--cpd-color-icon-secondary); + color: var(--cpd-color-icon-secondary); } diff --git a/res/css/views/rooms/_OverflowTile.pcss b/res/css/views/rooms/_OverflowTile.pcss index a0ac5bb4f6..cf70c2909e 100644 --- a/res/css/views/rooms/_OverflowTile.pcss +++ b/res/css/views/rooms/_OverflowTile.pcss @@ -26,19 +26,20 @@ Please see LICENSE files in the repository root for full details. .mx_OverflowTileView:hover { padding-right: 30px; position: relative; /* to keep the chevron aligned */ + + .mx_OverflowTileView_chevron { + display: inline; + } } -.mx_OverflowTileView:hover::before { - content: ""; +.mx_OverflowTileView_chevron { position: absolute; - top: calc(50% - 8px); /* center */ - right: -8px; - mask: url("@vector-im/compound-design-tokens/icons/chevron-right.svg"); - mask-repeat: no-repeat; - mask-position: center; - width: 16px; - height: 16px; - background-color: $header-panel-text-primary-color; + top: calc(50% - 12px); /* center */ + right: 0; + width: 24px; + height: 24px; + color: $header-panel-text-primary-color; + display: none; } .mx_OverflowTileView_icon { diff --git a/res/css/views/rooms/_RoomTile.pcss b/res/css/views/rooms/_RoomTile.pcss index 23649228e6..d525f73e46 100644 --- a/res/css/views/rooms/_RoomTile.pcss +++ b/res/css/views/rooms/_RoomTile.pcss @@ -113,29 +113,32 @@ Please see LICENSE files in the repository root for full details. position: relative; display: none; - &::before { - top: 2px; - left: 2px; - content: ""; + svg { width: 16px; height: 16px; - position: absolute; - mask-position: center; - mask-size: contain; - mask-repeat: no-repeat; - background: var(--cpd-color-icon-primary); + padding: var(--cpd-space-0-5x); + color: var(--cpd-color-icon-primary); } } + .mx_RoomTile_notificationsButton::before { + top: 2px; + left: 2px; + content: ""; + width: 16px; + height: 16px; + position: absolute; + mask-position: center; + mask-size: contain; + mask-repeat: no-repeat; + background: var(--cpd-color-icon-primary); + } + /* If the room has an overriden notification setting then we always show the notifications menu button */ .mx_RoomTile_notificationsButton.mx_RoomTile_notificationsButton_show { display: block; } - .mx_RoomTile_menuButton::before { - mask-image: url("@vector-im/compound-design-tokens/icons/overflow-horizontal.svg"); - } - &:not(.mx_RoomTile_minimized, .mx_RoomTile_sticky) { &:hover, &:focus-within, diff --git a/res/css/views/rooms/_ThreadSummary.pcss b/res/css/views/rooms/_ThreadSummary.pcss index 0e30cd3fed..0d88d4f8c6 100644 --- a/res/css/views/rooms/_ThreadSummary.pcss +++ b/res/css/views/rooms/_ThreadSummary.pcss @@ -49,19 +49,14 @@ Please see LICENSE files in the repository root for full details. transform: translateX(60px); transition: all 0.1s ease-in-out; - &::before { - content: ""; + svg { position: absolute; top: 50%; right: var(--cpd-space-1x); transform: translateY(-50%); width: 24px; height: 24px; - mask-image: url("@vector-im/compound-design-tokens/icons/chevron-right.svg"); - mask-position: center; - mask-size: contain; - mask-repeat: no-repeat; - background-color: $secondary-content; + color: $secondary-content; } } diff --git a/res/css/views/rooms/_TopUnreadMessagesBar.pcss b/res/css/views/rooms/_TopUnreadMessagesBar.pcss index d80bc12916..84dc98c55e 100644 --- a/res/css/views/rooms/_TopUnreadMessagesBar.pcss +++ b/res/css/views/rooms/_TopUnreadMessagesBar.pcss @@ -29,23 +29,19 @@ Please see LICENSE files in the repository root for full details. .mx_TopUnreadMessagesBar_scrollUp { height: 38px; + width: 38px; border-radius: 19px; box-sizing: border-box; background: $background; border: 1.3px solid var(--cpd-color-icon-tertiary); cursor: pointer; -} -.mx_TopUnreadMessagesBar_scrollUp::before { - content: ""; - position: absolute; - width: 36px; - height: 36px; - mask-image: url("@vector-im/compound-design-tokens/icons/chevron-up.svg"); - mask-repeat: no-repeat; - mask-size: 24px; - mask-position: center; - background: var(--cpd-color-icon-tertiary); + svg { + width: 24px; + height: 24px; + padding: 6px; + color: var(--cpd-color-icon-tertiary); + } } .mx_TopUnreadMessagesBar_markAsRead { @@ -56,16 +52,11 @@ Please see LICENSE files in the repository root for full details. border: 1.3px solid var(--cpd-color-icon-tertiary); border-radius: 10px; margin: 5px auto; -} -.mx_TopUnreadMessagesBar_markAsRead::before { - content: ""; - position: absolute; - width: 18px; - height: 18px; - mask-image: url("@vector-im/compound-design-tokens/icons/close.svg"); - mask-repeat: no-repeat; - mask-size: 16px; - mask-position: center; - background: var(--cpd-color-icon-tertiary); + svg { + width: 16px; + height: 16px; + padding: 1px; + color: var(--cpd-color-icon-tertiary); + } } diff --git a/res/css/views/spaces/_SpaceBasicSettings.pcss b/res/css/views/spaces/_SpaceBasicSettings.pcss index 76c58e1f5c..211ac25068 100644 --- a/res/css/views/spaces/_SpaceBasicSettings.pcss +++ b/res/css/views/spaces/_SpaceBasicSettings.pcss @@ -16,36 +16,17 @@ Please see LICENSE files in the repository root for full details. margin-top: 24px; .mx_SpaceBasicSettings_avatar { - position: relative; height: 80px; width: 80px; background-color: $tertiary-content; border-radius: 16px; - } - - img.mx_SpaceBasicSettings_avatar { - width: 80px; - height: 80px; object-fit: cover; - border-radius: 16px; - } - /* only show it when the button is a div and not an img (has avatar) */ - div.mx_SpaceBasicSettings_avatar { - cursor: pointer; - - &::before { - content: ""; - position: absolute; - height: 80px; - width: 80px; - top: 0; - left: 0; - background-color: #ffffff; /* white icon fill */ - mask-repeat: no-repeat; - mask-position: center; - mask-size: 20px; - mask-image: url("@vector-im/compound-design-tokens/icons/take-photo-solid.svg"); + svg { + width: 20px; + height: 20px; + padding: 30px; + color: #ffffff; /* white icon fill */ } } diff --git a/res/css/views/toasts/_IncomingCallToast.pcss b/res/css/views/toasts/_IncomingCallToast.pcss index e5ba041f12..d13a4eb61a 100644 --- a/res/css/views/toasts/_IncomingCallToast.pcss +++ b/res/css/views/toasts/_IncomingCallToast.pcss @@ -62,17 +62,10 @@ Please see LICENSE files in the repository root for full details. height: $closeButtonSize; width: $closeButtonSize; - &::before { - content: ""; - - mask-image: url("@vector-im/compound-design-tokens/icons/close.svg"); - + svg { height: inherit; width: inherit; - background-color: $secondary-content; - mask-repeat: no-repeat; - mask-size: contain; - mask-position: center; + color: $secondary-content; } } .mx_IncomingCallToast_toggleWithLabel { diff --git a/res/css/views/voip/_CallView.pcss b/res/css/views/voip/_CallView.pcss index 1acccda595..0621042b32 100644 --- a/res/css/views/voip/_CallView.pcss +++ b/res/css/views/voip/_CallView.pcss @@ -22,168 +22,4 @@ Please see LICENSE files in the repository root for full details. border-radius: inherit; background-color: $call-background; } - - /* While the lobby is shown, the widget needs to stay loaded but hidden in the background */ - .mx_CallView_lobby ~ .mx_AppTile { - display: none; - } - - .mx_CallView_lobby { - min-height: 0; - flex-grow: 1; - padding: $spacing-12; - color: $call-primary-content; - background-color: $call-background; - - --facepile-background: $call-background; - border-radius: 8px; - - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - gap: $spacing-32; - - .mx_FacePile { - width: fit-content; - margin: $spacing-8 auto 0; - } - - .mx_CallView_preview { - position: relative; - width: 100%; - max-width: 800px; - aspect-ratio: 1.5; - background-color: $call-system; - - border-radius: 20px; - overflow: hidden; - - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - - .mx_BaseAvatar { - margin: $spacing-20; - - /* Override the explicit dimensions on the element so that this gets sized responsively */ - width: unset !important; - height: unset !important; - min-width: 0; - min-height: 0; - flex: 0 1 200px; - } - - video { - position: absolute; - top: 0; - width: 100%; - height: 100%; - object-fit: cover; - display: block; - transform: scaleX(-1); /* flip the image */ - background-color: black; - } - - .mx_CallView_controls { - position: absolute; - bottom: 0; - left: 0; - right: 0; - - background-color: $info-plinth-fg-color; - - display: flex; - justify-content: center; - gap: $spacing-24; - - .mx_CallView_deviceButtonWrapper { - position: relative; - margin: 6px 0 10px; - - .mx_CallView_deviceButton { - $size: 50px; - - width: $size; - height: $size; - - background-color: $call-system; - border-radius: calc($size / 2); - - &::before { - content: ""; - display: inline-block; - mask-repeat: no-repeat; - mask-size: 20px; - mask-position: center; - background-color: $call-primary-content; - height: 100%; - width: 100%; - } - - &.mx_CallView_deviceButton_audio::before { - mask-image: url("@vector-im/compound-design-tokens/icons/mic-on-solid.svg"); - mask-size: 14px; - } - - &.mx_CallView_deviceButton_video::before { - mask-image: url("@vector-im/compound-design-tokens/icons/video-call-solid.svg"); - } - } - - .mx_CallView_deviceListButton { - $size: 15px; - - position: absolute; - bottom: 0; - right: -2.5px; - width: $size; - height: $size; - - background-color: $call-system; - border-radius: calc($size / 2); - - &::before { - content: ""; - display: inline-block; - mask-image: url("@vector-im/compound-design-tokens/icons/chevron-down.svg"); - mask-size: 20px; - mask-position: center; - background-color: $call-primary-content; - height: 100%; - width: 100%; - } - } - - &.mx_CallView_deviceButtonWrapper_muted { - .mx_CallView_deviceButton, - .mx_CallView_deviceListButton { - background-color: $call-primary-content; - - &::before { - background-color: $call-system; - } - } - - .mx_CallView_deviceButton { - &.mx_CallView_deviceButton_audio::before { - mask-image: url("@vector-im/compound-design-tokens/icons/mic-off-solid.svg"); - mask-size: 18px; - } - - &.mx_CallView_deviceButton_video::before { - mask-image: url("@vector-im/compound-design-tokens/icons/video-call-off-solid.svg"); - } - } - } - } - } - } - - .mx_CallView_connectButton { - padding-left: 50px; - padding-right: 50px; - } - } } diff --git a/res/css/views/voip/_VideoFeed.pcss b/res/css/views/voip/_VideoFeed.pcss index 8522fbb4f0..8e753c533b 100644 --- a/res/css/views/voip/_VideoFeed.pcss +++ b/res/css/views/voip/_VideoFeed.pcss @@ -49,9 +49,7 @@ Please see LICENSE files in the repository root for full details. position: absolute; left: 6px; bottom: 6px; - display: flex; - align-items: center; - justify-content: center; + z-index: 1; width: 24px; height: 24px; @@ -59,24 +57,11 @@ Please see LICENSE files in the repository root for full details. background-color: rgb(0, 0, 0, 0.5); /* Same on both themes */ border-radius: 100%; - &::before { - position: absolute; - content: ""; - width: 17px; - height: 17px; - mask-repeat: no-repeat; - mask-size: contain; - mask-position: center; - background-color: white; /* Same on both themes */ - border-radius: 7px; - } - - &.mx_VideoFeed_mic_muted::before { - mask-image: url("@vector-im/compound-design-tokens/icons/mic-off-solid.svg"); - } - - &.mx_VideoFeed_mic_unmuted::before { - mask-image: url("@vector-im/compound-design-tokens/icons/mic-on-solid.svg"); + svg { + width: 16px; + height: 16px; + padding: 4px; + color: white; /* Same on both themes */ } } } diff --git a/src/components/structures/RoomSearchView.tsx b/src/components/structures/RoomSearchView.tsx index 56eb07121a..f19c0e0dc5 100644 --- a/src/components/structures/RoomSearchView.tsx +++ b/src/components/structures/RoomSearchView.tsx @@ -14,6 +14,7 @@ import { THREAD_RELATION_TYPE, } from "matrix-js-sdk/src/matrix"; import { logger } from "matrix-js-sdk/src/logger"; +import { SearchIcon } from "@vector-im/compound-design-tokens/assets/web/icons"; import ScrollPanel from "./ScrollPanel"; import Spinner from "../views/elements/Spinner"; @@ -153,7 +154,9 @@ export const RoomSearchView = ({
+ > + +
); } diff --git a/src/components/views/directory/NetworkDropdown.tsx b/src/components/views/directory/NetworkDropdown.tsx index 71debfff9c..e1545f7f77 100644 --- a/src/components/views/directory/NetworkDropdown.tsx +++ b/src/components/views/directory/NetworkDropdown.tsx @@ -9,6 +9,7 @@ Please see LICENSE files in the repository root for full details. import { without } from "lodash"; import React, { useCallback, useEffect, useState } from "react"; import { MatrixError } from "matrix-js-sdk/src/matrix"; +import { CloseIcon } from "@vector-im/compound-design-tokens/assets/web/icons"; import { _t } from "../../../languageHandler"; import { MatrixClientPeg } from "../../../MatrixClientPeg"; @@ -190,7 +191,9 @@ export const NetworkDropdown: React.FC = ({ protocols, config, setConfig className="mx_NetworkDropdown_removeServer" title={_t("spotlight|public_rooms|network_dropdown_remove_server_adornment", { roomServer })} onClick={() => setUserDefinedServers(without(userDefinedServers, roomServer))} - /> + > + + ), } : {}), diff --git a/src/components/views/elements/FacePile.tsx b/src/components/views/elements/FacePile.tsx index f2c04ee116..9c448dc186 100644 --- a/src/components/views/elements/FacePile.tsx +++ b/src/components/views/elements/FacePile.tsx @@ -10,6 +10,7 @@ import React, { type FC, type HTMLAttributes, type ReactNode } from "react"; import { type RoomMember } from "matrix-js-sdk/src/matrix"; import { AvatarStack, Tooltip } from "@vector-im/compound-web"; import classNames from "classnames"; +import { OverflowHorizontalIcon } from "@vector-im/compound-design-tokens/assets/web/icons"; import MemberAvatar from "../avatars/MemberAvatar"; import AccessibleButton, { type ButtonEvent } from "./AccessibleButton"; @@ -56,7 +57,7 @@ const FacePile: FC = ({ const pileContents = ( <> {faces} - {overflow ? : null} + {overflow ? : null} ); diff --git a/src/components/views/elements/InfoTooltip.tsx b/src/components/views/elements/InfoTooltip.tsx index 5600fbbbb2..8ac57354d6 100644 --- a/src/components/views/elements/InfoTooltip.tsx +++ b/src/components/views/elements/InfoTooltip.tsx @@ -10,6 +10,7 @@ Please see LICENSE files in the repository root for full details. import React, { type ReactNode } from "react"; import classNames from "classnames"; import { Tooltip } from "@vector-im/compound-web"; +import { ErrorSolidIcon, InfoIcon } from "@vector-im/compound-design-tokens/assets/web/icons"; import { _t } from "../../../languageHandler"; @@ -30,14 +31,14 @@ export default class InfoTooltip extends React.PureComponent { public render(): React.ReactNode { const { tooltip, children, className, kind } = this.props; const title = _t("info_tooltip_title"); - const iconClassName = - kind !== InfoTooltipKind.Warning ? "mx_InfoTooltip_icon_info" : "mx_InfoTooltip_icon_warning"; // Tooltip are forced on the right for a more natural feel to them on info icons return (
- + + {kind !== InfoTooltipKind.Warning ? : } + {children}
diff --git a/src/components/views/elements/MiniAvatarUploader.tsx b/src/components/views/elements/MiniAvatarUploader.tsx index 49a908d854..1df76f645d 100644 --- a/src/components/views/elements/MiniAvatarUploader.tsx +++ b/src/components/views/elements/MiniAvatarUploader.tsx @@ -9,6 +9,7 @@ Please see LICENSE files in the repository root for full details. import classNames from "classnames"; import { EventType } from "matrix-js-sdk/src/matrix"; import React, { useContext, useRef, useState, type MouseEvent, type ReactNode } from "react"; +import { TakePhotoSolidIcon } from "@vector-im/compound-design-tokens/assets/web/icons"; import MatrixClientContext from "../../../contexts/MatrixClientContext"; import { chromeFileInputFix } from "../../../utils/BrowserWorkarounds"; @@ -86,7 +87,11 @@ const MiniAvatarUploader: React.FC = ({ {children}
- {busy ? :
} + {busy ? ( + + ) : ( + + )}
diff --git a/src/components/views/elements/Validation.tsx b/src/components/views/elements/Validation.tsx index 4b2f8d9cd4..ce1a9b457a 100644 --- a/src/components/views/elements/Validation.tsx +++ b/src/components/views/elements/Validation.tsx @@ -10,6 +10,7 @@ Please see LICENSE files in the repository root for full details. import React, { type JSX, type ReactNode } from "react"; import classNames from "classnames"; import memoizeOne from "memoize-one"; +import { CheckIcon, CloseIcon } from "@vector-im/compound-design-tokens/assets/web/icons"; type Data = Pick; @@ -173,6 +174,7 @@ export default function withValidation({ }); return (
  • + {result.valid ? : } {result.text}
    • ); diff --git a/src/components/views/messages/DateSeparator.tsx b/src/components/views/messages/DateSeparator.tsx index 3b9a1bc393..7d49042533 100644 --- a/src/components/views/messages/DateSeparator.tsx +++ b/src/components/views/messages/DateSeparator.tsx @@ -11,6 +11,7 @@ import React, { type JSX } from "react"; import { Direction, ConnectionError, MatrixError, HTTPError } from "matrix-js-sdk/src/matrix"; import { logger } from "matrix-js-sdk/src/logger"; import { capitalize } from "lodash"; +import { ChevronDownIcon } from "@vector-im/compound-design-tokens/assets/web/icons"; import { _t, getUserLanguage } from "../../../languageHandler"; import { formatFullDateNoDay, formatFullDateNoTime, getDaysArray } from "../../../DateUtils"; @@ -312,7 +313,7 @@ export default class DateSeparator extends React.Component { -
    + {contextMenu} ); diff --git a/src/components/views/rooms/OverflowTileView.tsx b/src/components/views/rooms/OverflowTileView.tsx index c825406904..d082821dee 100644 --- a/src/components/views/rooms/OverflowTileView.tsx +++ b/src/components/views/rooms/OverflowTileView.tsx @@ -6,7 +6,7 @@ Please see LICENSE files in the repository root for full details. */ import React from "react"; -import Icon from "@vector-im/compound-design-tokens/assets/web/icons/overflow-horizontal"; +import { ChevronRightIcon, OverflowHorizontalIcon } from "@vector-im/compound-design-tokens/assets/web/icons"; import { _t } from "../../../languageHandler"; import AccessibleButton from "../elements/AccessibleButton"; @@ -24,9 +24,10 @@ export const OverflowTileView: React.FC = ({ remaining, onClick }) => { return (
    - +
    {_t("common|and_n_others", { count: remaining })}
    +     ); }; diff --git a/src/components/views/rooms/RoomTile.tsx b/src/components/views/rooms/RoomTile.tsx index 3eafb671cb..3e07ed5a9a 100644 --- a/src/components/views/rooms/RoomTile.tsx +++ b/src/components/views/rooms/RoomTile.tsx @@ -11,6 +11,7 @@ import React, { createRef } from "react"; import { type Room, RoomEvent } from "matrix-js-sdk/src/matrix"; import { KnownMembership } from "matrix-js-sdk/src/types"; import classNames from "classnames"; +import { OverflowHorizontalIcon } from "@vector-im/compound-design-tokens/assets/web/icons"; import type { Call } from "../../../models/Call"; import { RovingTabIndexWrapper } from "../../../accessibility/RovingTabIndex"; @@ -332,7 +333,9 @@ class RoomTile extends React.PureComponent { onClick={this.onGeneralMenuOpenClick} title={_t("room|context_menu|title")} isExpanded={!!this.state.generalMenuPosition} - /> + > + + {this.state.generalMenuPosition && ( = ({ mxEvent, thread, ...props }) => { aria-label={_t("threads|open_thread")} > - + {countSection} -
    +
    + +
    ); }; diff --git a/src/components/views/rooms/TopUnreadMessagesBar.tsx b/src/components/views/rooms/TopUnreadMessagesBar.tsx index 71960c9e25..6bd9f59869 100644 --- a/src/components/views/rooms/TopUnreadMessagesBar.tsx +++ b/src/components/views/rooms/TopUnreadMessagesBar.tsx @@ -7,6 +7,7 @@ Please see LICENSE files in the repository root for full details. */ import React from "react"; +import { ChevronUpIcon, CloseIcon } from "@vector-im/compound-design-tokens/assets/web/icons"; import { _t } from "../../../languageHandler"; import AccessibleButton, { type ButtonEvent } from "../elements/AccessibleButton"; @@ -24,12 +25,16 @@ export default class TopUnreadMessagesBar extends React.PureComponent { className="mx_TopUnreadMessagesBar_scrollUp" title={_t("room|jump_read_marker")} onClick={this.props.onScrollUpClick} - /> + > + + + > + +
    ); } diff --git a/src/components/views/spaces/SpaceBasicSettings.tsx b/src/components/views/spaces/SpaceBasicSettings.tsx index fb841e9360..f00ab96521 100644 --- a/src/components/views/spaces/SpaceBasicSettings.tsx +++ b/src/components/views/spaces/SpaceBasicSettings.tsx @@ -7,6 +7,7 @@ Please see LICENSE files in the repository root for full details. */ import React, { type ChangeEvent, useRef, useState } from "react"; +import { TakePhotoSolidIcon } from "@vector-im/compound-design-tokens/assets/web/icons"; import { _t } from "../../../languageHandler"; import AccessibleButton from "../elements/AccessibleButton"; @@ -71,7 +72,9 @@ export const SpaceAvatar: React.FC avatarUploadRef.current?.click()} - /> + > + + avatarUploadRef.current?.click()} kind="link" diff --git a/src/components/views/voip/VideoFeed.tsx b/src/components/views/voip/VideoFeed.tsx index 3db168d097..87bee5c4ad 100644 --- a/src/components/views/voip/VideoFeed.tsx +++ b/src/components/views/voip/VideoFeed.tsx @@ -13,6 +13,7 @@ import React from "react"; import { type CallFeed, CallFeedEvent } from "matrix-js-sdk/src/webrtc/callFeed"; import { logger } from "matrix-js-sdk/src/logger"; import { SDPStreamMetadataPurpose } from "matrix-js-sdk/src/webrtc/callEventTypes"; +import { MicOffSolidIcon, MicOnSolidIcon } from "@vector-im/compound-design-tokens/assets/web/icons"; import SettingsStore from "../../../settings/SettingsStore"; import LegacyCallHandler from "../../../LegacyCallHandler"; @@ -179,14 +180,14 @@ export default class VideoFeed extends React.PureComponent { mx_VideoFeed_secondary: secondary, mx_VideoFeed_voice: this.state.videoMuted, }); - const micIconClasses = classnames("mx_VideoFeed_mic", { - mx_VideoFeed_mic_muted: this.state.audioMuted, - mx_VideoFeed_mic_unmuted: !this.state.audioMuted, - }); let micIcon; if (feed.purpose !== SDPStreamMetadataPurpose.Screenshare && !pipMode) { - micIcon =
    ; + micIcon = ( +
    + {this.state.audioMuted ? : } +
    + ); } let content; diff --git a/src/toasts/IncomingCallToast.tsx b/src/toasts/IncomingCallToast.tsx index 523788e8f5..ec0dd8f3ec 100644 --- a/src/toasts/IncomingCallToast.tsx +++ b/src/toasts/IncomingCallToast.tsx @@ -10,11 +10,9 @@ import React, { type JSX, useCallback, useEffect, useRef, useState } from "react import { type Room, type MatrixEvent, type RoomMember, RoomEvent, EventType } from "matrix-js-sdk/src/matrix"; import { Button, ToggleInput, Tooltip, TooltipProvider } from "@vector-im/compound-web"; import VideoCallIcon from "@vector-im/compound-design-tokens/assets/web/icons/video-call-solid"; -import CheckIcon from "@vector-im/compound-design-tokens/assets/web/icons/check"; -import CrossIcon from "@vector-im/compound-design-tokens/assets/web/icons/close"; import { logger } from "matrix-js-sdk/src/logger"; import { type IRTCNotificationContent } from "matrix-js-sdk/src/matrixrtc"; -import { VoiceCallIcon } from "@vector-im/compound-design-tokens/assets/web/icons"; +import { CheckIcon, VoiceCallIcon, CloseIcon } from "@vector-im/compound-design-tokens/assets/web/icons"; import { AvatarWithDetails } from "@element-hq/web-shared-components"; import { _t } from "../languageHandler"; @@ -127,7 +125,7 @@ function DeclineCallButtonWithNotificationEvent({ kind="primary" destructive disabled={declining} - Icon={CrossIcon} + Icon={CloseIcon} size="sm" > {_t("action|decline")} @@ -332,7 +330,9 @@ export function IncomingCallToast({ notificationEvent }: Props): JSX.Element { className="mx_IncomingCallToast_closeButton" onClick={onCloseClick} title={_t("action|close")} - /> + > + + ); diff --git a/test/unit-tests/components/views/elements/__snapshots__/InfoTooltip-test.tsx.snap b/test/unit-tests/components/views/elements/__snapshots__/InfoTooltip-test.tsx.snap index 1ab549953b..70f58d4bd3 100644 --- a/test/unit-tests/components/views/elements/__snapshots__/InfoTooltip-test.tsx.snap +++ b/test/unit-tests/components/views/elements/__snapshots__/InfoTooltip-test.tsx.snap @@ -9,8 +9,25 @@ exports[`InfoTooltip should show tooltip on hover 1`] = ` > + class="mx_InfoTooltip_icon" + > + + + + + Trigger text
    diff --git a/test/unit-tests/components/views/messages/__snapshots__/DateSeparator-test.tsx.snap b/test/unit-tests/components/views/messages/__snapshots__/DateSeparator-test.tsx.snap index 90d5537b65..3b5f687c70 100644 --- a/test/unit-tests/components/views/messages/__snapshots__/DateSeparator-test.tsx.snap +++ b/test/unit-tests/components/views/messages/__snapshots__/DateSeparator-test.tsx.snap @@ -79,9 +79,18 @@ exports[`DateSeparator when feature_jump_to_date is enabled renders the date sep > Fri, Dec 17, 2021 -
    + fill="currentColor" + height="1em" + viewBox="0 0 24 24" + width="1em" + xmlns="http://www.w3.org/2000/svg" + > + +
    + > + + + +