uiux: Refactor chat images so they look like they've been designed

Fixes: #1114

ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/ImageLoader.qml

@@ -1,10 +1,12 @@
 import QtQuick 2.3
+import QtGraphicalEffects 1.13
 import "../../../../../shared"
 import "../../../../../imports"
 
 Item {
     property int verticalPadding: 0
     property int imageWidth: 350
+    property bool isCurrentUser: false
     property url source
     signal clicked(string source)
 
@@ -49,6 +51,39 @@ Item {
             }
         }
 
+        layer.enabled: true
+        layer.effect: OpacityMask {
+            maskSource: Item {
+                width: imageMessage.width
+                height: imageMessage.height
+
+                Rectangle {
+                    anchors.top: parent.top
+                    anchors.left: parent.left
+                    width: imageMessage.width
+                    height: imageMessage.height
+                    radius: 16
+                }
+
+                Rectangle {
+                    anchors.bottom: parent.bottom
+                    anchors.left: parent.left
+                    width: 32
+                    height: 32
+                    radius: 4
+                    visible: !imageContainer.isCurrentUser
+                }
+                Rectangle {
+                    anchors.bottom: parent.bottom
+                    anchors.right: parent.right
+                    width: 32
+                    height: 32
+                    radius: 4
+                    visible: imageContainer.isCurrentUser
+                }
+            }
+        }
+
         MouseArea {
             cursorShape: Qt.PointingHandCursor
             anchors.fill: parent

ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/NormalMessage.qml

@@ -35,13 +35,21 @@ Item {
     }
 
     Rectangle {
-        property int chatVerticalPadding: 7
+        property int chatVerticalPadding: isImage ? 4 : 7
-        property int chatHorizontalPadding: 12
+        property int chatHorizontalPadding: isImage ? 0 : 12
         property bool longReply: chatReply.visible && repliedMessageContent.length > 54
         property bool longChatText: chatsModel.plainText(message).length > 54
 
         id: chatBox
-        color: isSticker ? Style.current.background  : (isCurrentUser ? Style.current.blue : Style.current.secondaryBackground)
+        color: {
+            if (isSticker) {
+                return Style.current.background 
+            }
+            if (isImage) {
+                return "transparent"
+            }
+            return isCurrentUser ? Style.current.primary : Style.current.secondaryBackground
+        }
         border.color: isSticker ? Style.current.border : Style.current.transparent
         border.width: 1
         height: {
@@ -131,6 +139,7 @@ Item {
                         id: chatImageComponent
                         imageSource: image
                         imageWidth: 250
+                        isCurrentUser: messageItem.isCurrentUser
                     }
                 }
             }