Fix PR UI defects

res/css/views/rooms/_MessageComposer.scss

@@ -358,12 +358,16 @@ limitations under the License.
     margin-right: 0;
 
     .mx_MessageComposer_wrapper {
-        padding: 0;
+        padding: 0 0 0 25px;
     }
 
     .mx_MessageComposer_button:last-child {
         margin-right: 0;
     }
+
+    .mx_MessageComposer_e2eIcon {
+        left: 0;
+    }
 }
 
 .mx_MessageComposer_Menu .mx_CallContextMenu_item {

src/components/structures/RightPanel.tsx

@@ -53,6 +53,7 @@ import PinnedMessagesCard from "../views/right_panel/PinnedMessagesCard";
 import { throttle } from 'lodash';
 import SpaceStore from "../../stores/SpaceStore";
 import { RoomPermalinkCreator } from '../../utils/permalinks/Permalinks';
+import { E2EStatus } from '../../utils/ShieldUtils';
 
 interface IProps {
     room?: Room; // if showing panels for a given room, this is set
@@ -60,6 +61,7 @@ interface IProps {
     user?: User; // used if we know the user ahead of opening the panel
     resizeNotifier: ResizeNotifier;
     permalinkCreator?: RoomPermalinkCreator;
+    e2eStatus?: E2EStatus;
 }
 
 interface IState {
@@ -319,7 +321,8 @@ export default class RightPanel extends React.Component<IProps, IState> {
                     resizeNotifier={this.props.resizeNotifier}
                     onClose={this.onClose}
                     mxEvent={this.state.event}
-                    permalinkCreator={this.props.permalinkCreator} />;
+                    permalinkCreator={this.props.permalinkCreator}
+                    e2eStatus={this.props.e2eStatus} />;
                 break;
 
             case RightPanelPhases.ThreadPanel:

src/components/structures/RoomView.tsx

@@ -2054,7 +2054,8 @@ export default class RoomView extends React.Component<IProps, IState> {
             ? <RightPanel
                 room={this.state.room}
                 resizeNotifier={this.props.resizeNotifier}
-                permalinkCreator={this.getPermalinkCreatorForRoom(this.state.room)} />
+                permalinkCreator={this.getPermalinkCreatorForRoom(this.state.room)}
+                e2eStatus={this.state.e2eStatus} />
             : null;
 
         const timelineClasses = classNames("mx_RoomView_timeline", {

src/components/structures/ThreadView.tsx

@@ -33,6 +33,7 @@ import { ActionPayload } from '../../dispatcher/payloads';
 import { SetRightPanelPhasePayload } from '../../dispatcher/payloads/SetRightPanelPhasePayload';
 import { Action } from '../../dispatcher/actions';
 import { MatrixClientPeg } from '../../MatrixClientPeg';
+import { E2EStatus } from '../../utils/ShieldUtils';
 
 interface IProps {
     room: Room;
@@ -40,6 +41,7 @@ interface IProps {
     resizeNotifier: ResizeNotifier;
     mxEvent: MatrixEvent;
     permalinkCreator?: RoomPermalinkCreator;
+    e2eStatus?: E2EStatus;
 }
 
 interface IState {
@@ -144,6 +146,7 @@ export default class ThreadView extends React.Component<IProps, IState> {
                     replyToEvent={this.state?.thread?.replyToEvent}
                     showReplyPreview={false}
                     permalinkCreator={this.props.permalinkCreator}
+                    e2eStatus={this.props.e2eStatus}
                     compact={true}
                 />
             </BaseCard>

src/components/views/rooms/MessageComposer.tsx

@@ -53,6 +53,7 @@ import EmojiPicker from '../emojipicker/EmojiPicker';
 import MemberStatusMessageAvatar from "../avatars/MemberStatusMessageAvatar";
 import UIStore, { UI_EVENTS } from '../../../stores/UIStore';
 
+let instanceCount = 0;
 const NARROW_MODE_BREAKPOINT = 500;
 
 interface IComposerAvatarProps {
@@ -216,6 +217,7 @@ export default class MessageComposer extends React.Component<IProps, IState> {
     private messageComposerInput: SendMessageComposer;
     private voiceRecordingButton: VoiceRecordComposerTile;
     private ref: React.RefObject<HTMLDivElement> = createRef();
+    private instanceId: number;
 
     static defaultProps = {
         replyInThread: false,
@@ -236,14 +238,16 @@ export default class MessageComposer extends React.Component<IProps, IState> {
             isMenuOpen: false,
             showStickers: false,
         };
+
+        this.instanceId = instanceCount++;
     }
 
     componentDidMount() {
         this.dispatcherRef = dis.register(this.onAction);
         MatrixClientPeg.get().on("RoomState.events", this.onRoomStateEvents);
         this.waitForOwnMember();
-        UIStore.instance.trackElementDimensions("MessageComposer", this.ref.current);
+        UIStore.instance.trackElementDimensions(`MessageComposer${this.instanceId}`, this.ref.current);
-        UIStore.instance.on("MessageComposer", this.onResize);
+        UIStore.instance.on(`MessageComposer${this.instanceId}`, this.onResize);
     }
 
     private onResize = (type: UI_EVENTS, entry: ResizeObserverEntry) => {
@@ -291,8 +295,8 @@ export default class MessageComposer extends React.Component<IProps, IState> {
         }
         VoiceRecordingStore.instance.off(UPDATE_EVENT, this.onVoiceStoreUpdate);
         dis.unregister(this.dispatcherRef);
-        UIStore.instance.stopTrackingElementDimensions("MessageComposer");
+        UIStore.instance.stopTrackingElementDimensions(`MessageComposer${this.instanceId}`);
-        UIStore.instance.removeListener("MessageComposer", this.onResize);
+        UIStore.instance.removeListener(`MessageComposer${this.instanceId}`, this.onResize);
     }
 
     private onRoomStateEvents = (ev, state) => {
@@ -342,7 +346,11 @@ export default class MessageComposer extends React.Component<IProps, IState> {
 
     private renderPlaceholderText = () => {
         if (this.props.replyToEvent) {
-            if (this.props.e2eStatus) {
+            if (this.props.replyInThread && this.props.e2eStatus) {
+                return _t('Reply to encrypted thread…');
+            } else if (this.props.replyInThread) {
+                return _t('Reply to thread…');
+            } else if (this.props.e2eStatus) {
                 return _t('Send an encrypted reply…');
             } else {
                 return _t('Send a reply…');
@@ -419,17 +427,17 @@ export default class MessageComposer extends React.Component<IProps, IState> {
         const buttons = new Map<string, JSX.Element>();
         if (!this.state.haveRecording) {
             buttons.set(
-                _t("Send File"),
+                _t("Send a file"),
                 <UploadButton key="controls_upload" roomId={this.props.room.roomId} />,
             );
             buttons.set(
-                _t("Show Emojis"),
+                _t("Add emoji"),
                 <EmojiButton key="emoji_button" addEmoji={this.addEmoji} menuPosition={menuPosition} />,
             );
         }
         if (this.shouldShowStickerPicker()) {
             buttons.set(
-                _t("Show Stickers"),
+                _t("Send a sticker"),
                 <AccessibleTooltipButton
                     id='stickersButton'
                     key="controls_stickers"
@@ -441,7 +449,7 @@ export default class MessageComposer extends React.Component<IProps, IState> {
         }
         if (!this.state.haveRecording && !this.state.narrowMode) {
             buttons.set(
-                _t("Send voice message"),
+                _t("Send a voice message"),
                 <AccessibleTooltipButton
                     className="mx_MessageComposer_button mx_MessageComposer_voiceMessage"
                     onClick={() => this.voiceRecordingButton?.onRecordStartEndClick()}
@@ -450,8 +458,9 @@ export default class MessageComposer extends React.Component<IProps, IState> {
             );
         }
 
+        const buttonsArray = Array.from(buttons.values());
         if (!this.state.narrowMode) {
-            return Array.from(buttons.values());
+            return buttonsArray;
         } else {
             const classnames = classNames({
                 mx_MessageComposer_button: true,
@@ -460,11 +469,11 @@ export default class MessageComposer extends React.Component<IProps, IState> {
             });
 
             return <>
-                { buttons[0] }
+                { buttonsArray[0] }
                 <AccessibleTooltipButton
                     className={classnames}
                     onClick={this.toggleButtonMenu}
-                    title={_t("Composer menu")}
+                    title={_t("More options")}
                     tooltip={false}
                 />
                 { this.state.isMenuOpen && (

src/i18n/strings/en_EN.json

@@ -1560,16 +1560,20 @@
     "Send message": "Send message",
     "Emoji picker": "Emoji picker",
     "Upload file": "Upload file",
+    "Reply to encrypted thread…": "Reply to encrypted thread…",
+    "Reply to thread…": "Reply to thread…",
     "Send an encrypted reply…": "Send an encrypted reply…",
     "Send a reply…": "Send a reply…",
     "Send an encrypted message…": "Send an encrypted message…",
     "Send a message…": "Send a message…",
-    "Send File": "Send File",
+    "Send a file": "Send a file",
-    "Show Emojis": "Show Emojis",
+    "Add emoji": "Add emoji",
-    "Show Stickers": "Show Stickers",
+    "Send a sticker": "Send a sticker",
     "Hide Stickers": "Hide Stickers",
+    "Show Stickers": "Show Stickers",
+    "Send a voice message": "Send a voice message",
     "Send voice message": "Send voice message",
-    "Composer menu": "Composer menu",
+    "More options": "More options",
     "The conversation continues here.": "The conversation continues here.",
     "This room has been replaced and is no longer active.": "This room has been replaced and is no longer active.",
     "You do not have permission to post to this room": "You do not have permission to post to this room",