Improve styling of emote messages

resources/qml/delegates/MessageDelegate.qml

@@ -32,7 +32,10 @@ Item {
 		}
 		DelegateChoice {
 			roleValue: MtxEvent.EmoteMessage
-			TextMessage {}
+			NoticeMessage {
+				formatted: chat.model.escapeEmoji(modelData.userName) + " " + model.data.formattedBody
+				color: chat.model.userColor(modelData.userId, colors.window)
+			}
 		}
 		DelegateChoice {
 			roleValue: MtxEvent.ImageMessage
@@ -69,19 +72,19 @@ Item {
 		DelegateChoice {
 			roleValue: MtxEvent.Name
 			NoticeMessage {
-				notice: model.data.roomName ? qsTr("room name changed to: %1").arg(model.data.roomName) : qsTr("removed room name")
+				text: model.data.roomName ? qsTr("room name changed to: %1").arg(model.data.roomName) : qsTr("removed room name")
 			}
 		}
 		DelegateChoice {
 			roleValue: MtxEvent.Topic
 			NoticeMessage {
-				notice: model.data.roomTopic ? qsTr("topic changed to: %1").arg(model.data.roomTopic) : qsTr("removed topic")
+				text: model.data.roomTopic ? qsTr("topic changed to: %1").arg(model.data.roomTopic) : qsTr("removed topic")
 			}
 		}
 		DelegateChoice {
 			roleValue: MtxEvent.Member
 			NoticeMessage {
-				notice: timelineManager.timeline.formatMemberEvent(model.data.id);
+				text: timelineManager.timeline.formatMemberEvent(model.data.id);
 			}
 		}
 		DelegateChoice {

resources/qml/delegates/NoticeMessage.qml

@@ -1,9 +1,4 @@
-import ".."
+TextMessage {
-
-MatrixText {
-	property string notice: model.data.formattedBody.replace("<pre>", "<pre style='white-space: pre-wrap'>")
-	text: notice
-	width: parent ? parent.width : undefined
 	font.italic: true
 	color: inactiveColors.text
 }

resources/qml/delegates/TextMessage.qml

@@ -1,6 +1,7 @@
 import ".."
 
 MatrixText {
-	text: model.data.formattedBody.replace("<pre>", "<pre style='white-space: pre-wrap'>")
+	property string formatted: model.data.formattedBody
+	text: formatted.replace("<pre>", "<pre style='white-space: pre-wrap'>")
 	width: parent ? parent.width : undefined
 }