PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Use Compound close icon in favour of mishmash of x/close icons (#108)

Browse source 
* Use Compound close icon in favour of mishmash of x/close icons

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update snapshots

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Remove stale CSS

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update snapshot

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski 2024-10-02 11:06:17 +01:00 committed by GitHub
parent c2c316831a
commit 5d9996c281
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
26 changed files with 143 additions and 225 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
res/css/components/views/beacon/_DialogSidebar.pcss
View file

@ -34,7 +34,6 @@ Please see LICENSE files in the repository root for full details.
.mx_DialogSidebar_closeButtonIcon { .mx_DialogSidebar_closeButtonIcon {
color: $tertiary-content; color: $tertiary-content;
height: 12px;
} }
} }

8
res/css/structures/_SearchBox.pcss
View file

@ -16,11 +16,13 @@ Please see LICENSE files in the repository root for full details.
.mx_SearchBox_closeButton { .mx_SearchBox_closeButton {
cursor: pointer; cursor: pointer;
background-image: url("$(res)/img/icons-close.svg"); mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
background-repeat: no-repeat; mask-repeat: no-repeat;
mask-position: center;
mask-size: 16px;
width: 16px; width: 16px;
height: 16px; height: 16px;
background-position: center;
padding: 9px; padding: 9px;
background-color: var(--cpd-color-icon-secondary);
} }
} }

2
res/css/structures/_UploadBar.pcss
View file

@ -55,5 +55,5 @@ Please see LICENSE files in the repository root for full details.
mask-repeat: no-repeat; mask-repeat: no-repeat;
mask-position: center; mask-position: center;
background-color: $muted-fg-color; background-color: $muted-fg-color;
mask-image: url("$(res)/img/icons-close.svg"); mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
} }

63
res/css/structures/_UserMenu.pcss
View file

@ -204,66 +204,3 @@ Please see LICENSE files in the repository root for full details.
mask-image: url("@vector-im/compound-design-tokens/icons/qr-code.svg"); mask-image: url("@vector-im/compound-design-tokens/icons/qr-code.svg");
} }
} }
.mx_UserMenu_CustomStatusSection {
margin: 0 12px 8px;
.mx_UserMenu_CustomStatusSection_field {
position: relative;
display: flex;
&.mx_UserMenu_CustomStatusSection_field_hasQuery {
.mx_UserMenu_CustomStatusSection_clear {
display: block;
}
}
> .mx_UserMenu_CustomStatusSection_input {
border: 1px solid $accent;
border-radius: 8px;
width: 100%;
&:focus + .mx_UserMenu_CustomStatusSection_clear {
display: block;
}
}
> .mx_UserMenu_CustomStatusSection_clear {
display: none;
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
width: 16px;
height: 16px;
margin-right: 8px;
background-color: $quinary-content;
border-radius: 50%;
&::before {
content: "";
position: absolute;
width: inherit;
height: inherit;
mask-image: url("$(res)/img/feather-customised/x.svg");
mask-position: center;
mask-size: 12px;
mask-repeat: no-repeat;
background-color: $secondary-content;
}
}
}
> p {
font-size: $font-12px;
line-height: $font-15px;
color: $secondary-content;
margin: 4px 0;
}
.mx_AccessibleButton_kind_primary_outline {
display: block;
}
}

10
res/css/views/dialogs/_PollCreateDialog.pcss
View file

@ -52,15 +52,13 @@ Please see LICENSE files in the repository root for full details.
&::before { &::before {
content: ""; content: "";
mask: url("$(res)/img/element-icons/x-8px.svg"); mask: url("@vector-im/compound-design-tokens/icons/close.svg");
mask-repeat: no-repeat; mask-repeat: no-repeat;
mask-position: center; mask-position: center;
mask-size: cover; mask-size: 16px;
width: 8px; width: inherit;
height: 8px; height: inherit;
position: absolute; position: absolute;
top: 6px;
left: 6px;
background-color: $secondary-content; background-color: $secondary-content;
} }
} }

