feat: add unencrypted icon for unencrypted rooms

Author: florianduros

res/css/views/rooms/_MessageComposer.pcss

@@ -82,6 +82,11 @@ Please see LICENSE files in the repository root for full details.
     height: 12px;
 }
 
+.mx_MessageComposer_e2eIcon-new {
+    position: absolute;
+    left: 23px;
+}
+
 .mx_MessageComposer_noperm_error {
     width: 100%;
     height: 60px;
@@ -336,4 +341,8 @@ Please see LICENSE files in the repository root for full details.
     .mx_MessageComposer_e2eIcon {
         left: 0;
     }
+
+    .mx_MessageComposer_e2eIcon-new {
+        left: 5px;
+    }
 }

src/components/views/rooms/MessageComposer.tsx

@@ -19,6 +19,7 @@ import {
 import { type Optional } from "matrix-events-sdk";
 import { Tooltip } from "@vector-im/compound-web";
 import { logger } from "matrix-js-sdk/src/logger";
+import LockOffIcon from "@vector-im/compound-design-tokens/assets/web/icons/lock-off";
 
 import { _t } from "../../../languageHandler";
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
@@ -525,12 +526,25 @@ export class MessageComposer extends React.Component<IProps, IState> {
     };
 
     public render(): React.ReactNode {
-        const hasE2EIcon = Boolean(!this.state.isWysiwygLabEnabled && this.props.e2eStatus === E2EStatus.Warning);
-        const e2eIcon = hasE2EIcon && (
-            <div className="mx_MessageComposer_e2eIconWrapper">
-                <E2EIcon key="e2eIcon" status={this.props.e2eStatus!} className="mx_MessageComposer_e2eIcon" />
-            </div>
-        );
+        const isUnencrypted = !this.props.e2eStatus;
+        const encryptionWarning = this.props.e2eStatus === E2EStatus.Verified;
+        const hasE2EIcon = Boolean(!this.state.isWysiwygLabEnabled && (encryptionWarning || isUnencrypted));
+
+        let e2eIcon: ReactNode;
+        if (hasE2EIcon) {
+            e2eIcon = encryptionWarning ? (
+                <div className="mx_MessageComposer_e2eIconWrapper">
+                    <E2EIcon key="e2eIcon" status={this.props.e2eStatus!} className="mx_MessageComposer_e2eIcon" />
+                </div>
+            ) : (
+                <LockOffIcon
+                    className="mx_MessageComposer_e2eIcon-new"
+                    width="12"
+                    height="12"
+                    color="var(--cpd-color-icon-info-primary)"
+                />
+            );
+        }
 
         const controls: ReactNode[] = [];
         const menuPosition = this.getMenuPosition();