Add user color as background.

imports/Spectral/Component/Timeline/StateDelegate.qml

@@ -9,6 +9,19 @@ import Spectral.Setting 0.1
 Control {
     padding: 8
 
+    contentItem: RowLayout {
+        id: row
+
+        Control {
+            id: authorControl
+
+            padding: 4
+
+            background: Rectangle {
+                radius: height / 2
+                color: author.color
+            }
+
             contentItem: RowLayout {
                 Avatar {
                     Layout.preferredWidth: 24
@@ -19,14 +32,25 @@ Control {
                 }
 
                 Label {
-            Layout.fillWidth: true
+                    Layout.alignment: Qt.AlignVCenter
-            Layout.maximumWidth: messageListView.width - 48
 
-            text: "<b>" + author.displayName + "</b> " + display + " • " + Qt.formatTime(time, "hh:mm AP")
+                    text: author.displayName
+                    font.pixelSize: 13
+                    font.weight: Font.Medium
+                    color: "white"
+                    rightPadding: 8
+                }
+            }
+        }
+
+        Label {
+            Layout.fillWidth: true
+            Layout.maximumWidth: messageListView.width - authorControl.width - row.spacing
+
+            text: display + " • " + Qt.formatTime(time, "hh:mm AP")
             color: MPalette.foreground
             font.pixelSize: 13
             font.weight: Font.Medium
-            textFormat: Label.StyledText
 
             wrapMode: Label.Wrap
             onLinkActivated: Qt.openUrlExternally(link)

imports/Spectral/Panel/RoomPanelInput.qml

@@ -13,6 +13,7 @@ import Spectral 0.1
 
 Control {
     property alias isReply: replyItem.visible
+    property bool isReaction: false
     property var replyModel
     readonly property var replyUser: replyModel ? replyModel.author : null
     readonly property string replyEventID: replyModel ? replyModel.eventId : ""
@@ -53,15 +54,36 @@ Control {
 
             spacing: 8
 
-            Avatar {
+            Control {
-                Layout.preferredWidth: 32
-                Layout.preferredHeight: 32
                 Layout.alignment: Qt.AlignTop
 
+                padding: 4
+
+                background: Rectangle {
+                    radius: height / 2
+                    color: replyUser ? replyUser.color : MPalette.accent
+                }
+
+                contentItem: RowLayout {
+                    Avatar {
+                        Layout.preferredWidth: 24
+                        Layout.preferredHeight: 24
+
                         source: replyUser ? replyUser.avatarMediaId : ""
                         hint: replyUser ? replyUser.displayName : "No name"
                     }
 
+                    Label {
+                        Layout.alignment: Qt.AlignVCenter
+
+                        text: replyUser ? replyUser.displayName : "No name"
+                        color: "white"
+                        font.weight: Font.Medium
+                        rightPadding: 8
+                    }
+                }
+            }
+
             TextEdit {
                 Layout.fillWidth: true