2
res/css/views/dialogs/security/_AccessSecretStorageDialog.pcss
View file

@ -89,7 +89,7 @@ Please see LICENSE files in the repository root for full details.
color: $alert; color: $alert;
&::before { &::before {
mask-image: url("$(res)/img/feather-customised/x.svg"); mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
background-color: $alert; background-color: $alert;
} }
} }

2
res/css/views/elements/_AccessibleButton.pcss
View file

@ -72,7 +72,7 @@ Please see LICENSE files in the repository root for full details.
background-color: var(--cpd-color-bg-critical-primary); background-color: var(--cpd-color-bg-critical-primary);
&::before { &::before {
mask-image: url("$(res)/img/feather-customised/x.svg"); mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
} }
} }

4
res/css/views/elements/_ImageView.pcss
View file

@ -139,8 +139,8 @@ $button-gap: 24px;
&::before { &::before {
width: $button-size; width: $button-size;
height: $button-size; height: $button-size;
mask-image: url("$(res)/img/image-view/close.svg"); mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
mask-size: 40%; mask-size: 24px;
} }
} }

2
res/css/views/elements/_Validation.pcss
View file

@ -53,7 +53,7 @@ Please see LICENSE files in the repository root for full details.
color: $alert; color: $alert;
&::before { &::before {
mask-image: url("$(res)/img/feather-customised/x.svg"); mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
background-color: $alert; background-color: $alert;
} }
} }

3
res/img/compound/close-16px.svg
View file

@ -1,3 +0,0 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.8711 3.3741C14.2616 2.98357 14.2616 2.35041 13.8711 1.95989C13.4806 1.56936 12.8474 1.56936 12.4569 1.95989L7.92765 6.48911L3.39843 1.95989C3.00791 1.56936 2.37474 1.56936 1.98422 1.95989C1.59369 2.35041 1.59369 2.98357 1.98422 3.3741L6.51344 7.90332L1.79021 12.6266C1.39968 13.0171 1.39968 13.6502 1.79021 14.0408C2.18073 14.4313 2.8139 14.4313 3.20442 14.0408L7.92765 9.31753L12.6509 14.0408C13.0414 14.4313 13.6746 14.4313 14.0651 14.0408C14.4556 13.6502 14.4556 13.0171 14.0651 12.6266L9.34187 7.90332L13.8711 3.3741Z" fill="currentColor"/>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 661 B

3
res/img/compound/close-8px.svg
View file

@ -1,3 +0,0 @@
<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.93567 1.68754C7.13093 1.49228 7.13093 1.17569 6.93567 0.980431C6.7404 0.785169 6.42382 0.785169 6.22856 0.980431L3.96395 3.24504L1.69934 0.980431C1.50408 0.785169 1.18749 0.785169 0.992231 0.980431C0.796969 1.17569 0.796969 1.49228 0.992231 1.68754L3.25684 3.95215L0.895226 6.31377C0.699964 6.50903 0.699964 6.82561 0.895226 7.02087C1.09049 7.21613 1.40707 7.21613 1.60233 7.02087L3.96395 4.65926L6.32557 7.02087C6.52083 7.21613 6.83741 7.21613 7.03267 7.02087C7.22793 6.82561 7.22793 6.50903 7.03267 6.31376L4.67106 3.95215L6.93567 1.68754Z" fill="currentColor"/>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 676 B

4
res/img/element-icons/x-8px.svg
View file

@ -1,4 +0,0 @@
<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.999756 0.999756L8.99975 8.99975" stroke="#737D8C" stroke-width="2" stroke-linecap="round"/>
<path d="M9.00049 0.999756L1.00049 8.99975" stroke="#737D8C" stroke-width="2" stroke-linecap="round"/>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 310 B

4
res/img/feather-customised/x.svg
View file

@ -1,4 +0,0 @@
<svg fill="none" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
<path d="m18 6-12 12"/>
<path d="m6 6 12 12"/>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 244 B

