fix(StatusMessage): Updated component to QQC2 Control and as per desing

Fixes #7318

ui/StatusQ/src/StatusQ/Components/StatusMessage.qml

@@ -9,7 +9,7 @@ import StatusQ.Controls 0.1
 
 import "./private/statusMessage"
 
-Rectangle {
+Control {
     id: root
 
     enum ContentType {
@@ -122,6 +122,8 @@ Rectangle {
                     + messageLayout.anchors.topMargin
                     + messageLayout.anchors.bottomMargin
 
+    hoverEnabled: (!root.isActiveMessage && !root.disableHover)
+    background: Rectangle {
         color: {
             if (root.overrideBackground)
                 return root.overrideBackgroundColor;
@@ -129,7 +131,7 @@ Rectangle {
             if (root.editMode)
                 return Theme.palette.baseColor2;
 
-        if (hoverHandler.hovered || root.isActiveMessage) {
+            if (root.hovered || root.isActiveMessage) {
                 if (root.hasMention)
                     return Theme.palette.mentionColor3;
                 if (root.isPinned)
@@ -143,7 +145,9 @@ Rectangle {
                 return Theme.palette.pinColor3;
             return "transparent";
         }
+    }
 
+    contentItem: Item {
         Rectangle {
             anchors {
                 top: parent.top
@@ -202,16 +206,9 @@ Rectangle {
             anchors.fill: parent
         }
 
-    HoverHandler {
-        id: hoverHandler
-        enabled: !root.isActiveMessage && !root.disableHover
-    }
-
         ColumnLayout {
             id: messageLayout
             anchors.fill: parent
-        anchors.topMargin: 2
-        anchors.bottomMargin: 2
 
             Loader {
                 Layout.fillWidth: true
@@ -236,6 +233,7 @@ Rectangle {
                     implicitWidth: root.messageDetails.sender.profileImage.assetSettings.width
                     implicitHeight: profileImage.visible ? profileImage.height : 0
                     Layout.alignment: Qt.AlignTop
+                    Layout.topMargin: 2
                     StatusSmartIdenticon {
                         id: profileImage
                         active: root.showHeader
@@ -256,7 +254,7 @@ Rectangle {
 
                 ColumnLayout {
 
-                spacing: 4
+                    spacing: 0
                     Layout.alignment: Qt.AlignTop
                     Layout.fillWidth: true
 
@@ -341,7 +339,7 @@ Rectangle {
                         visible: active
                         sourceComponent: StatusAudioMessage {
                             audioSource: root.messageDetails.messageContent
-                        hovered: hoverHandler.hovered
+                            hovered: root.hovered
                             audioMessageInfoText: root.audioMessageInfoText
                         }
                     }
@@ -412,7 +410,8 @@ Rectangle {
             anchors.rightMargin: 20
             anchors.top: parent.top
             anchors.topMargin: -8
-        visible: hoverHandler.hovered && !root.hideQuickActions
+            visible: root.hovered && !root.hideQuickActions
+        }
     }
 
     ListModel {

ui/StatusQ/src/StatusQ/Components/private/statusMessage/StatusTextMessage.qml

@@ -78,6 +78,7 @@ Item {
         selectedTextColor: Theme.palette.directColor1
         selectionColor: Theme.palette.primaryColor3
         color: Theme.palette.directColor1
+        verticalAlignment: TextEdit.AlignVCenter
         font.family: Theme.palette.baseFont.name
         font.pixelSize: Theme.primaryTextFontSize
         textFormat: Text.RichText

ui/imports/shared/views/chat/MessageView.qml

@@ -385,7 +385,8 @@ Loader {
             StatusMessage {
                 id: delegate
                 Layout.fillWidth: true
-
+                Layout.topMargin: 2
+                Layout.bottomMargin: 2
                 function convertContentType(value) {
                     switch (value) {
                     case Constants.messageContentType.messageType: