From a69d6befe4464d3069387d4afbf95a7774b4eb5f Mon Sep 17 00:00:00 2001
From: Pascal Precht <pascal.precht@gmail.com>
Date: Thu, 28 Jan 2021 12:17:46 +0100
Subject: [PATCH] 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.
---
 .../Chat/components/GroupChatPopup.qml        | 75 +++++--------------
 .../Chat/components/GroupInfoPopup.qml        | 26 ++-----
 2 files changed, 27 insertions(+), 74 deletions(-)

diff --git a/ui/app/AppLayouts/Chat/components/GroupChatPopup.qml b/ui/app/AppLayouts/Chat/components/GroupChatPopup.qml
index 2e6550bf83..f1e28b995a 100644
--- a/ui/app/AppLayouts/Chat/components/GroupChatPopup.qml
+++ b/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,71 +147,34 @@ 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"
-            states: [
-                State {
-                    name: "inactive"
-                    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
-                        searchBox.text = ""
-                        groupName.forceActiveFocus(Qt.MouseFocusReason)
-                }
+            icon.name: "arrow-right"
+            icon.width: 20
+            icon.height: 16
+            enabled: !!pubKeys.length
+            onClicked : {
+                if(pubKeys.length > 0)
+                    selectChatMembers = false
+                    searchBox.text = ""
+                    groupName.forceActiveFocus(Qt.MouseFocusReason)
             }
         }
 
-        Button {
+        StatusRoundButton {
             id: btnBack
             visible: !selectChatMembers
-            width: 44
-            height: 44
             anchors.bottom: parent.bottom
             anchors.left: parent.left
-            SVGImage {
-                source: "../../../img/arrow-left-btn-active.svg"
-                width: 50
-                height: 50
-            }
-            background: Rectangle {
-                color: "transparent"
-            }
-            MouseArea {
-                cursorShape: Qt.PointingHandCursor
-                anchors.fill: parent
-                onClicked : {
-                    selectChatMembers = true
-                }
+            icon.name: "arrow-right"
+            icon.width: 20
+            icon.height: 16
+            rotation: 180
+            onClicked : {
+                selectChatMembers = true
             }
         }
 
diff --git a/ui/app/AppLayouts/Chat/components/GroupInfoPopup.qml b/ui/app/AppLayouts/Chat/components/GroupInfoPopup.qml
index d80a50ab87..9d70081396 100644
--- a/ui/app/AppLayouts/Chat/components/GroupInfoPopup.qml
+++ b/ui/app/AppLayouts/Chat/components/GroupInfoPopup.qml
@@ -310,28 +310,18 @@ ModalPopup {
           }
         }
 
-        Button {
+        StatusRoundButton {
             id: btnBack
             visible: addMembers
-            width: 44
-            height: 44
             anchors.bottom: parent.bottom
             anchors.left: parent.left
-            SVGImage {
-                source: "../../../img/arrow-left-btn-active.svg"
-                width: 50
-                height: 50
-            }
-            background: Rectangle {
-                color: "transparent"
-            }
-            MouseArea {
-                cursorShape: Qt.PointingHandCursor
-                anchors.fill: parent
-                onClicked : {
-                    addMembers = false;
-                    resetSelectedMembers();
-                }
+            icon.name: "arrow-right"
+            icon.width: 20
+            icon.height: 16
+            rotation: 180
+            onClicked : {
+                addMembers = false;
+                resetSelectedMembers();
             }
         }