Update to thread UI (#7714)

res/css/views/right_panel/_ThreadPanel.scss

@@ -302,7 +302,7 @@ limitations under the License.
         &::after {
             content: "";
             border: inherit;
-            border-bottom-color: $background;
+            border-bottom-color: $menu-bg-color;
             position: absolute;
             top: 1px;
             left: -8px;

src/components/views/messages/SenderProfile.tsx

@@ -24,11 +24,13 @@ import { getUserNameColorClass } from '../../../utils/FormattingUtils';
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 import UserIdentifier from '../../../customisations/UserIdentifier';
+import { TileShape } from '../rooms/EventTile';
 
 interface IProps {
     mxEvent: MatrixEvent;
     onClick?(): void;
     enableFlair: boolean;
+    tileShape?: TileShape;
 }
 
 interface IState {
@@ -109,7 +111,7 @@ export default class SenderProfile extends React.Component<IProps, IState> {
         const displayName = mxEvent.sender?.rawDisplayName || mxEvent.getSender() || "";
         const mxid = mxEvent.sender?.userId || mxEvent.getSender() || "";
 
-        if (msgtype === MsgType.Emote) {
+        if (msgtype === MsgType.Emote && this.props.tileShape !== TileShape.ThreadPanel) {
             return null; // emote message must include the name so don't duplicate it
         }
 

src/components/views/rooms/EventTile.tsx

@@ -870,6 +870,9 @@ export default class EventTile extends React.Component<IProps, IState> {
 
     private shouldHighlight(): boolean {
         if (this.props.forExport) return false;
+        if (this.props.tileShape === TileShape.Notif) return false;
+        if (this.props.tileShape === TileShape.ThreadPanel) return false;
+
         const actions = this.context.getPushActionsForEvent(this.props.mxEvent.replacingEvent() || this.props.mxEvent);
         if (!actions || !actions.tweaks) { return false; }
 
@@ -1170,7 +1173,7 @@ export default class EventTile extends React.Component<IProps, IState> {
             mx_EventTile_12hr: this.props.isTwelveHour,
             // Note: we keep the `sending` state class for tests, not for our styles
             mx_EventTile_sending: !isEditing && isSending,
-            mx_EventTile_highlight: this.props.tileShape === TileShape.Notif ? false : this.shouldHighlight(),
+            mx_EventTile_highlight: this.shouldHighlight(),
             mx_EventTile_selected: this.props.isSelectedEvent,
             mx_EventTile_continuation: isContinuation || eventType === EventType.CallInvite,
             mx_EventTile_last: this.props.last,
@@ -1206,7 +1209,7 @@ export default class EventTile extends React.Component<IProps, IState> {
         let avatarSize;
         let needsSenderProfile;
 
-        if (this.props.tileShape === TileShape.Notif) {
+        if (this.props.tileShape === TileShape.Notif || this.props.tileShape === TileShape.ThreadPanel) {
             avatarSize = 24;
             needsSenderProfile = true;
         } else if (tileHandler === 'messages.RoomCreate' || isBubbleMessage) {
@@ -1259,9 +1262,14 @@ export default class EventTile extends React.Component<IProps, IState> {
                 sender = <SenderProfile onClick={this.onSenderProfileClick}
                     mxEvent={this.props.mxEvent}
                     enableFlair={this.props.enableFlair}
+                    tileShape={this.props.tileShape}
                 />;
             } else {
-                sender = <SenderProfile mxEvent={this.props.mxEvent} enableFlair={this.props.enableFlair} />;
+                sender = <SenderProfile
+                    mxEvent={this.props.mxEvent}
+                    enableFlair={this.props.enableFlair}
+                    tileShape={this.props.tileShape}
+                />;
             }
         }