refactor(StatusPickerButton): Component refactor

Component refactor to have a clean and easy-to-read code.
Unnecessary stuff removed.

BREAKING CHANGES: Removed unnecessary properties since the parent already has them.

ui/StatusQ/src/StatusQ/Components/StatusListPicker.qml

@@ -238,7 +238,7 @@ Item {
         bgColor: Theme.palette.primaryColor3
         contentColor: Theme.palette.primaryColor1
         text: picker.selectedItemsText
-        textPixelSize: 13
+        font.pixelSize: 13
         type: StatusPickerButton.Type.Down
 
         onClicked: {

ui/StatusQ/src/StatusQ/Controls/StatusPickerButton.qml

@@ -12,8 +12,7 @@ Button {
     property color bgColor: Theme.palette.baseColor2
     property color contentColor: Theme.palette.baseColor1
     property var type: StatusPickerButton.Type.Next
-    property int lateralMargins: 16
-    property int textPixelSize: 15
+
     /*!
        \qmlproperty StatusImageSettings StatusPickerButton::image
        This property holds the image settings information.
@@ -31,82 +30,54 @@ Button {
 
     implicitWidth: 446
     implicitHeight: 44
-    background: Item {
-        anchors.fill: parent
-        Rectangle {
-            id: background
-            anchors.fill: parent
-            radius: 8
-            color: root.bgColor
-        }   
+    font.pixelSize: 15
+    horizontalPadding: 16
+    spacing: 4
+    icon.width: 16
+    icon.height: 16
+    background:Rectangle {
+        radius: 8
+        color: root.bgColor
     }
-
-    contentItem: Item {
-        anchors.fill: parent
-        state: root.type === StatusPickerButton.Type.Next ? "NEXT" : "DOWN"
-
-        RowLayout {
-            id: rowLabel
-            width: parent.width - icon.width - icon.anchors.rightMargin - icon.anchors.leftMargin
-            anchors.verticalCenter: parent.verticalCenter
+    contentItem: RowLayout {
+        clip: true
+        spacing: root.spacing
+        StatusIcon {
+            icon: "tiny/chevron-down"
+            visible: root.type === StatusPickerButton.Type.Down
+            Layout.alignment: Qt.AlignVCenter
+            color: !Qt.colorEqual(root.contentColor, Theme.palette.baseColor1) ? root.contentColor : Theme.palette.directColor1
+            width: root.icon.width
+            height: root.icon.height
+        }
+        StatusRoundedImage {
+            visible: root.image.source.toString() !== ""
+            Layout.alignment: Qt.AlignVCenter
+            Layout.preferredWidth: root.image.width
+            Layout.preferredHeight: root.image.height
+            image.source: root.image.source
+        }
+        StatusBaseText {
+            Layout.fillWidth: true
+            Layout.alignment: Qt.AlignVCenter
+            font.pixelSize: root.font.pixelSize
+            color: root.contentColor
+            text: root.text
             clip: true
-            spacing: 4
-            StatusRoundedImage {
-                id: rowImage
-                Layout.alignment: Qt.AlignVCenter
-                visible: root.image.source.toString() !== ""
-                Layout.preferredWidth: root.image.width
-                Layout.preferredHeight: root.image.height
-                image.source: root.image.source
-            }
-            StatusBaseText {
-                id: textLabel
-                Layout.alignment: Qt.AlignVCenter
-                Layout.fillWidth: true
-                verticalAlignment: Text.AlignVCenter
-                font.pixelSize: root.textPixelSize
-                color: root.contentColor
-                text: root.text
-                clip: true
-                elide: Text.ElideRight
-            }
+            elide: Text.ElideRight
         }
         StatusIcon {
-            id: icon
-            anchors.verticalCenter: parent.verticalCenter
+            icon: "tiny/chevron-right"
+            visible: root.type === StatusPickerButton.Type.Next
+            Layout.alignment: Qt.AlignVCenter
             color: !Qt.colorEqual(root.contentColor, Theme.palette.baseColor1) ? root.contentColor : Theme.palette.directColor1
+            width: root.icon.width
+            height: root.icon.height
         }
-
-        states: [
-            State {
-                name: "NEXT"
-                PropertyChanges {target: icon; icon: "next"}
-                PropertyChanges {target: icon; anchors.left: undefined }
-                PropertyChanges {target: icon; anchors.right: parent.right }
-                PropertyChanges {target: icon; anchors.rightMargin: root.lateralMargins / 2 }
-                PropertyChanges {target: icon; anchors.leftMargin: root.lateralMargins / 2 }
-                PropertyChanges {target: rowLabel; anchors.left: parent.left }
-                PropertyChanges {target: rowLabel; anchors.right: undefined }
-                PropertyChanges {target: rowLabel; anchors.rightMargin: undefined }
-                PropertyChanges {target: rowLabel; anchors.leftMargin: root.lateralMargins }
-            },
-            State {
-                name: "DOWN"
-                PropertyChanges {target: icon; icon: "chevron-down"}
-                PropertyChanges {target: icon; anchors.left: parent.left }
-                PropertyChanges {target: icon; anchors.right: undefined }
-                PropertyChanges {target: icon; anchors.rightMargin: root.lateralMargins / 2 }
-                PropertyChanges {target: icon; anchors.leftMargin: root.lateralMargins }
-                PropertyChanges {target: rowLabel; anchors.left: icon.right }
-                PropertyChanges {target: rowLabel; anchors.right: undefined }
-                PropertyChanges {target: rowLabel; anchors.rightMargin: root.lateralMargins / 2 }
-                PropertyChanges {target: rowLabel; anchors.leftMargin: undefined }
-            }
-        ]
     }
 
+    // TODO: To remove when switch to Qt 5.15
     MouseArea {
-        id: mouseArea
         anchors.fill: parent
         hoverEnabled: true
         cursorShape: Qt.PointingHandCursor