refactor: Replace and remove StatusRoundButton under ui/shared/status

closes #3898

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

@@ -163,6 +163,7 @@ ModalPopup {
             anchors.bottom: parent.bottom
             anchors.right: parent.right
             icon.name: "arrow-right"
+            type: StatusFlatRoundButton.Type.Secondary
             icon.width: 20
             icon.height: 16
             enabled: !!pubKeys.length

ui/app/AppLayouts/Chat/views/ContactsColumnView.qml

@@ -5,7 +5,6 @@ import QtQuick.Layouts 1.13
 
 import utils 1.0
 import "../../../../shared"
-import "../../../../shared/status"
 
 import "../panels"
 import "../popups"

ui/app/AppLayouts/Onboarding/popups/EnterSeedPhraseModal.qml

@@ -8,7 +8,8 @@ import "../../../../shared"
 import "../../../../shared/popups"
 import "../../../../shared/panels"
 import "../../../../shared/controls"
-import "../../../../shared/status"
+
+import StatusQ.Controls 0.1
 
 // TODO: replace with StatusModal
 ModalPopup {

ui/app/AppLayouts/Onboarding/views/LoginView.qml

@@ -198,10 +198,11 @@ Item {
             }
         }
 
-        StatusRoundButton {
+        StatusQControls.StatusRoundButton {
             id: submitBtn
-            size: "medium"
+            width: 40
-            type: "secondary"
+            height: 40
+            type: StatusQControls.StatusRoundButton.Type.Secondary
             icon.name: "arrow-right"
             icon.width: 18
             icon.height: 14

ui/app/AppLayouts/Profile/popups/NetworksModal.qml

@@ -11,6 +11,8 @@ import "../../../../shared/status"
 import "../controls"
 import "../panels"
 
+import StatusQ.Controls 0.1 as StatusQControls
+
 // TODO: replace with StatusQ component
 ModalPopup {
     id: popup
@@ -40,11 +42,12 @@ ModalPopup {
                 width: parent.width
                 height: addButton.height
 
-                StatusRoundButton {
+                StatusQControls.StatusRoundButton {
                     id: addButton
-                    icon.name: "plusSign"
+                    width: 40
-                    size: "medium"
+                    height: 40
-                    type: "secondary"
+                    icon.name: "add"
+                    type: StatusQControls.StatusRoundButton.Type.Secondary
                     anchors.verticalCenter: parent.verticalCenter
                 }
 

ui/app/AppLayouts/Profile/views/ContactsView.qml

@@ -3,13 +3,15 @@ import QtQuick.Controls 2.13
 import QtQuick.Layouts 1.13
 
 import StatusQ.Components 0.1
+import StatusQ.Controls 0.1
+import StatusQ.Core.Theme 0.1
+
 import utils 1.0
 
 import "../../../../shared/popups"
 import "../../../../shared/panels"
 import "../../../../shared/controls"
 import "../../../../shared/views"
-import "../../../../shared/status"
 
 import "../panels"
 import "../popups"
@@ -49,9 +51,10 @@ Item {
 
             StatusRoundButton {
                 id: addButton
-                icon.name: "plusSign"
+                width: 40
-                size: "medium"
+                height: 40
-                type: "secondary"
+                icon.name: "add"
+                type: StatusRoundButton.Type.Secondary
                 anchors.verticalCenter: parent.verticalCenter
             }
 
@@ -85,11 +88,11 @@ Item {
 
             StatusRoundButton {
                 id: blockButton
-                anchors.verticalCenter: parent.verticalCenter
-                icon.name: "block-icon"
-                icon.color: Style.current.lightBlue
                 width: 40
                 height: 40
+                anchors.verticalCenter: parent.verticalCenter
+                icon.name: "cancel"
+                icon.color: Theme.palette.primaryColor1
             }
 
             StyledText {

ui/app/AppLayouts/Profile/views/EnsListView.qml

@@ -6,11 +6,11 @@ import utils 1.0
 
 import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
 
 import "../popups"
 import "../../../../shared"
 import "../../../../shared/panels"
-import "../../../../shared/status"
 
 //TODO remove these dependencies in imports
 import "../../Chat/views"
@@ -152,10 +152,11 @@ Item {
 
             StatusRoundButton {
                 id: addButton
-                icon.name: "plusSign"
+                width: 40
-                size: "medium"
+                height: 40
-                type: "secondary"
                 anchors.verticalCenter: parent.verticalCenter
+                icon.name: "add"
+                type: StatusRoundButton.Type.Secondary
             }
 
             StatusBaseText {

ui/app/AppLayouts/Profile/views/EnsSearchView.qml

@@ -4,6 +4,7 @@ import QtQuick.Controls 2.14
 
 import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1 as StatusQControls
 
 import utils 1.0
 import "../../../../shared"
@@ -169,16 +170,14 @@ Item {
             }
         }
 
-        // TODO: replace with StatusQ component
+        StatusQControls.StatusRoundButton {
-        StatusRoundButton {
             id: btnContinue
-            width: 44
+            width: 40
-            height: 44
+            height: 40
             anchors.top: circleAt.bottom
             anchors.topMargin: Style.current.bigPadding
             anchors.right: parent.right
-            size: "medium"
+            type: StatusQControls.StatusRoundButton.Type.Secondary
-            type: "secondary"
             icon.name: "arrow-right"
             icon.width: 18
             icon.height: 14

ui/app/AppLayouts/Wallet/controls/AddAccountButton.qml

@@ -1,15 +1,16 @@
 import QtQuick 2.13
 import QtQuick.Controls 2.13
 
-import "../../../../shared/status"
+import StatusQ.Controls 0.1
 
 StatusRoundButton {
     id: btnAdd
+    property bool checked: false
 
     width: 36
     height: 36
-    icon.name: "plusSign"
+    icon.name: "add"
-    pressedIconRotation: 45
+    icon.rotation: checked ? 45 : 0
-    size: "medium"
+    type: StatusRoundButton.Type.Secondary
-    type: "secondary"
+    onPressed: checked = !checked
 }

ui/shared/popups/SendModal.qml

@@ -12,6 +12,8 @@ import "../controls"
 import "../views"
 import "."
 
+import StatusQ.Controls 0.1 as StatusQControls
+
 // TODO: replace with StatusModal
 ModalPopup {
     id: root
@@ -220,7 +222,7 @@ ModalPopup {
         width: parent.width
         height: btnNext.height
 
-        StatusRoundButton {
+        StatusQControls.StatusRoundButton {
             id: btnBack
             anchors.left: parent.left
             visible: !stack.isFirstGroup

ui/shared/status/StatusETHTransactionModal.qml

@@ -182,7 +182,7 @@ ModalPopup {
             icon.name: "arrow-right"
             icon.width: 20
             icon.height: 16
-            rotation: 180
+            icon.rotation: 180
             visible: stack.currentGroup.showBackBtn
             enabled: stack.currentGroup.isValid || stack.isLastGroup
             onClicked: {

ui/shared/status/StatusRoundButton.qml

@@ -1,209 +0,0 @@
-import QtQuick 2.13
-import QtQuick.Controls 2.13
-import QtGraphicalEffects 1.13
-import QtQml 2.14
-
-import StatusQ.Components 0.1
-import utils 1.0
-
-import "../../shared/panels"
-
-RoundButton {
-    property string type: "primary"
-    property string size: "large"
-    property int pressedIconRotation: 0
-    property alias iconX: iconImg.x
-    id: control
-
-    font.pixelSize: 15
-    font.weight: Font.Medium
-
-    implicitWidth: {
-        switch(size) {
-            case "large":
-                return 44
-            case "medium":
-                return 40
-            case "small":
-                return 32
-            default:
-                return 44
-        }
-    }
-    implicitHeight: implicitWidth
-    enabled: state === "default" || state === "pressed"
-    rotation: 0
-    state: "default"
-    states: [
-        State {
-            name: "default"
-            PropertyChanges {
-                target: iconColorOverlay
-                visible: true
-                rotation: 0
-            }
-            PropertyChanges {
-                target: loadingIndicator
-                active: false
-            }
-        },
-        State {
-            name: "pressed"
-            PropertyChanges {
-                target: iconColorOverlay
-                rotation: control.pressedIconRotation
-                visible: true
-            }
-            PropertyChanges {
-                target: loadingIndicator
-                active: false
-            }
-        },
-        State {
-            name: "pending"
-            PropertyChanges {
-                target: loadingIndicator
-                active: true
-            }
-            PropertyChanges {
-                target: iconColorOverlay
-                visible: false
-            }
-        }
-    ]
-
-    transitions: [
-        Transition {
-            from: "default"
-            to: "pressed"
-
-            RotationAnimation {
-                duration: 150
-                direction: RotationAnimation.Clockwise
-                easing.type: Easing.InCubic
-            }
-        },
-
-        Transition {
-            from: "pressed"
-            to: "default"
-            RotationAnimation {
-                duration: 150
-                direction: RotationAnimation.Counterclockwise
-                easing.type: Easing.OutCubic
-            }
-        }
-    ]
-
-    icon.height: {
-        switch(size) {
-            case "large":
-                return 20
-            case "medium":
-                return 14
-            case "small":
-                return 12
-            default:
-                return 20
-        }
-    }
-    icon.width: {
-        switch(size) {
-            case "large":
-                return 20
-            case "medium":
-                return 14
-            case "small":
-                return 12
-            default:
-                return 20
-        }
-    }
-    icon.color: type === "secondary" ?
-        !enabled ?
-          Style.current.roundedButtonSecondaryDisabledForegroundColor :
-          Style.current.roundedButtonSecondaryForegroundColor
-        :
-        !enabled ?
-          Style.current.roundedButtonDisabledForegroundColor :
-          Style.current.roundedButtonForegroundColor
-
-    onIconChanged: {
-      icon.source = icon.name ? Style.svg(icon.name) : ""
-    }
-
-    background: Rectangle {
-        anchors.fill: parent
-        opacity: hovered && size === "large" && type !== "secondary" ? 0.2 : 1
-        color: {
-            if (size === "medium" || size === "small" || type === "secondary") {
-                return !enabled ? Style.current.roundedButtonSecondaryDisabledBackgroundColor :
-                  hovered ? (control.type === "warn" ? Style.current.red : Style.current.roundedButtonSecondaryHoveredBackgroundColor) :
-                  (control.type === "warn" ? Style.current.lightRed : Style.current.roundedButtonSecondaryBackgroundColor)
-            }
-            return !enabled ?
-              Style.current.roundedButtonDisabledBackgroundColor : 
-              hovered ? (control.type === "warn" ? Style.current.red : Style.current.buttonHoveredBackgroundColor) :
-                        (control.type === "warn" ? Style.current.lightRed : Style.current.roundedButtonBackgroundColor)
-        }
-        radius: parent.width / 2
-    }
-
-    contentItem: Item {
-        anchors.fill: parent
-
-        SVGImage {
-            id: iconImg
-            visible: false
-            source: control.icon.source
-            height: control.icon.height
-            width: control.icon.width
-            anchors.horizontalCenter: parent.horizontalCenter
-            anchors.verticalCenter: parent.verticalCenter
-            fillMode: Image.PreserveAspectFit
-        }
-
-        Component {
-            id: loadingComponent
-            StatusLoadingIndicator {
-                color: control.size === "medium" || control.size === "small" ?
-                  Style.current.roundedButtonSecondaryDisabledForegroundColor :
-                  Style.current.roundedButtonDisabledForegroundColor
-            }
-        }
-
-        Loader {
-            id: loadingIndicator
-            sourceComponent: loadingComponent
-            height: size === "small" ? 14 : 18
-            width: loadingIndicator.height
-            anchors.horizontalCenter: parent.horizontalCenter
-            anchors.verticalCenter: parent.verticalCenter
-        }
-
-
-        ColorOverlay {
-            id: iconColorOverlay
-            anchors.fill: iconImg
-            source: iconImg
-            color: {
-                if (type === "secondary") {
-                    return !control.enabled ? 
-                        Style.current.roundedButtonSecondaryDisabledForegroundColor : 
-                        (control.type === "warn" ? Style.current.danger : Style.current.roundedButtonSecondaryForegroundColor)
-                }
-                return !control.enabled ?
-                    Style.current.roundedButtonDisabledForegroundColor :
-                   (control.type === "warn" ? Style.current.danger :  Style.current.roundedButtonForegroundColor)
-            }
-            antialiasing: true
-        }
-    }
-
-    MouseArea {
-        hoverEnabled: true
-        cursorShape: Qt.PointingHandCursor
-        anchors.fill: parent
-        onPressed: mouse.accepted = false
-    }
-}

ui/shared/status/StatusStickersPopup.qml

@@ -3,14 +3,12 @@ import QtQuick.Controls 2.13
 import QtQuick.Layouts 1.3
 import QtGraphicalEffects 1.0
 
-import StatusQ.Components 0.1
-
 import utils 1.0
 
 import StatusQ.Controls 0.1 as StatusQControls
+import StatusQ.Components 0.1
 
 import "../../shared/panels"
-import "../../shared/status"
 //TODO improve this!
 import "../../app/AppLayouts/Chat/stores"
 
@@ -185,9 +183,10 @@ Popup {
 
             StatusQControls.StatusFlatRoundButton {
                 id: btnAddStickerPack
-                icon.name: "add"
                 implicitWidth: 24
                 implicitHeight: 24
+                type: StatusRoundButton.Type.Secondary
+                icon.name: "add"
                 state: root.stickerPacksLoaded ? "default" : "pending"
                 onClicked: {
                     stickersContainer.visible = false

ui/shared/status/qmldir

@@ -7,7 +7,6 @@ StatusEmojiSection 1.0 StatusEmojiSection.qml
 StatusGifPopup 1.0 StatusGifPopup.qml
 StatusGifColumn 1.0 StatusGifColumn.qml
 StatusImageIdenticon 1.0 StatusImageIdenticon.qml
-StatusRoundButton 1.0 StatusRoundButton.qml
 StatusSectionHeadline 1.0 StatusSectionHeadline.qml
 StatusStickerButton 1.0 StatusStickerButton.qml
 StatusStickerList 1.0 StatusStickerList.qml

ui/shared/views/TransactionSigner.qml

@@ -9,6 +9,8 @@ import "../status"
 import "../panels"
 import "../controls"
 
+import StatusQ.Controls 0.1 as StatusQControls
+
 Item {
     id: root
     height: signingPhraseItem.height + signingPhrase.height + txtPassword.height + Style.current.smallPadding + Style.current.bigPadding
@@ -52,7 +54,7 @@ Item {
             text: qsTrId("signing-phrase")
         }
 
-        StatusRoundButton {
+        StatusQControls.StatusRoundButton {
             id: infoButton
             anchors.left: labelSigningPhrase.right
             anchors.leftMargin: 7
@@ -79,7 +81,7 @@ Item {
         text: root.signingPhrase
     }
 
-    StatusRoundButton {
+    StatusQControls.StatusRoundButton {
         id: passwordInfoButton
         anchors.left: parent.left
         anchors.leftMargin: 67