Switch from svg masks to svg rendering in more places (#31652)

* Replace icons with Compound alternatives

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

* Remove unused icon

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

* Replace more icons with Compound alternatives

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

* Swap for outline icons in spotlight & update screenshots

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

* Switch emoji picker to use emoji for header icons

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

* Update screenshot

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

* Update football emoji

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

* Switch from svg masks to svg rendering in ExtensionsCard

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

* Switch from svg masks to svg rendering in BaseCard

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

* Switch from svg masks to svg rendering in EmojiPicker

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

* Switch from svg masks to svg rendering in Spotlight

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

* Update snapshot

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

* Update screenshots

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

* Tweak emoji and fix disabled state

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

* Switch from svg masks to svg rendering in HomePage

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

* Switch from svg masks to svg rendering in DecoratedRoomAvatar

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

* Switch from svg masks to svg rendering in SpaceRoomView

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

* Switch from svg masks to svg rendering in DialPadBackspaceButton

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

* Switch from svg masks to svg rendering in NewRoomIntro

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

* Switch from svg masks to svg rendering in SpaceCreateMenu

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

* Switch from svg masks to svg rendering in InlineTermsAgreement

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

* Switch from svg masks to svg rendering in PollCreateDialog

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

* Switch from svg masks to svg rendering in ServerPicker

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

* Revert size change

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

* Delint

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

* Update snapshots

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

---------

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

res/css/structures/_HomePage.pcss

@@ -70,29 +70,13 @@ Please see LICENSE files in the repository root for full details.
             color: #fff; /* on all themes */
             background-color: $accent;
 
-            &::before {
+            svg {
                 top: 20px;
                 left: 60px; /* (160px-40px)/2 */
                 width: 40px;
                 height: 40px;
-
-                content: "";
                 position: absolute;
-                background-color: #fff; /* on all themes */
+                color: #fff; /* on all themes */
-                mask-repeat: no-repeat;
-                mask-size: contain;
-            }
-
-            &.mx_HomePage_button_sendDm::before {
-                mask-image: url("@vector-im/compound-design-tokens/icons/chat-solid.svg");
-            }
-
-            &.mx_HomePage_button_explore::before {
-                mask-image: url("@vector-im/compound-design-tokens/icons/explore.svg");
-            }
-
-            &.mx_HomePage_button_createGroup::before {
-                mask-image: url("@vector-im/compound-design-tokens/icons/group.svg");
             }
         }
     }

res/css/structures/_SpaceRoomView.pcss

@@ -144,11 +144,8 @@ Please see LICENSE files in the repository root for full details.
                 .mx_SpaceRoomView_landing_settingsButton {
                     position: relative;
 
-                    &::before {
+                    svg {
                         position: absolute;
-                        content: "";
-                        mask-position: center;
-                        mask-repeat: no-repeat;
                     }
                 }
 
@@ -156,13 +153,11 @@ Please see LICENSE files in the repository root for full details.
                     padding: 4px 18px 4px 40px;
                     height: min-content;
 
-                    &::before {
+                    svg {
                         left: 8px;
                         height: 16px;
                         width: 16px;
-                        background: var(--cpd-color-icon-on-solid-primary);
+                        color: var(--cpd-color-icon-on-solid-primary);
-                        mask-size: 16px;
-                        mask-image: url("@vector-im/compound-design-tokens/icons/user-add.svg");
                     }
                 }
 
@@ -170,14 +165,12 @@ Please see LICENSE files in the repository root for full details.
                     width: 24px;
                     height: 24px;
 
-                    &::before {
+                    svg {
                         left: 0;
                         top: 0;
                         height: 24px;
                         width: 24px;
-                        background: $tertiary-content;
+                        color: $tertiary-content;
-                        mask-size: contain;
-                        mask-image: url("@vector-im/compound-design-tokens/icons/settings-solid.svg");
                     }
                 }
             }
@@ -207,35 +200,23 @@ Please see LICENSE files in the repository root for full details.
                 display: inline-block;
                 padding-left: 32px;
                 line-height: 24px; /* to center icons */
+                color: var(--cpd-color-text-primary);
+                font-weight: var(--cpd-font-weight-semibold);
+                text-decoration: underline;
 
