Fix e2e icon rendering (#31454)

* Fix e2e icon rendering

Regressed by change to compound icons, due to it relying on a hack of rendering icons atop each other to draw a background.

Also fixes a nested tooltip which became annoying during testing

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

* Update tests

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

* Iterate

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

---------

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

res/css/views/rooms/_E2EIcon.pcss

@@ -9,54 +9,25 @@ Please see LICENSE files in the repository root for full details.
     width: 16px;
     height: 16px;
     margin: 0 9px;
-    position: relative;
     display: block;
+
+    svg {
+        width: inherit;
+        height: inherit;
+        display: block;
+    }
 }
 
 .mx_E2EIcon.mx_E2EIcon_inline {
     display: inline-block;
 }
 
-.mx_E2EIcon_warning,
+.mx_E2EIcon_warning {
-.mx_E2EIcon_normal,
+    color: $e2e-warning-color;
-.mx_E2EIcon_verified {
-    &::before,
-    &::after {
-        content: "";
-        display: block;
-        position: absolute;
-        inset: 0;
-        mask-repeat: no-repeat;
-        mask-position: center;
-        mask-size: contain;
-    }
 }
 
-/* transparent-looking border surrounding the shield for when overlain over avatars */
+.mx_E2EIcon_normal {
-.mx_E2EIcon_bordered {
+    color: var(--cpd-color-icon-tertiary);
-    mask-image: url("@vector-im/compound-design-tokens/icons/lock-solid.svg");
-    background-color: $header-panel-bg-color;
-    mask-size: 100%;
-
-    /* shrink the actual badge */
-    &::after {
-        mask-size: 75%;
-    }
-    /* shrink the infill of the badge */
-    &::before {
-        mask-size: 60%;
-        background: var(--cpd-color-bg-canvas-default);
-    }
-}
-
-.mx_E2EIcon_warning::after {
-    mask-image: url("@vector-im/compound-design-tokens/icons/error-solid.svg");
-    background-color: $e2e-warning-color;
-}
-
-.mx_E2EIcon_normal::after {
-    mask-image: url("@vector-im/compound-design-tokens/icons/lock-solid.svg");
-    background-color: var(--cpd-color-icon-tertiary);
 }
 
 .mx_E2EIcon_verified,
@@ -66,7 +37,6 @@ Please see LICENSE files in the repository root for full details.
     }
 }
 
-.mx_E2EIcon_verified::after {
+.mx_E2EIcon_verified {
-    mask-image: url("@vector-im/compound-design-tokens/icons/shield.svg");
+    color: $e2e-verified-color;
-    background-color: $e2e-verified-color;
 }

res/css/views/rooms/_MessageComposer.pcss

@@ -38,11 +38,6 @@ Please see LICENSE files in the repository root for full details.
     font-weight: bold;
 }
 
-.mx_MessageComposer_autocomplete_wrapper {
-    position: relative;
-    height: 0;
-}
-
 .mx_MessageComposer_row {
     display: flex;
     flex-direction: row;
@@ -67,19 +62,20 @@ Please see LICENSE files in the repository root for full details.
     }
 }
 
-.mx_MessageComposer_composecontrols {
-    width: 100%;
-}
 .mx_MessageComposer_e2eIconWrapper {
     height: 12px; /* Match the height of the E2E icon for alignment */
-}
+    width: 12px;
-.mx_MessageComposer_e2eIcon.mx_E2EIcon {
     position: absolute;
     left: 20px;
+    top: 22px;
     margin-right: 0; /* Counteract the E2EIcon class */
     margin-left: 3px; /* Counteract the E2EIcon class */
-    width: 12px;
+
-    height: 12px;
+    .mx_MessageComposer_e2eIcon {
+        margin: 0;
+        width: inherit;
+        height: inherit;
+    }
 }
 
 .mx_MessageComposer_noperm_error {
@@ -92,13 +88,6 @@ Please see LICENSE files in the repository root for full details.
     justify-content: center;
 }
 
-.mx_MessageComposer_input_wrapper {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    cursor: text;
-}
-
 .mx_MessageComposer_input {
     flex: 1;
     vertical-align: middle;
@@ -145,38 +134,6 @@ Please see LICENSE files in the repository root for full details.
     }
 }
 