96
res/img/icons-close.svg
View file

@ -1,96 +0,0 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg
xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
version="1.1"
id="Layer_1"
x="0px"
y="0px"
viewBox="-11 13 9.1202002 9.2202005"
xml:space="preserve"
sodipodi:docname="icons-close.svg"
width="9.1202002"
height="9.2202005"
inkscape:version="0.92.3 (2405546, 2018-03-11)"><metadata
id="metadata21"><rdf:RDF><cc:Work
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title>icons_create_room</dc:title></cc:Work></rdf:RDF></metadata><defs
id="defs19" /><sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1920"
inkscape:window-height="1016"
id="namedview17"
showgrid="false"
showguides="false"
inkscape:zoom="9.8333333"
inkscape:cx="-0.15658729"
inkscape:cy="-1.4622263"
inkscape:window-x="0"
inkscape:window-y="27"
inkscape:window-maximized="1"
inkscape:current-layer="icons_create_room"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0" />
<style
type="text/css"
id="style2">
.st1{fill:none;stroke-width:2;stroke-linecap:round;}
</style>
<title
id="title4">icons_create_room</title>
<desc
id="desc6">Created with sketchtool.</desc>
<g
id="_x30_3-Input"
sketch:type="MSPage"
transform="translate(-7.4898998,-7.3898998)">
<g
id="_x30_3_x5F_4-Uploading"
transform="translate(-20,-726)"
sketch:type="MSArtboardGroup">
<g
id="Room-list"
sketch:type="MSLayerGroup">
<g
id="Room-list_x2F_Footer"
transform="translate(0,708)"
sketch:type="MSShapeGroup">
<g
id="icons_create_room"
transform="translate(20,18)">
<path
id="Line"
class="st1"
d="M -2.5,28.5 4.6,21.4"
style="fill:none;stroke:#454545;stroke-width:2;stroke-linecap:round;stroke-opacity:1"
inkscape:connector-curvature="0" />
<path
id="Line_1_"
class="st1"
d="m -2.5,21.5 7.1,7.1"
style="fill:none;stroke:#454545;stroke-width:2;stroke-linecap:round;stroke-opacity:1"
inkscape:connector-curvature="0" />
</g>
</g>
</g>
</g>
</g>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 2.7 KiB

3
res/img/image-view/close.svg
View file

@ -1,3 +0,0 @@
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.4684 2.04056C11.8589 1.65003 11.8589 1.01687 11.4684 0.626342C11.0779 0.235818 10.4447 0.235818 10.0542 0.626342L6.04718 4.63333L1.81137 0.397522C1.42084 0.00699783 0.78768 0.00699781 0.397156 0.397522C0.0066314 0.788046 0.00663096 1.42121 0.397155 1.81174L4.63297 6.04755L0.62608 10.0544C0.235557 10.445 0.235556 11.0781 0.626081 11.4686C1.0166 11.8592 1.64977 11.8592 2.04029 11.4686L6.04718 7.46176L9.82525 11.2398C10.2158 11.6303 10.8489 11.6303 11.2395 11.2398C11.63 10.8493 11.63 10.2161 11.2395 9.82561L7.46139 6.04755L11.4684 2.04056Z" fill="#A9B2BC"/>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 717 B

4
src/components/views/beacon/DialogSidebar.tsx
View file