-                &::before {
+                svg {
-                    content: "";
                     position: absolute;
                     height: 24px;
                     width: 24px;
                     top: 0;
                     left: 0;
-                    background-color: $secondary-content;
+                    color: var(--cpd-color-icon-primary);
-                    mask-repeat: no-repeat;
-                    mask-position: center;
-                    mask-size: contain;
                 }
 
                 & + .mx_AccessibleButton {
                     margin-left: 32px;
                 }
             }
-
-            .mx_SpaceRoomView_inviteTeammates_inviteDialogButton {
-                color: var(--cpd-color-text-primary);
-                font-weight: var(--cpd-font-weight-semibold);
-                text-decoration: underline;
-
-                &::before {
-                    mask-image: url("@vector-im/compound-design-tokens/icons/user-add.svg");
-                    background-color: var(--cpd-color-icon-primary);
-                }
-            }
         }
     }
 }

res/css/views/avatars/_DecoratedRoomAvatar.pcss

@@ -38,12 +38,10 @@ Please see LICENSE files in the repository root for full details.
         border-radius: 8px;
     }
 
-    .mx_DecoratedRoomAvatar_icon_globe::before {
+    .mx_DecoratedRoomAvatar_icon_globe svg {
-        mask-position: center;
+        width: inherit;
-        mask-size: contain;
+        height: inherit;
-        mask-repeat: no-repeat;
+        color: $secondary-content;
-        background: $secondary-content;
-        mask-image: url("@vector-im/compound-design-tokens/icons/public.svg");
     }
 
     .mx_DecoratedRoomAvatar_icon_offline::before {

res/css/views/dialogs/_PollCreateDialog.pcss

@@ -43,23 +43,17 @@ Please see LICENSE files in the repository root for full details.
 
         .mx_PollCreateDialog_removeOption {
             margin-left: 12px;
-            width: 20px;
+            width: 16px;
-            height: 20px;
+            height: 16px;
+            padding: var(--cpd-space-0-5x);
             border-radius: 50%;
             background-color: $quinary-content;
             cursor: pointer;
-            position: relative;
 
-            &::before {
+            svg {
-                content: "";
-                mask: url("@vector-im/compound-design-tokens/icons/close.svg");
-                mask-repeat: no-repeat;
-                mask-position: center;
-                mask-size: 16px;
                 width: inherit;
                 height: inherit;
-                position: absolute;
+                color: $secondary-content;
-                background-color: $secondary-content;
             }
         }
     }

res/css/views/elements/_DialPadBackspaceButton.pcss

@@ -7,26 +7,14 @@ Please see LICENSE files in the repository root for full details.
 */
 
 .mx_DialPadBackspaceButton {
-    position: relative;
+    height: 20px;
-    height: 28px;
+    width: 20px;
-    width: 28px;
+    padding: var(--cpd-space-1x);
 
-    &::before {
+    svg {
-        /* force this element to appear on the DOM */
+        color: #8d97a5;
-        content: "";
-
-        background-color: #8d97a5;
         width: inherit;
         height: inherit;
-        top: 0px;
-        left: 0px;
-        position: absolute;
         display: inline-block;
-        vertical-align: middle;
-
-        mask-image: url("@vector-im/compound-design-tokens/icons/backspace-solid.svg");
-        mask-position: 8px;
-        mask-size: 20px;
-        mask-repeat: no-repeat;
     }
 }

res/css/views/elements/_ServerPicker.pcss

@@ -23,28 +23,19 @@ Please see LICENSE files in the repository root for full details.
     }
 
     .mx_ServerPicker_help {
-        width: 20px;
+        width: 24px;
-        height: 20px;
+        height: 24px;
         border-radius: 10px;
         grid-column: 2;
         grid-row: 1;
         margin-left: auto;
-        text-align: center;
+        margin-top: -2px;
-        font-size: 16px;
+        margin-right: -2px;
-        position: relative;
 
-        &::before {
+        svg {
-            content: "";
+            width: inherit;
-            width: 24px;
+            height: inherit;
-            height: 24px;
+            color: $icon-button-color;
-            position: absolute;
-            top: -2px;
-            left: -2px;
-            mask-position: center;
-            mask-size: contain;
-            mask-repeat: no-repeat;
-            mask-image: url("@vector-im/compound-design-tokens/icons/info.svg");
-            background: $icon-button-color;
         }
     }
 

res/css/views/rooms/_NewRoomIntro.pcss

@@ -25,23 +25,15 @@ Please see LICENSE files in the repository root for full details.
             line-height: $font-24px;
             display: inline-block;
 
-            &:not(.mx_AccessibleButton_kind_primary_outline)::before {
+            svg {
-                content: "";
                 display: inline-block;
-                background-color: $button-fg-color;
+                color: $button-fg-color;
-                mask-position: center;
-                mask-repeat: no-repeat;
-                mask-size: 20px;
                 width: 20px;
                 height: 20px;
                 margin-right: 5px;
                 vertical-align: text-bottom;
             }
         }
-
-        .mx_NewRoomIntro_inviteButton::before {
-            mask-image: url("@vector-im/compound-design-tokens/icons/user-add.svg");
-        }
     }
 
     > h2 {

res/css/views/spaces/_SpaceCreateMenu.pcss

@@ -35,26 +35,15 @@ Please see LICENSE files in the repository root for full details.
         }
 
         .mx_SpaceCreateMenu_back {
-            width: 28px;
+            width: 24px;
-            height: 28px;
+            height: 24px;
-            position: relative;
+            padding: var(--cpd-space-0-5x);
             background-color: $panel-actions;
             border-radius: 14px;
             margin-bottom: 12px;
 
-            &::before {
+            svg {
-                content: "";
+                color: $tertiary-content;
-                position: absolute;
-                height: 28px;
-                width: 28px;
-                top: 0;
-                left: 0;
-                background-color: $tertiary-content;
-                transform: rotate(90deg);
-                mask-repeat: no-repeat;
-                mask-position: 2px 3px;
-                mask-size: 24px;
-                mask-image: url("@vector-im/compound-design-tokens/icons/chevron-down.svg");
             }
         }
 

res/css/views/terms/_InlineTermsAgreement.pcss

@@ -24,15 +24,3 @@ Please see LICENSE files in the repository root for full details.
         }
     }
 }