-.mx_MessageComposer_editor {
-    width: 100%;
-    max-height: 120px;
-    min-height: 19px;
-    overflow-y: auto;
-    overflow-x: hidden;
-    word-break: break-word;
-
-    /* FIXME: rather unpleasant hack to get rid of <p/> margins. */
-    /* really we should be mixing in markdown-body from github-markdown-css instead */
-    > :first-child {
-        margin-top: 0 !important;
-    }
-
-    > :last-child {
-        margin-bottom: 0 !important;
-    }
-}
-
-@keyframes visualbell {
-    from {
-        background-color: $visual-bell-bg-color;
-    }
-    to {
-        background-color: $background;
-    }
-}
-
-.mx_MessageComposer_input_error {
-    animation: 0.2s visualbell;
-}
-
 .mx_MessageComposer_button_highlight {
     @mixin composerButtonHighLight;
 }
@@ -198,10 +155,6 @@ Please see LICENSE files in the repository root for full details.
             z-index: 2;
         }
     }
-
-    &.mx_MessageComposer_hangup:not(.mx_AccessibleButton_disabled)::before {
-        background-color: $alert;
-    }
 }
 .mx_MessageComposer_wysiwyg {
     .mx_MessageComposer_wrapper {
@@ -237,10 +190,6 @@ Please see LICENSE files in the repository root for full details.
                 z-index: 2;
             }
         }
-
-        &.mx_MessageComposer_hangup:not(.mx_AccessibleButton_disabled)::before {
-            background-color: $alert;
-        }
     }
 }
 
@@ -322,6 +271,10 @@ Please see LICENSE files in the repository root for full details.
         padding: 0 0 0 25px;
     }
 