@ -8,8 +8,8 @@ Please see LICENSE files in the repository root for full details.
import React from "react"; import React from "react";
import { Beacon } from "matrix-js-sdk/src/matrix"; import { Beacon } from "matrix-js-sdk/src/matrix";
import CloseIcon from "@vector-im/compound-design-tokens/assets/web/icons/close";
import { Icon as CloseIcon } from "../../../../res/img/image-view/close.svg";
import { _t } from "../../../languageHandler"; import { _t } from "../../../languageHandler";
import AccessibleButton from "../elements/AccessibleButton"; import AccessibleButton from "../elements/AccessibleButton";
import Heading from "../typography/Heading"; import Heading from "../typography/Heading";
@ -32,7 +32,7 @@ const DialogSidebar: React.FC<Props> = ({ beacons, onBeaconClick, requestClose }
title={_t("location_sharing|close_sidebar")} title={_t("location_sharing|close_sidebar")}
data-testid="dialog-sidebar-close" data-testid="dialog-sidebar-close"
> >
<CloseIcon className="mx_DialogSidebar_closeButtonIcon" /> <CloseIcon className="mx_DialogSidebar_closeButtonIcon" height="24px" width="24px" />
</AccessibleButton> </AccessibleButton>
</div> </div>
{beacons?.length ? ( {beacons?.length ? (

2
src/components/views/beacon/RoomLiveShareWarning.tsx
View file

@ -8,6 +8,7 @@ Please see LICENSE files in the repository root for full details.
import React from "react"; import React from "react";
import { Room } from "matrix-js-sdk/src/matrix"; import { Room } from "matrix-js-sdk/src/matrix";
import CloseIcon from "@vector-im/compound-design-tokens/assets/web/icons/close";
import { _t } from "../../../languageHandler"; import { _t } from "../../../languageHandler";
import { useEventEmitterState } from "../../../hooks/useEventEmitter"; import { useEventEmitterState } from "../../../hooks/useEventEmitter";
@ -16,7 +17,6 @@ import { useOwnLiveBeacons } from "../../../utils/beacon";
import AccessibleButton, { ButtonEvent } from "../elements/AccessibleButton"; import AccessibleButton, { ButtonEvent } from "../elements/AccessibleButton";
import Spinner from "../elements/Spinner"; import Spinner from "../elements/Spinner";
import StyledLiveBeaconIcon from "./StyledLiveBeaconIcon"; import StyledLiveBeaconIcon from "./StyledLiveBeaconIcon";
import { Icon as CloseIcon } from "../../../../res/img/image-view/close.svg";
import LiveTimeRemaining from "./LiveTimeRemaining"; import LiveTimeRemaining from "./LiveTimeRemaining";
import dispatcher from "../../../dispatcher/dispatcher"; import dispatcher from "../../../dispatcher/dispatcher";
import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload"; import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";

4
src/components/views/rooms/RoomKnocksBar.tsx
View file

@ -9,9 +9,9 @@ Please see LICENSE files in the repository root for full details.
import { EventTimeline, JoinRule, MatrixError, Room, RoomStateEvent } from "matrix-js-sdk/src/matrix"; import { EventTimeline, JoinRule, MatrixError, Room, RoomStateEvent } from "matrix-js-sdk/src/matrix";
import { KnownMembership } from "matrix-js-sdk/src/types"; import { KnownMembership } from "matrix-js-sdk/src/types";
import React, { ReactElement, ReactNode, useCallback, useState, VFC } from "react"; import React, { ReactElement, ReactNode, useCallback, useState, VFC } from "react";
import CloseIcon from "@vector-im/compound-design-tokens/assets/web/icons/close";
import { Icon as CheckIcon } from "../../../../res/img/feather-customised/check.svg"; import { Icon as CheckIcon } from "../../../../res/img/feather-customised/check.svg";
import { Icon as XIcon } from "../../../../res/img/feather-customised/x.svg";
import dis from "../../../dispatcher/dispatcher"; import dis from "../../../dispatcher/dispatcher";
import { useTypedEventEmitterState } from "../../../hooks/useEventEmitter"; import { useTypedEventEmitterState } from "../../../hooks/useEventEmitter";
import { _t } from "../../../languageHandler"; import { _t } from "../../../languageHandler";
@ -92,7 +92,7 @@ export const RoomKnocksBar: VFC<{ room: Room }> = ({ room }) => {
onClick={() => handleDeny(knockMembers[0].userId)} onClick={() => handleDeny(knockMembers[0].userId)}
title={_t("action|deny")} title={_t("action|deny")}
> >
<XIcon width={18} height={18} /> <CloseIcon width={18} height={18} />
</AccessibleButton> </AccessibleButton>
<AccessibleButton <AccessibleButton
className="mx_RoomKnocksBar_action" className="mx_RoomKnocksBar_action"

4
src/components/views/settings/tabs/room/PeopleRoomSettingsTab.tsx
View file

@ -9,9 +9,9 @@ Please see LICENSE files in the repository root for full details.
import { EventTimeline, MatrixError, Room, RoomMember, RoomStateEvent } from "matrix-js-sdk/src/matrix"; import { EventTimeline, MatrixError, Room, RoomMember, RoomStateEvent } from "matrix-js-sdk/src/matrix";
import { KnownMembership } from "matrix-js-sdk/src/types"; import { KnownMembership } from "matrix-js-sdk/src/types";
import React, { useCallback, useState, VFC } from "react"; import React, { useCallback, useState, VFC } from "react";
import CloseIcon from "@vector-im/compound-design-tokens/assets/web/icons/close";
import { Icon as CheckIcon } from "../../../../../../res/img/feather-customised/check.svg"; import { Icon as CheckIcon } from "../../../../../../res/img/feather-customised/check.svg";
import { Icon as XIcon } from "../../../../../../res/img/feather-customised/x.svg";
import { formatRelativeTime } from "../../../../../DateUtils"; import { formatRelativeTime } from "../../../../../DateUtils";
import { useTypedEventEmitterState } from "../../../../../hooks/useEventEmitter"; import { useTypedEventEmitterState } from "../../../../../hooks/useEventEmitter";
import { _t } from "../../../../../languageHandler"; import { _t } from "../../../../../languageHandler";
@ -89,7 +89,7 @@ const Knock: VFC<{
onClick={() => handleDeny(roomMember.userId)} onClick={() => handleDeny(roomMember.userId)}
title={_t("action|deny")} title={_t("action|deny")}
> >
<XIcon width={18} height={18} /> <CloseIcon width={18} height={18} />
</AccessibleButton> </AccessibleButton>
<AccessibleButton <AccessibleButton
className="mx_PeopleRoomSettingsTab_action" className="mx_PeopleRoomSettingsTab_action"

4
src/voice-broadcast/components/atoms/VoiceBroadcastHeader.tsx
View file

@ -9,12 +9,12 @@ Please see LICENSE files in the repository root for full details.
import React from "react"; import React from "react";
import { Room } from "matrix-js-sdk/src/matrix"; import { Room } from "matrix-js-sdk/src/matrix";
import classNames from "classnames"; import classNames from "classnames";
import CloseIcon from "@vector-im/compound-design-tokens/assets/web/icons/close";
import { LiveBadge, VoiceBroadcastLiveness } from "../.."; import { LiveBadge, VoiceBroadcastLiveness } from "../..";
import { Icon as LiveIcon } from "../../../../res/img/compound/live-16px.svg"; import { Icon as LiveIcon } from "../../../../res/img/compound/live-16px.svg";
import { Icon as MicrophoneIcon } from "../../../../res/img/compound/mic-16px.svg"; import { Icon as MicrophoneIcon } from "../../../../res/img/compound/mic-16px.svg";
import { Icon as TimerIcon } from "../../../../res/img/compound/timer-16px.svg"; import { Icon as TimerIcon } from "../../../../res/img/compound/timer-16px.svg";
import { Icon as XIcon } from "../../../../res/img/compound/close-16px.svg";
import { _t } from "../../../languageHandler"; import { _t } from "../../../languageHandler";
import RoomAvatar from "../../../components/views/avatars/RoomAvatar"; import RoomAvatar from "../../../components/views/avatars/RoomAvatar";
import AccessibleButton, { ButtonEvent } from "../../../components/views/elements/AccessibleButton"; import AccessibleButton, { ButtonEvent } from "../../../components/views/elements/AccessibleButton";
@ -65,7 +65,7 @@ export const VoiceBroadcastHeader: React.FC<VoiceBroadcastHeaderProps> = ({
const closeButton = showClose && ( const closeButton = showClose && (
<AccessibleButton onClick={onCloseClick}> <AccessibleButton onClick={onCloseClick}>
<XIcon className="mx_Icon mx_Icon_16" /> <CloseIcon className="mx_Icon mx_Icon_16" />
</AccessibleButton> </AccessibleButton>
); );

4
src/voice-broadcast/components/molecules/VoiceBroadcastSmallPlaybackBody.tsx
View file

@ -7,6 +7,7 @@ Please see LICENSE files in the repository root for full details.
*/ */
import React from "react"; import React from "react";
import CloseIcon from "@vector-im/compound-design-tokens/assets/web/icons/close";
import { import {
VoiceBroadcastHeader, VoiceBroadcastHeader,
@ -16,7 +17,6 @@ import {
} from "../.."; } from "../..";
import AccessibleButton from "../../../components/views/elements/AccessibleButton"; import AccessibleButton from "../../../components/views/elements/AccessibleButton";
import { useVoiceBroadcastPlayback } from "../../hooks/useVoiceBroadcastPlayback"; import { useVoiceBroadcastPlayback } from "../../hooks/useVoiceBroadcastPlayback";
import { Icon as XIcon } from "../../../../res/img/compound/close-8px.svg";
interface VoiceBroadcastSmallPlaybackBodyProps { interface VoiceBroadcastSmallPlaybackBodyProps {
playback: VoiceBroadcastPlayback; playback: VoiceBroadcastPlayback;
@ -37,7 +37,7 @@ export const VoiceBroadcastSmallPlaybackBody: React.FC<VoiceBroadcastSmallPlayba
/> />
<VoiceBroadcastPlaybackControl state={playbackState} onClick={toggle} /> <VoiceBroadcastPlaybackControl state={playbackState} onClick={toggle} />
<AccessibleButton onClick={() => playback.stop()}> <AccessibleButton onClick={() => playback.stop()}>
<XIcon className="mx_Icon mx_Icon_8 mx_VoiceBroadcastBody__small-close" /> <CloseIcon className="mx_Icon mx_Icon_8 mx_VoiceBroadcastBody__small-close" />
</AccessibleButton> </AccessibleButton>
</div> </div>
); );

22
test/components/views/beacon/__snapshots__/DialogSidebar-test.tsx.snap
View file

@ -20,9 +20,18 @@ exports[`<DialogSidebar /> renders sidebar correctly with beacons 1`] = `
role="button" role="button"
tabindex="0" tabindex="0"
> >
<div <svg
class="mx_DialogSidebar_closeButtonIcon" class="mx_DialogSidebar_closeButtonIcon"
fill="currentColor"
height="24px"
viewBox="0 0 24 24"
width="24px"
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.414Z"
/> />
</svg>
</div> </div>
</div> </div>
<ol <ol
@ -118,9 +127,18 @@ exports[`<DialogSidebar /> renders sidebar correctly without beacons 1`] = `
role="button" role="button"
tabindex="0" tabindex="0"
> >
<div <svg
class="mx_DialogSidebar_closeButtonIcon" class="mx_DialogSidebar_closeButtonIcon"
fill="currentColor"
height="24px"
viewBox="0 0 24 24"
width="24px"
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.414Z"
/> />
</svg>
</div> </div>
</div> </div>
<div <div

11
test/components/views/beacon/__snapshots__/RoomLiveShareWarning-test.tsx.snap
View file

@ -115,9 +115,18 @@ exports[`<RoomLiveShareWarning /> when user has live beacons and geolocation is
role="button" role="button"
tabindex="0" tabindex="0"
> >
<div <svg
class="mx_RoomLiveShareWarning_closeButtonIcon" class="mx_RoomLiveShareWarning_closeButtonIcon"
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.414Z"
/> />
</svg>
</button> </button>
</div> </div>
</DocumentFragment> </DocumentFragment>

18
test/components/views/settings/tabs/room/__snapshots__/PeopleRoomSettingsTab-test.tsx.snap
View file

@ -72,10 +72,17 @@ exports[`PeopleRoomSettingsTab with requests to join renders requests fully 1`]
role="button" role="button"
tabindex="0" tabindex="0"
> >
<div <svg
fill="currentColor"
height="18" height="18"
viewBox="0 0 24 24"
width="18" width="18"
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.414Z"
/> />
</svg>
</div> </div>
<div <div
aria-label="Approve" aria-label="Approve"
@ -139,10 +146,17 @@ exports[`PeopleRoomSettingsTab with requests to join renders requests reduced 1`
role="button" role="button"
tabindex="0" tabindex="0"
> >
<div <svg
fill="currentColor"
height="18" height="18"
viewBox="0 0 24 24"
width="18" width="18"
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.414Z"
/> />
</svg>
</div> </div>
<div <div
aria-label="Approve" aria-label="Approve"

11
test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastPreRecordingPip-test.tsx.snap
View file

@ -57,9 +57,18 @@ exports[`VoiceBroadcastPreRecordingPip when rendered should match the snapshot 1
role="button" role="button"
tabindex="0" tabindex="0"
> >
<div <svg
class="mx_Icon mx_Icon_16" class="mx_Icon mx_Icon_16"
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.414Z"
/> />
</svg>
</div> </div>
</div> </div>
<div <div

55
test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastSmallPlaybackBody-test.tsx.snap
View file

@ -68,9 +68,18 @@ exports[`<VoiceBroadcastSmallPlaybackBody /> when rendering a { state: 'pause',
role="button" role="button"
tabindex="0" tabindex="0"
> >
<div <svg
class="mx_Icon mx_Icon_8 mx_VoiceBroadcastBody__small-close" class="mx_Icon mx_Icon_8 mx_VoiceBroadcastBody__small-close"
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.414Z"
/> />
</svg>
</div> </div>
</div> </div>
</div> </div>
@ -152,9 +161,18 @@ exports[`<VoiceBroadcastSmallPlaybackBody /> when rendering a { state: 'playing'
role="button" role="button"
tabindex="0" tabindex="0"
> >
<div <svg
class="mx_Icon mx_Icon_8 mx_VoiceBroadcastBody__small-close" class="mx_Icon mx_Icon_8 mx_VoiceBroadcastBody__small-close"
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.414Z"
/> />
</svg>
</div> </div>
</div> </div>
</div> </div>
@ -247,9 +265,18 @@ exports[`<VoiceBroadcastSmallPlaybackBody /> when rendering a buffering broadcas
role="button" role="button"
tabindex="0" tabindex="0"
> >
<div <svg
class="mx_Icon mx_Icon_8 mx_VoiceBroadcastBody__small-close" class="mx_Icon mx_Icon_8 mx_VoiceBroadcastBody__small-close"
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.414Z"
/> />
</svg>
</div> </div>
</div> </div>
</div> </div>
@ -323,9 +350,18 @@ exports[`<VoiceBroadcastSmallPlaybackBody /> when rendering a playing broadcast
role="button" role="button"
tabindex="0" tabindex="0"
> >
<div <svg
class="mx_Icon mx_Icon_8 mx_VoiceBroadcastBody__small-close" class="mx_Icon mx_Icon_8 mx_VoiceBroadcastBody__small-close"
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.414Z"
/> />
</svg>
</div> </div>
</div> </div>
</div> </div>
@ -399,9 +435,18 @@ exports[`<VoiceBroadcastSmallPlaybackBody /> when rendering a stopped broadcast
role="button" role="button"
tabindex="0" tabindex="0"
> >
<div <svg
class="mx_Icon mx_Icon_8 mx_VoiceBroadcastBody__small-close" class="mx_Icon mx_Icon_8 mx_VoiceBroadcastBody__small-close"
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.414Z"
/> />
</svg>
</div> </div>
</div> </div>
</div> </div>