-
-.mx_InlineTermsAgreement_link {
-    display: inline-block;
-    mask-image: url("@vector-im/compound-design-tokens/icons/pop-out.svg");
-    background-color: $accent;
-    mask-repeat: no-repeat;
-    mask-size: contain;
-    width: 12px;
-    height: 12px;
-    margin-left: 3px;
-    vertical-align: middle;
-}

src/components/structures/HomePage.tsx

@@ -8,6 +8,7 @@ Please see LICENSE files in the repository root for full details.
 
 import React, { type JSX } from "react";
 import { useContext, useState } from "react";
+import { ChatSolidIcon, ExploreIcon, GroupIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import AutoHideScrollbar from "./AutoHideScrollbar";
 import { getHomePageUrl } from "../../utils/pages";
@@ -117,12 +118,15 @@ const HomePage: React.FC<IProps> = ({ justRegistered = false }) => {
                 {introSection}
                 <div className="mx_HomePage_default_buttons">
                     <AccessibleButton onClick={onClickSendDm} className="mx_HomePage_button_sendDm">
+                        <ChatSolidIcon />
                         {_tDom("onboarding|send_dm")}
                     </AccessibleButton>
                     <AccessibleButton onClick={onClickExplore} className="mx_HomePage_button_explore">
+                        <ExploreIcon />
                         {_tDom("onboarding|explore_rooms")}
                     </AccessibleButton>
                     <AccessibleButton onClick={onClickNewRoom} className="mx_HomePage_button_createGroup">
+                        <GroupIcon />
                         {_tDom("onboarding|create_room")}
                     </AccessibleButton>
                 </div>

src/components/structures/SpaceRoomView.tsx

@@ -14,6 +14,8 @@ import {
     GroupIcon,
     PlusIcon,
     RoomIcon,
+    SettingsSolidIcon,
+    UserAddIcon,
     UserProfileSolidIcon,
     VideoCallSolidIcon,
 } from "@vector-im/compound-design-tokens/assets/web/icons";
@@ -231,6 +233,7 @@ const SpaceLanding: React.FC<{ space: Room }> = ({ space }) => {
                     showSpaceInvite(space);
                 }}
             >
+                <UserAddIcon />
                 {_t("action|invite")}
             </AccessibleButton>
         );