+    .mx_MessageComposer_e2eIconWrapper {
+        left: 0;
+    }
+
     &:not(.mx_MessageComposer_e2eStatus) {
         .mx_MessageComposer_wrapper {
             padding: 0;

src/components/views/rooms/E2EIcon.tsx

@@ -10,6 +10,7 @@ Please see LICENSE files in the repository root for full details.
 import React, { type JSX, type ComponentProps, type CSSProperties } from "react";
 import classNames from "classnames";
 import { Tooltip } from "@vector-im/compound-web";
+import { ErrorSolidIcon, ShieldIcon, LockSolidIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import { _t, _td, type TranslationKey } from "../../../languageHandler";
 import AccessibleButton from "../elements/AccessibleButton";
@@ -32,31 +33,20 @@ interface Props {
     onClick?: () => void;
     hideTooltip?: boolean;
     tooltipPlacement?: ComponentProps<typeof Tooltip>["placement"];
-    bordered?: boolean;
     status: E2EStatus;
     isUser?: boolean;
 }
 
-const E2EIcon: React.FC<Props> = ({
+const icons: Record<E2EStatus, JSX.Element> = {
-    isUser,
+    [E2EStatus.Warning]: <ErrorSolidIcon className="mx_E2EIcon_warning" />,
-    status,
+    [E2EStatus.Normal]: <LockSolidIcon className="mx_E2EIcon_normal" />,
-    className,
+    [E2EStatus.Verified]: <ShieldIcon className="mx_E2EIcon_verified" />,
-    size,
+};
-    onClick,
+
-    hideTooltip,
+const E2EIcon: React.FC<Props> = ({ isUser, status, className, size, onClick, hideTooltip, tooltipPlacement }) => {
-    tooltipPlacement,
+    const icon = icons[status];
-    bordered,
+
-}) => {
+    const classes = classNames("mx_E2EIcon", className);
-    const classes = classNames(
-        {
-            mx_E2EIcon: true,
-            mx_E2EIcon_bordered: bordered,
-            mx_E2EIcon_warning: status === E2EStatus.Warning,
-            mx_E2EIcon_normal: status === E2EStatus.Normal,
-            mx_E2EIcon_verified: status === E2EStatus.Verified,
-        },
-        className,
-    );
 
     let e2eTitle: TranslationKey | undefined;
     if (isUser) {
@@ -74,19 +64,17 @@ const E2EIcon: React.FC<Props> = ({
 
     let content: JSX.Element;
     if (onClick) {
-        content = <AccessibleButton onClick={onClick} className={classes} style={style} data-testid="e2e-icon" />;
+        content = (
+            <AccessibleButton onClick={onClick} className={classes} style={style} data-testid="e2e-icon">
+                {icon}
+            </AccessibleButton>
+        );
     } else {
-        // Verified and warning icon have a transparent cutout, so add a white background.
+        content = (
-        // The normal icon already has the correct shape and size, so reuse that.
+            <div className={classes} style={style} data-testid="e2e-icon">
-        if (status === E2EStatus.Verified || status === E2EStatus.Warning) {
+                {icon}
-            content = (
+            </div>
-                <div className={classes} style={style} data-testid="e2e-icon">
+        );
-                    <div className="mx_E2EIcon_normal" />
-                </div>
-            );
-        } else {
-            content = <div className={classes} style={style} data-testid="e2e-icon" />;
-        }
     }
 
     if (!e2eTitle || hideTooltip) {

src/components/views/rooms/MessageComposer.tsx

@@ -533,8 +533,8 @@ export class MessageComposer extends React.Component<IProps, IState> {
                         <Tooltip label={_t("composer|room_unencrypted")}>
                             <LockOffIcon
                                 aria-label={_t("composer|room_unencrypted")}
-                                width={12}
+                                width="12px"
-                                height={12}
+                                height="12px"
                                 color="var(--cpd-color-icon-info-primary)"
                                 className="mx_E2EIcon mx_MessageComposer_e2eIcon"
                             />
@@ -544,7 +544,12 @@ export class MessageComposer extends React.Component<IProps, IState> {
             } else if (this.props.e2eStatus !== E2EStatus.Normal) {
                 leftIcon = (
                     <div className="mx_MessageComposer_e2eIconWrapper">
-                        <E2EIcon key="e2eIcon" status={this.props.e2eStatus} className="mx_MessageComposer_e2eIcon" />
+                        <E2EIcon
+                            key="e2eIcon"
+                            status={this.props.e2eStatus}
+                            className="mx_MessageComposer_e2eIcon"
+                            size={12}
+                        />
                     </div>
                 );
             }
@@ -587,14 +592,20 @@ export class MessageComposer extends React.Component<IProps, IState> {
                 );
             }
 
+            const isTooltipOpen = Boolean(this.state.recordingTimeLeftSeconds);
+            const secondsLeft = this.state.recordingTimeLeftSeconds
+                ? Math.round(this.state.recordingTimeLeftSeconds)
+                : 0;
             controls.push(
-                <VoiceRecordComposerTile
+                <Tooltip open={isTooltipOpen} description={formatTimeLeft(secondsLeft)} placement="bottom">
-                    key="controls_voice_record"
+                    <VoiceRecordComposerTile
-                    ref={this.voiceRecordingButton}
+                        key="controls_voice_record"
-                    room={this.props.room}
+                        ref={this.voiceRecordingButton}
-                    relation={this.props.relation}
+                        room={this.props.room}
-                    replyToEvent={this.props.replyToEvent}
+                        relation={this.props.relation}
-                />,
+                        replyToEvent={this.props.replyToEvent}
+                    />
+                </Tooltip>,
             );
         } else if (this.context.tombstone) {
             const replacementRoomId = this.context.tombstone.getContent()["replacement_room"];
@@ -636,9 +647,6 @@ export class MessageComposer extends React.Component<IProps, IState> {
             );
         }
 
-        const isTooltipOpen = Boolean(this.state.recordingTimeLeftSeconds);
-        const secondsLeft = this.state.recordingTimeLeftSeconds ? Math.round(this.state.recordingTimeLeftSeconds) : 0;
-
         const threadId =
             this.props.relation?.rel_type === THREAD_RELATION_TYPE.name ? this.props.relation.event_id : null;
 
@@ -663,55 +671,51 @@ export class MessageComposer extends React.Component<IProps, IState> {
         });
 
         return (
-            <Tooltip open={isTooltipOpen} description={formatTimeLeft(secondsLeft)} placement="bottom">
+            <div className={classes} ref={this.ref} role="region" aria-label={_t("a11y|message_composer")}>
-                <div className={classes} ref={this.ref} role="region" aria-label={_t("a11y|message_composer")}>
+                <div className="mx_MessageComposer_wrapper">
-                    <div className="mx_MessageComposer_wrapper">
+                    <UserIdentityWarning room={this.props.room} key={this.props.room.roomId} />
-                        <UserIdentityWarning room={this.props.room} key={this.props.room.roomId} />
+                    <ReplyPreview
-                        <ReplyPreview
+                        replyToEvent={this.props.replyToEvent}
-                            replyToEvent={this.props.replyToEvent}
+                        permalinkCreator={this.props.permalinkCreator}
-                            permalinkCreator={this.props.permalinkCreator}
+                    />
-                        />
+                    <div className="mx_MessageComposer_row">
-                        <div className="mx_MessageComposer_row">
+                        {leftIcon}
-                            {leftIcon}
+                        {composer}
-                            {composer}
+                        <div className="mx_MessageComposer_actions">
-                            <div className="mx_MessageComposer_actions">
+                            {controls}
-                                {controls}
+                            {canSendMessages && (
-                                {canSendMessages && (
+                                <MessageComposerButtons
-                                    <MessageComposerButtons
+                                    addEmoji={this.addEmoji}
-                                        addEmoji={this.addEmoji}
+                                    haveRecording={this.state.haveRecording}
-                                        haveRecording={this.state.haveRecording}
+                                    isMenuOpen={this.state.isMenuOpen}
-                                        isMenuOpen={this.state.isMenuOpen}
+                                    isStickerPickerOpen={this.state.isStickerPickerOpen}
-                                        isStickerPickerOpen={this.state.isStickerPickerOpen}
+                                    menuPosition={menuPosition}
-                                        menuPosition={menuPosition}
+                                    relation={this.props.relation}
-                                        relation={this.props.relation}
+                                    onRecordStartEndClick={this.onRecordStartEndClick}
-                                        onRecordStartEndClick={this.onRecordStartEndClick}
+                                    setStickerPickerOpen={this.setStickerPickerOpen}
-                                        setStickerPickerOpen={this.setStickerPickerOpen}
+                                    showLocationButton={
-                                        showLocationButton={
+                                        !window.electron && SettingsStore.getValue(UIFeature.LocationSharing)
-                                            !window.electron && SettingsStore.getValue(UIFeature.LocationSharing)
+                                    }
-                                        }
+                                    showPollsButton={this.state.showPollsButton}
-                                        showPollsButton={this.state.showPollsButton}
+                                    showStickersButton={this.showStickersButton}
-                                        showStickersButton={this.showStickersButton}
+                                    isRichTextEnabled={this.state.isRichTextEnabled}
-                                        isRichTextEnabled={this.state.isRichTextEnabled}
+                                    onComposerModeClick={this.onRichTextToggle}
-                                        onComposerModeClick={this.onRichTextToggle}
+                                    toggleButtonMenu={this.toggleButtonMenu}
-                                        toggleButtonMenu={this.toggleButtonMenu}
+                                />
-                                    />
+                            )}
-                                )}
+                            {showSendButton && (
-                                {showSendButton && (
+                                <SendButton
-                                    <SendButton
+                                    key="controls_send"
-                                        key="controls_send"
+                                    onClick={this.sendMessage}
-                                        onClick={this.sendMessage}
+                                    title={
-                                        title={
+                                        this.state.haveRecording ? _t("composer|send_button_voice_message") : undefined
-                                            this.state.haveRecording
+                                    }
-                                                ? _t("composer|send_button_voice_message")
+                                />
-                                                : undefined
+                            )}
-                                        }
-                                    />
-                                )}
-                            </div>
                         </div>
                     </div>
                 </div>
-            </Tooltip>
+            </div>
         );
     }
 }

src/components/views/rooms/wysiwyg_composer/SendWysiwygComposer.tsx

@@ -68,7 +68,7 @@ export default function SendWysiwygComposer({
             />
         );
     } else if (e2eStatus !== E2EStatus.Normal) {
-        leftIcon = <E2EIcon status={e2eStatus} />;
+        leftIcon = <E2EIcon status={e2eStatus} size={12} />;
     }
     return (
         <ComposerContext.Provider value={defaultContextValue}>

test/unit-tests/components/structures/__snapshots__/RoomView-test.tsx.snap

@@ -363,13 +363,13 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
             >
               <svg
                 aria-label="Messages in this room are not end-to-end encrypted"
-                aria-labelledby="_r_o5_"
+                aria-labelledby="_r_o1_"
                 class="mx_E2EIcon mx_MessageComposer_e2eIcon"
                 color="var(--cpd-color-icon-info-primary)"
                 fill="currentColor"
-                height="12"
+                height="12px"
                 viewBox="0 0 24 24"
-                width="12"
+                width="12px"
                 xmlns="http://www.w3.org/2000/svg"
               >
                 <path
@@ -1238,13 +1238,13 @@ exports[`RoomView should hide the header when hideHeader=true 1`] = `
               >
                 <svg
                   aria-label="Messages in this room are not end-to-end encrypted"
-                  aria-labelledby="_r_14_"
+                  aria-labelledby="_r_10_"
                   class="mx_E2EIcon mx_MessageComposer_e2eIcon"
                   color="var(--cpd-color-icon-info-primary)"
                   fill="currentColor"
-                  height="12"
+                  height="12px"
                   viewBox="0 0 24 24"
-                  width="12"
+                  width="12px"
                   xmlns="http://www.w3.org/2000/svg"
                 >
                   <path
@@ -1674,13 +1674,13 @@ exports[`RoomView should hide the pinned message banner when hidePinnedMessageBa
               >
                 <svg
                   aria-label="Messages in this room are not end-to-end encrypted"
-                  aria-labelledby="_r_6e_"
+                  aria-labelledby="_r_6a_"
                   class="mx_E2EIcon mx_MessageComposer_e2eIcon"
                   color="var(--cpd-color-icon-info-primary)"
                   fill="currentColor"
-                  height="12"
+                  height="12px"
                   viewBox="0 0 24 24"
-                  width="12"
+                  width="12px"
                   xmlns="http://www.w3.org/2000/svg"
                 >
                   <path
@@ -2110,13 +2110,13 @@ exports[`RoomView should hide the right panel when hideRightPanel=true 1`] = `
               >
                 <svg
                   aria-label="Messages in this room are not end-to-end encrypted"
-                  aria-labelledby="_r_3h_"
+                  aria-labelledby="_r_3d_"
                   class="mx_E2EIcon mx_MessageComposer_e2eIcon"
                   color="var(--cpd-color-icon-info-primary)"
                   fill="currentColor"
-                  height="12"
+                  height="12px"
                   viewBox="0 0 24 24"
-                  width="12"
+                  width="12px"
                   xmlns="http://www.w3.org/2000/svg"
                 >
                   <path
@@ -2762,13 +2762,25 @@ exports[`RoomView should not display the timeline when the room encryption is lo
                   tabindex="0"
                 >
                   <div
-                    aria-labelledby="_r_g8_"
+                    aria-labelledby="_r_g4_"
-                    class="mx_E2EIcon mx_E2EIcon_verified mx_MessageComposer_e2eIcon"
+                    class="mx_E2EIcon mx_MessageComposer_e2eIcon"
                     data-testid="e2e-icon"
+                    style="width: 12px; height: 12px;"
                   >
-                    <div
+                    <svg
-                      class="mx_E2EIcon_normal"
+                      class="mx_E2EIcon_verified"
-                    />
+                      fill="currentColor"
+                      height="1em"
+                      viewBox="0 0 24 24"
+                      width="1em"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        clip-rule="evenodd"
+                        d="M11.106 2.447a2 2 0 0 1 1.789 0l6 3A2 2 0 0 1 20 7.237V12c0 6.742-5.773 9.246-7.51 9.846-.32.111-.66.111-.98 0C9.774 21.246 4 18.743 4 12V7.236a2 2 0 0 1 1.105-1.789zm4.601 6.846a1 1 0 0 0-1.414 0L11 12.586l-1.293-1.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0 0-1.414"
+                        fill-rule="evenodd"
+                      />
+                    </svg>
                   </div>
                 </span>
               </div>
@@ -3264,13 +3276,13 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
                   >
                     <svg
                       aria-label="Messages in this room are not end-to-end encrypted"
-                      aria-labelledby="_r_l8_"
+                      aria-labelledby="_r_l4_"
                       class="mx_E2EIcon mx_MessageComposer_e2eIcon"
                       color="var(--cpd-color-icon-info-primary)"
                       fill="currentColor"
-                      height="12"
+                      height="12px"
                       viewBox="0 0 24 24"
-                      width="12"
+                      width="12px"
                       xmlns="http://www.w3.org/2000/svg"
                     >
                       <path

test/unit-tests/components/views/dialogs/__snapshots__/UntrustedDeviceDialog-test.tsx.snap

@@ -22,13 +22,22 @@ exports[`<UntrustedDeviceDialog /> should display the dialog for the device of a
         id="mx_BaseDialog_title"
       >
         <div
-          class="mx_E2EIcon mx_E2EIcon_warning"
+          class="mx_E2EIcon"
           data-testid="e2e-icon"
           style="width: 24px; height: 24px;"
         >
-          <div
+          <svg
-            class="mx_E2EIcon_normal"
+            class="mx_E2EIcon_warning"
-          />
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 15a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 16q0 .424.287.712.288.288.713.288m0-4q.424 0 .713-.287A.97.97 0 0 0 13 12V8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8v4q0 .424.287.713.288.287.713.287m0 9a9.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 22"
+            />
+          </svg>
         </div>
         Not Trusted
       </h1>
@@ -102,13 +111,22 @@ exports[`<UntrustedDeviceDialog /> should display the dialog for the device of t
         id="mx_BaseDialog_title"
       >
         <div
-          class="mx_E2EIcon mx_E2EIcon_warning"
+          class="mx_E2EIcon"
           data-testid="e2e-icon"
           style="width: 24px; height: 24px;"
         >
-          <div
+          <svg
-            class="mx_E2EIcon_normal"
+            class="mx_E2EIcon_warning"
-          />
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 15a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 16q0 .424.287.712.288.288.713.288m0-4q.424 0 .713-.287A.97.97 0 0 0 13 12V8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8v4q0 .424.287.713.288.287.713.287m0 9a9.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 22"
+            />
+          </svg>
         </div>
         Not Trusted
       </h1>

test/unit-tests/components/views/dialogs/__snapshots__/VerificationRequestDialog-test.tsx.snap

@@ -32,13 +32,24 @@ exports[`VerificationRequestDialog After scanning QR, shows confirmation dialog
         Check again on your other device to finish verification.
       </p>
       <div
-        class="mx_E2EIcon mx_E2EIcon_verified"
+        class="mx_E2EIcon"
         data-testid="e2e-icon"
         style="width: 128px; height: 128px;"
       >
-        <div
+        <svg
-          class="mx_E2EIcon_normal"
+          class="mx_E2EIcon_verified"
-        />
+          fill="currentColor"
+          height="1em"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            clip-rule="evenodd"
+            d="M11.106 2.447a2 2 0 0 1 1.789 0l6 3A2 2 0 0 1 20 7.237V12c0 6.742-5.773 9.246-7.51 9.846-.32.111-.66.111-.98 0C9.774 21.246 4 18.743 4 12V7.236a2 2 0 0 1 1.105-1.789zm4.601 6.846a1 1 0 0 0-1.414 0L11 12.586l-1.293-1.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0 0-1.414"
+            fill-rule="evenodd"
+          />
+        </svg>
       </div>
       <div
         class="mx_VerificationPanel_reciprocateButtons"
@@ -297,13 +308,24 @@ exports[`VerificationRequestDialog Shows a successful message if verification fi
         Now you can read or send messages securely, and anyone you chat with can also trust this device.
       </p>
       <div
-        class="mx_E2EIcon mx_E2EIcon_verified"
+        class="mx_E2EIcon"
         data-testid="e2e-icon"
         style="width: 128px; height: 128px;"
       >
-        <div
+        <svg
-          class="mx_E2EIcon_normal"
+          class="mx_E2EIcon_verified"
-        />
+          fill="currentColor"
+          height="1em"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            clip-rule="evenodd"
+            d="M11.106 2.447a2 2 0 0 1 1.789 0l6 3A2 2 0 0 1 20 7.237V12c0 6.742-5.773 9.246-7.51 9.846-.32.111-.66.111-.98 0C9.774 21.246 4 18.743 4 12V7.236a2 2 0 0 1 1.105-1.789zm4.601 6.846a1 1 0 0 0-1.414 0L11 12.586l-1.293-1.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0 0-1.414"
+            fill-rule="evenodd"
+          />
+        </svg>
       </div>
       <div
         class="mx_AccessibleButton mx_UserInfo_wideButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"

test/unit-tests/components/views/dialogs/devtools/__snapshots__/Users-test.tsx.snap

@@ -39,9 +39,22 @@ exports[`<Users /> should render a single device - signed by owner 1`] = `
         <span>
           Verification status: 
           <div
-            class="mx_E2EIcon mx_E2EIcon_normal mx_E2EIcon_inline"
+            class="mx_E2EIcon mx_E2EIcon_inline"
             data-testid="e2e-icon"
-          />
+          >
+            <svg
+              class="mx_E2EIcon_normal"
+              fill="currentColor"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M6 22q-.824 0-1.412-.587A1.93 1.93 0 0 1 4 20V10q0-.825.588-1.412A1.93 1.93 0 0 1 6 8h1V6q0-2.075 1.463-3.537Q9.926 1 12 1q2.075 0 3.537 1.463Q17 3.925 17 6v2h1q.824 0 1.413.588Q20 9.175 20 10v10q0 .824-.587 1.413A1.93 1.93 0 0 1 18 22zM9 8h6V6q0-1.25-.875-2.125A2.9 2.9 0 0 0 12 3q-1.25 0-2.125.875A2.9 2.9 0 0 0 9 6z"
+              />
+            </svg>
+          </div>
            Signed by owner
         </span>
       </li>
@@ -130,12 +143,21 @@ exports[`<Users /> should render a single device - unsigned 1`] = `
         <span>
           Verification status: 
           <div
-            class="mx_E2EIcon mx_E2EIcon_warning mx_E2EIcon_inline"
+            class="mx_E2EIcon mx_E2EIcon_inline"
             data-testid="e2e-icon"
           >
-            <div
+            <svg
-              class="mx_E2EIcon_normal"
+              class="mx_E2EIcon_warning"
-            />
+              fill="currentColor"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 15a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 16q0 .424.287.712.288.288.713.288m0-4q.424 0 .713-.287A.97.97 0 0 0 13 12V8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8v4q0 .424.287.713.288.287.713.287m0 9a9.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 22"
+              />
+            </svg>
           </div>
            Not signed by owner
         </span>
@@ -225,12 +247,23 @@ exports[`<Users /> should render a single device - verified by cross-signing 1`]
         <span>
           Verification status: 
           <div
-            class="mx_E2EIcon mx_E2EIcon_verified mx_E2EIcon_inline"
+            class="mx_E2EIcon mx_E2EIcon_inline"
             data-testid="e2e-icon"
           >
-            <div
+            <svg
-              class="mx_E2EIcon_normal"
+              class="mx_E2EIcon_verified"
-            />
+              fill="currentColor"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                clip-rule="evenodd"
+                d="M11.106 2.447a2 2 0 0 1 1.789 0l6 3A2 2 0 0 1 20 7.237V12c0 6.742-5.773 9.246-7.51 9.846-.32.111-.66.111-.98 0C9.774 21.246 4 18.743 4 12V7.236a2 2 0 0 1 1.105-1.789zm4.601 6.846a1 1 0 0 0-1.414 0L11 12.586l-1.293-1.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0 0-1.414"
+                fill-rule="evenodd"
+              />
+            </svg>
           </div>
            Verified by cross-signing
         </span>
@@ -323,12 +356,23 @@ exports[`<Users /> should render a single user 1`] = `
         <span>
           Verification status: 
           <div
-            class="mx_E2EIcon mx_E2EIcon_verified mx_E2EIcon_inline"
+            class="mx_E2EIcon mx_E2EIcon_inline"
             data-testid="e2e-icon"
           >
-            <div
+            <svg
-              class="mx_E2EIcon_normal"
+              class="mx_E2EIcon_verified"
-            />
+              fill="currentColor"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                clip-rule="evenodd"
+                d="M11.106 2.447a2 2 0 0 1 1.789 0l6 3A2 2 0 0 1 20 7.237V12c0 6.742-5.773 9.246-7.51 9.846-.32.111-.66.111-.98 0C9.774 21.246 4 18.743 4 12V7.236a2 2 0 0 1 1.105-1.789zm4.601 6.846a1 1 0 0 0-1.414 0L11 12.586l-1.293-1.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0 0-1.414"
+                fill-rule="evenodd"
+              />
+            </svg>
           </div>
            Verified
         </span>
@@ -344,12 +388,23 @@ exports[`<Users /> should render a single user 1`] = `
             class="mx_DevTools_button"
           >
             <div
-              class="mx_E2EIcon mx_E2EIcon_verified mx_E2EIcon_inline"
+              class="mx_E2EIcon mx_E2EIcon_inline"
               data-testid="e2e-icon"
             >
-              <div
+              <svg
-                class="mx_E2EIcon_normal"
+                class="mx_E2EIcon_verified"
-              />
+                fill="currentColor"
+                height="1em"
+                viewBox="0 0 24 24"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  clip-rule="evenodd"
+                  d="M11.106 2.447a2 2 0 0 1 1.789 0l6 3A2 2 0 0 1 20 7.237V12c0 6.742-5.773 9.246-7.51 9.846-.32.111-.66.111-.98 0C9.774 21.246 4 18.743 4 12V7.236a2 2 0 0 1 1.105-1.789zm4.601 6.846a1 1 0 0 0-1.414 0L11 12.586l-1.293-1.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0 0-1.414"
+                  fill-rule="evenodd"
+                />
+              </svg>
             </div>
             VERIFIED
           </button>
@@ -359,9 +414,22 @@ exports[`<Users /> should render a single user 1`] = `
             class="mx_DevTools_button"
           >
             <div
-              class="mx_E2EIcon mx_E2EIcon_normal mx_E2EIcon_inline"
+              class="mx_E2EIcon mx_E2EIcon_inline"
               data-testid="e2e-icon"
-            />
+            >
+              <svg
+                class="mx_E2EIcon_normal"
+                fill="currentColor"
+                height="1em"
+                viewBox="0 0 24 24"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M6 22q-.824 0-1.412-.587A1.93 1.93 0 0 1 4 20V10q0-.825.588-1.412A1.93 1.93 0 0 1 6 8h1V6q0-2.075 1.463-3.537Q9.926 1 12 1q2.075 0 3.537 1.463Q17 3.925 17 6v2h1q.824 0 1.413.588Q20 9.175 20 10v10q0 .824-.587 1.413A1.93 1.93 0 0 1 18 22zM9 8h6V6q0-1.25-.875-2.125A2.9 2.9 0 0 0 12 3q-1.25 0-2.125.875A2.9 2.9 0 0 0 9 6z"
+                />
+              </svg>
+            </div>
             SIGNED
           </button>
         </li>
@@ -370,12 +438,21 @@ exports[`<Users /> should render a single user 1`] = `
             class="mx_DevTools_button"
           >
             <div
-              class="mx_E2EIcon mx_E2EIcon_warning mx_E2EIcon_inline"
+              class="mx_E2EIcon mx_E2EIcon_inline"
               data-testid="e2e-icon"
             >
-              <div
+              <svg
-                class="mx_E2EIcon_normal"
+                class="mx_E2EIcon_warning"
-              />
+                fill="currentColor"
+                height="1em"
+                viewBox="0 0 24 24"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 15a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 16q0 .424.287.712.288.288.713.288m0-4q.424 0 .713-.287A.97.97 0 0 0 13 12V8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8v4q0 .424.287.713.288.287.713.287m0 9a9.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 22"
+                />
+              </svg>
             </div>
             UNSIGNED
           </button>

test/unit-tests/components/views/rooms/wysiwyg_composer/SendWysiwygComposer-test.tsx

@@ -340,7 +340,14 @@ describe("SendWysiwygComposer", () => {
                 const leftIcon = screen.getByTestId("e2e-icon");
                 // Then
                 expect(leftIcon).toBeInTheDocument();
-                expect(leftIcon).toHaveClass(expectedClass ? `mx_E2EIcon ${expectedClass}` : `mx_E2EIcon`);
+                expect(leftIcon).toHaveClass("mx_E2EIcon");
+                if (expectedClass) {
+                    // eslint-disable-next-line jest/no-conditional-expect
+                    expect(leftIcon.querySelector("svg")).toHaveClass(expectedClass);
+                } else {
+                    // eslint-disable-next-line jest/no-conditional-expect
+                    expect(leftIcon.querySelector("svg")).not.toBeInTheDocument();
+                }
             });
         },
     );