refactor: replace custom buttons with StatusRoundButton

There are some places in the application where a custom round
button has been implemented, which essentially can be realized
using our `StatusRoundButton`. This commit addresses those cases.

ui/app/AppLayouts/Chat/components/GroupChatPopup.qml

@@ -4,6 +4,7 @@ import QtQuick.Layouts 1.3
 import QtQml.Models 2.3
 import "../../../../imports"
 import "../../../../shared"
+import "../../../../shared/status"
 import "./"
 
 ModalPopup {
@@ -21,7 +22,6 @@ ModalPopup {
         selectChatMembers = true;
         memberCount = 1;
         pubKeys = [];
-        btnSelectMembers.state = "inactive";
 
         contactList.membersData.clear();
 
@@ -139,7 +139,7 @@ ModalPopup {
                 }
             }
             memberCount = pubKeys.length + 1;
-            btnSelectMembers.state = pubKeys.length > 0 ? "active" : "inactive"
+            btnSelectMembers.enabled = pubKeys.length > 0
         }
     }
 
@@ -147,41 +147,15 @@ ModalPopup {
         width: parent.width
         height: btnSelectMembers.height
 
-        Button {
+        StatusRoundButton {
             id: btnSelectMembers
             visible: selectChatMembers
-            width: 44
-            height: 44
             anchors.bottom: parent.bottom
             anchors.right: parent.right
-            state: "inactive"
+            icon.name: "arrow-right"
-            states: [
+            icon.width: 20
-                State {
+            icon.height: 16
-                    name: "inactive"
+            enabled: !!pubKeys.length
-                    PropertyChanges {
-                        target: btnSelectMembersImg
-                        source: "../../../img/arrow-right-btn-inactive.svg"
-                    }
-                },
-                State {
-                    name: "active"
-                    PropertyChanges {
-                        target: btnSelectMembersImg
-                        source: "../../../img/arrow-right-btn-active.svg"
-                    }
-                }
-            ]
-            SVGImage {
-                id: btnSelectMembersImg
-                width: 50
-                height: 50
-            }
-            background: Rectangle {
-                color: "transparent"
-            }
-            MouseArea {
-                cursorShape: Qt.PointingHandCursor
-                anchors.fill: parent
             onClicked : {
                 if(pubKeys.length > 0)
                     selectChatMembers = false
@@ -189,31 +163,20 @@ ModalPopup {
                     groupName.forceActiveFocus(Qt.MouseFocusReason)
             }
         }
-        }
 
-        Button {
+        StatusRoundButton {
             id: btnBack
             visible: !selectChatMembers
-            width: 44
-            height: 44
             anchors.bottom: parent.bottom
             anchors.left: parent.left
-            SVGImage {
+            icon.name: "arrow-right"
-                source: "../../../img/arrow-left-btn-active.svg"
+            icon.width: 20
-                width: 50
+            icon.height: 16
-                height: 50
+            rotation: 180
-            }
-            background: Rectangle {
-                color: "transparent"
-            }
-            MouseArea {
-                cursorShape: Qt.PointingHandCursor
-                anchors.fill: parent
             onClicked : {
                 selectChatMembers = true
             }
         }
-        }
 
         StyledButton {
             visible: !selectChatMembers

ui/app/AppLayouts/Chat/components/GroupInfoPopup.qml

@@ -310,30 +310,20 @@ ModalPopup {
           }
         }
 
-        Button {
+        StatusRoundButton {
             id: btnBack
             visible: addMembers
-            width: 44
-            height: 44
             anchors.bottom: parent.bottom
             anchors.left: parent.left
-            SVGImage {
+            icon.name: "arrow-right"
-                source: "../../../img/arrow-left-btn-active.svg"
+            icon.width: 20
-                width: 50
+            icon.height: 16
-                height: 50
+            rotation: 180
-            }
-            background: Rectangle {
-                color: "transparent"
-            }
-            MouseArea {
-                cursorShape: Qt.PointingHandCursor
-                anchors.fill: parent
             onClicked : {
                 addMembers = false;
                 resetSelectedMembers();
             }
         }
-        }
 
         StyledButton {
           id: btnSelectMembers