@@ -254,7 +257,9 @@ const SpaceLanding: React.FC<{ space: Room }> = ({ space }) => {
                 }}
                 title={_t("common|settings")}
                 placement="bottom"
-            />
+            >
+                <SettingsSolidIcon />
+            </AccessibleButton>
         );
     }
 
@@ -578,10 +583,8 @@ const SpaceSetupPrivateInvite: React.FC<{
             </form>
 
             <div className="mx_SpaceRoomView_inviteTeammates_buttons">
-                <AccessibleButton
+                <AccessibleButton onClick={() => showRoomInviteDialog(space.roomId)}>
-                    className="mx_SpaceRoomView_inviteTeammates_inviteDialogButton"
+                    <UserAddIcon />
-                    onClick={() => showRoomInviteDialog(space.roomId)}
-                >
                     {_t("create_space|invite_teammates_by_username")}
                 </AccessibleButton>
             </div>

src/components/views/avatars/DecoratedRoomAvatar.tsx

@@ -19,6 +19,7 @@ import {
 } from "matrix-js-sdk/src/matrix";
 import { UnstableValue } from "matrix-js-sdk/src/NamespacedValue";
 import { Tooltip } from "@vector-im/compound-web";
+import { PublicIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import RoomAvatar from "./RoomAvatar";
 import NotificationBadge from "../rooms/NotificationBadge";
@@ -204,7 +205,9 @@ export default class DecoratedRoomAvatar extends React.PureComponent<IProps, ISt
                 <div
                     tabIndex={this.props.tooltipProps?.tabIndex ?? 0}
                     className={`mx_DecoratedRoomAvatar_icon mx_DecoratedRoomAvatar_icon_${this.state.icon.toLowerCase()}`}
-                />
+                >
+                    {this.state.icon === Icon.Globe ? <PublicIcon /> : null}
+                </div>
             );
         }
 

src/components/views/elements/DialPadBackspaceButton.tsx

@@ -7,6 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React from "react";
+import { BackspaceSolidIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import { _t } from "../../../languageHandler";
 import AccessibleButton, { type ButtonEvent } from "./AccessibleButton";
@@ -24,7 +25,9 @@ export default class DialPadBackspaceButton extends React.PureComponent<IProps>
                     className="mx_DialPadBackspaceButton"
                     onClick={this.props.onBackspacePress}
                     aria-label={_t("keyboard|backspace")}
-                />
+                >
+                    <BackspaceSolidIcon />
+                </AccessibleButton>
             </div>
         );
     }

src/components/views/elements/PollCreateDialog.tsx

@@ -18,6 +18,7 @@ import {
     type TimelineEvents,
 } from "matrix-js-sdk/src/matrix";
 import { PollStartEvent } from "matrix-js-sdk/src/extensible_events_v1/PollStartEvent";
+import { CloseIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import ScrollableBaseModal, { type IScrollableBaseState } from "../dialogs/ScrollableBaseModal";
 import QuestionDialog from "../dialogs/QuestionDialog";
@@ -233,7 +234,9 @@ export default class PollCreateDialog extends ScrollableBaseModal<IProps, IState
                             onClick={() => this.onOptionRemove(i)}
                             className="mx_PollCreateDialog_removeOption"
                             disabled={this.state.busy}
-                        />
+                        >
+                            <CloseIcon />
+                        </AccessibleButton>
                     </div>
                 ))}
                 <AccessibleButton

src/components/views/elements/ServerPicker.tsx

