Change black to primary.

Improvements on ImageDelegate.
Change reply style.

imports/Spectral/Component/AutoTextField.qml

@@ -1,6 +1,8 @@
 import QtQuick 2.12
 import QtQuick.Controls 2.12
 
+import Spectral.Setting 0.1
+
 TextField {
     selectByMouse: true
 }

imports/Spectral/Component/Timeline/ImageDelegate.qml

@@ -9,6 +9,7 @@ import Spectral 0.1
 import Spectral.Setting 0.1
 
 import Spectral.Component 2.0
+import Spectral.Effect 2.0
 import Spectral.Font 0.1
 
 ColumnLayout {
@@ -69,16 +70,23 @@ ColumnLayout {
             verticalAlignment: Label.AlignVCenter
         }
 
+        BusyIndicator {
+            Layout.preferredWidth: 64
+            Layout.preferredHeight: 64
+
+            visible: img.status == Image.Loading
+        }
+
         Image {
             Layout.maximumWidth: messageListView.width - (!sentByMe ? 32 + messageRow.spacing : 0) - 48
 
             id: img
 
-            source: downloaded ? progressInfo.localPath : "image://mxc/" +
+            source: "image://mxc/" +
                                  (content.info && content.info.thumbnail_info ?
                                      content.thumbnailMediaId : content.mediaId)
-            sourceSize.width: 200
-            sourceSize.height: 200
+            sourceSize.width: messageListView.width * 0.6
+            sourceSize.height: messageListView.height
 
             layer.enabled: true
             layer.effect: OpacityMask {
@@ -94,12 +102,13 @@ ColumnLayout {
 
                 color: "transparent"
                 radius: 24
+                antialiasing: true
 
-                border.width: 2
+                border.width: 4
                 border.color: MPalette.banner
             }
 
-            AutoMouseArea {
+            RippleEffect {
                 anchors.fill: parent
 
                 id: messageMouseArea

imports/Spectral/Component/Timeline/MessageDelegate.qml

@@ -7,6 +7,7 @@ import Spectral 0.1
 import Spectral.Setting 0.1
 
 import Spectral.Component 2.0
+import Spectral.Effect 2.0
 import Spectral.Font 0.1
 
 ColumnLayout {
@@ -74,6 +75,7 @@ ColumnLayout {
             background: Rectangle {
                 color: sentByMe ? "#009DC2" : eventType === "notice" ? "#4285F4" : "#673AB7"
                 radius: 18
+                antialiasing: true
 
                 AutoMouseArea {
                     anchors.fill: parent
@@ -123,19 +125,10 @@ ColumnLayout {
 
                     padding: 8
 
-                    background: Item {
-                        Rectangle {
-                            anchors.leftMargin: 0
-                            width: 2
-                            height: parent.height
+                    background: RippleEffect {
+                        anchors.fill: parent
 
-                            color: "white"
-                        }
-                        MouseArea {
-                            anchors.fill: parent
-
-                            onClicked: goToEvent(replyEventId)
-                        }
+                        onPrimaryClicked: goToEvent(replyEventId)
                     }
 
                     contentItem: RowLayout {
@@ -178,6 +171,14 @@ ColumnLayout {
                     }
                 }
 
+                Rectangle {
+                    Layout.fillWidth: true
+                    Layout.preferredHeight: 1
+
+                    visible: replyEventId || ""
+                    color: "white"
+                }
+
                 TextEdit {
                     Layout.fillWidth: true
 

imports/Spectral/Component/Timeline/StateDelegate.qml

@@ -23,5 +23,6 @@ Label {
     background: Rectangle {
         color: MPalette.banner
         radius: 4
+        antialiasing: true
     }
 }