@@ -7,6 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React from "react";
+import { InfoIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import AccessibleButton from "./AccessibleButton";
 import { type ValidatedServerConfig } from "../../../utils/ValidatedServerConfig";
@@ -86,11 +87,9 @@ const ServerPicker: React.FC<IProps> = ({ title, dialogTitle, serverConfig, onSe
         <div className="mx_ServerPicker">
             <h2>{title || _t("common|homeserver")}</h2>
             {!disableCustomUrls ? (
-                <AccessibleButton
+                <AccessibleButton className="mx_ServerPicker_help" onClick={onHelpClick} aria-label={_t("common|help")}>
-                    className="mx_ServerPicker_help"
+                    <InfoIcon />
-                    onClick={onHelpClick}
+                </AccessibleButton>
-                    aria-label={_t("common|help")}
-                />
             ) : null}
             <span className="mx_ServerPicker_server" title={typeof serverName === "string" ? serverName : undefined}>
                 {serverName}

src/components/views/rooms/NewRoomIntro.tsx

@@ -9,7 +9,7 @@ Please see LICENSE files in the repository root for full details.
 import React, { type JSX, useContext } from "react";
 import { EventType, type Room, type User, type MatrixClient } from "matrix-js-sdk/src/matrix";
 import { KnownMembership } from "matrix-js-sdk/src/types";
-import { ErrorSolidIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
+import { ErrorSolidIcon, UserAddIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import DMRoomMap from "../../../utils/DMRoomMap";
@@ -191,6 +191,7 @@ const NewRoomIntro: React.FC = () => {
                             showSpaceInvite(parentSpace!);
                         }}
                     >
+                        <UserAddIcon />
                         {_t("invite|to_space", { spaceName: parentSpace.name })}
                     </AccessibleButton>
                     {room.canInvite(cli.getSafeUserId()) && (
@@ -201,6 +202,7 @@ const NewRoomIntro: React.FC = () => {
                                 defaultDispatcher.dispatch({ action: "view_invite", roomId });
                             }}
                         >
+                            <UserAddIcon />
                             {_t("room|intro|room_invite")}
                         </AccessibleButton>
                     )}
@@ -216,6 +218,7 @@ const NewRoomIntro: React.FC = () => {
                             defaultDispatcher.dispatch({ action: "view_invite", roomId });
                         }}
                     >
+                        <UserAddIcon />
                         {_t("room|invite_this_room")}
                     </AccessibleButton>
                 </div>

src/components/views/spaces/SpaceCreateMenu.tsx

@@ -27,7 +27,7 @@ import {
     type ICreateRoomOpts,
 } from "matrix-js-sdk/src/matrix";
 import { logger } from "matrix-js-sdk/src/logger";
-import { LockSolidIcon, PublicIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
+import { LockSolidIcon, PublicIcon, ChevronLeftIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import { _t } from "../../../languageHandler";
 import ContextMenu, { ChevronFace } from "../../structures/ContextMenu";
@@ -300,7 +300,9 @@ const SpaceCreateMenu: React.FC<{
                         className="mx_SpaceCreateMenu_back"
                         onClick={() => setVisibility(null)}
                         title={_t("action|go_back")}
-                    />
+                    >
+                        <ChevronLeftIcon />
+                    </AccessibleButton>
                 )}
 
                 <h2>

src/components/views/terms/InlineTermsAgreement.tsx

@@ -13,6 +13,7 @@ import { objectClone } from "../../../utils/objects";
 import StyledCheckbox from "../elements/StyledCheckbox";
 import AccessibleButton from "../elements/AccessibleButton";
 import { pickBestPolicyLanguage, type ServicePolicyPair } from "../../../Terms";
+import ExternalLink from "../elements/ExternalLink.tsx";
 
 interface IProps {
     policiesAndServicePairs: ServicePolicyPair[];
@@ -84,12 +85,7 @@ export default class InlineTermsAgreement extends React.Component<IProps, IState
                 {},
                 {
                     policyLink: () => {
-                        return (
+                        return <ExternalLink href={policy.url}>{policy.name}</ExternalLink>;
-                            <a href={policy.url} rel="noreferrer noopener" target="_blank">
-                                {policy.name}
-                                <span className="mx_InlineTermsAgreement_link" />
-                            </a>
-                        );
                     },
                 },
             );

test/unit-tests/components/views/avatars/__snapshots__/DecoratedRoomAvatar-test.tsx.snap

@@ -19,7 +19,19 @@ exports[`DecoratedRoomAvatar shows an avatar with globe icon and tooltip for pub
       aria-labelledby="_r_0_"
       class="mx_DecoratedRoomAvatar_icon mx_DecoratedRoomAvatar_icon_globe"
       tabindex="0"
-    />
+    >
+      <svg
+        fill="currentColor"
+        height="1em"
+        viewBox="0 0 24 24"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M12 22a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22m-1-2.05V18q-.825 0-1.412-.587A1.93 1.93 0 0 1 9 16v-1l-4.8-4.8q-.075.45-.138.9Q4 11.55 4 12q0 3.025 1.987 5.3T11 19.95m6.9-2.55q.5-.55.9-1.187.4-.638.662-1.326.263-.687.4-1.412Q20 12.75 20 12a7.85 7.85 0 0 0-1.363-4.475A7.7 7.7 0 0 0 15 4.6V5q0 .824-.588 1.412A1.93 1.93 0 0 1 13 7h-2v2q0 .424-.287.713A.97.97 0 0 1 10 10H8v2h6q.424 0 .713.287.287.288.287.713v3h1q.65 0 1.175.387.525.388.725 1.013"
+        />
+      </svg>
+    </div>
   </div>
 </DocumentFragment>
 `;

test/unit-tests/components/views/elements/__snapshots__/PollCreateDialog-test.tsx.snap

@@ -111,7 +111,19 @@ exports[`PollCreateDialog renders a blank poll 1`] = `
               class="mx_AccessibleButton mx_PollCreateDialog_removeOption"
               role="button"
               tabindex="0"
-            />
+            >
+              <svg
+                fill="currentColor"
+                height="1em"
+                viewBox="0 0 24 24"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414"
+                />
+              </svg>
+            </div>
           </div>
           <div
             class="mx_PollCreateDialog_option"
@@ -137,7 +149,19 @@ exports[`PollCreateDialog renders a blank poll 1`] = `
               class="mx_AccessibleButton mx_PollCreateDialog_removeOption"
               role="button"
               tabindex="0"
-            />
+            >
+              <svg
+                fill="currentColor"
+                height="1em"
+                viewBox="0 0 24 24"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414"
+                />
+              </svg>
+            </div>
           </div>
           <div
             class="mx_AccessibleButton mx_PollCreateDialog_addOption mx_AccessibleButton_hasKind mx_AccessibleButton_kind_secondary"
@@ -290,7 +314,19 @@ exports[`PollCreateDialog renders a question and some options 1`] = `
               class="mx_AccessibleButton mx_PollCreateDialog_removeOption"
               role="button"
               tabindex="0"
-            />
+            >
+              <svg
+                fill="currentColor"
+                height="1em"
+                viewBox="0 0 24 24"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414"
+                />
+              </svg>
+            </div>
           </div>
           <div
             class="mx_PollCreateDialog_option"
@@ -316,7 +352,19 @@ exports[`PollCreateDialog renders a question and some options 1`] = `
               class="mx_AccessibleButton mx_PollCreateDialog_removeOption"
               role="button"
               tabindex="0"
-            />
+            >
+              <svg
+                fill="currentColor"
+                height="1em"
+                viewBox="0 0 24 24"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414"
+                />
+              </svg>
+            </div>
           </div>
           <div
             class="mx_PollCreateDialog_option"
@@ -342,7 +390,19 @@ exports[`PollCreateDialog renders a question and some options 1`] = `
               class="mx_AccessibleButton mx_PollCreateDialog_removeOption"
               role="button"
               tabindex="0"
-            />
+            >
+              <svg
+                fill="currentColor"
+                height="1em"
+                viewBox="0 0 24 24"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414"
+                />
+              </svg>
+            </div>
           </div>
           <div
             class="mx_AccessibleButton mx_PollCreateDialog_addOption mx_AccessibleButton_hasKind mx_AccessibleButton_kind_secondary"
@@ -493,7 +553,19 @@ exports[`PollCreateDialog renders info from a previous event 1`] = `
               class="mx_AccessibleButton mx_PollCreateDialog_removeOption"
               role="button"
               tabindex="0"
-            />
+            >
+              <svg
+                fill="currentColor"
+                height="1em"
+                viewBox="0 0 24 24"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414"
+                />
+              </svg>
+            </div>
           </div>
           <div
             class="mx_PollCreateDialog_option"
@@ -519,7 +591,19 @@ exports[`PollCreateDialog renders info from a previous event 1`] = `
               class="mx_AccessibleButton mx_PollCreateDialog_removeOption"
               role="button"
               tabindex="0"
-            />
+            >
+              <svg
+                fill="currentColor"
+                height="1em"
+                viewBox="0 0 24 24"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414"
+                />
+              </svg>
+            </div>
           </div>
           <div
             class="mx_AccessibleButton mx_PollCreateDialog_addOption mx_AccessibleButton_hasKind mx_AccessibleButton_kind_secondary"