refactor(ui/shared): replace legacy StatusButton with StatusQ button

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

@@ -4,12 +4,13 @@ import QtQuick.Layouts 1.3
 import QtQml.Models 2.3
 
 import utils 1.0
-import "../../../../shared"
+
+import StatusQ.Controls 0.1
+
 import "../../../../shared/controls"
 import "../../../../shared/popups"
 import "../../../../shared/panels"
 import "../../../../shared/views"
-import "../../../../shared/status"
 import "../panels"
 import "../controls"
 
@@ -156,13 +157,12 @@ ModalPopup {
         width: parent.width
         height: btnSelectMembers.height
 
-        StatusRoundButton {
+        StatusFlatRoundButton {
             id: btnSelectMembers
             visible: selectChatMembers
             anchors.bottom: parent.bottom
             anchors.right: parent.right
             icon.name: "arrow-right"
-            type: "secondary"
             icon.width: 20
             icon.height: 16
             enabled: !!pubKeys.length
@@ -182,7 +182,7 @@ ModalPopup {
             icon.name: "arrow-right"
             icon.width: 20
             icon.height: 16
-            rotation: 180
+            icon.rotation: 180
             onClicked : {
                 selectChatMembers = true
             }

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

@@ -4,6 +4,7 @@ import QtQuick.Layouts 1.13
 
 import utils 1.0
 
+import StatusQ.Controls 0.1 as StatusQControls
 import StatusQ.Components 0.1 as StatusQ
 
 import "../../../../shared"
@@ -379,7 +380,7 @@ ModalPopup {
         visible: popup.isAdmin
         width: parent.width
         height: children[0].height
-        StatusButton {
+        StatusQControls.StatusButton {
           visible: !addMembers
           anchors.right: parent.right
           //% "Add members"
@@ -390,7 +391,7 @@ ModalPopup {
           }
         }
 
-        StatusRoundButton {
+        StatusQControls.StatusRoundButton {
             id: btnBack
             visible: addMembers
             anchors.bottom: parent.bottom
@@ -398,14 +399,14 @@ ModalPopup {
             icon.name: "arrow-right"
             icon.width: 20
             icon.height: 16
-            rotation: 180
+            icon.rotation: 180
             onClicked : {
                 addMembers = false;
                 resetSelectedMembers();
             }
         }
 
-        StatusButton {
+        StatusQControls.StatusButton {
           id: btnSelectMembers
           visible: addMembers
           enabled: memberCount >= currMemberCount

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

@@ -1,11 +1,13 @@
 import QtQuick 2.13
 import QtGraphicalEffects 1.13
-import "../../../../shared"
+
+import utils 1.0
+
+import StatusQ.Controls 0.1 as StatusQControls
+
 import "../../../../shared/panels"
 import "../../../../shared/controls"
 import "../../../../shared/status"
-import utils 1.0
-
 import "../panels"
 import "../controls"
 
@@ -381,12 +383,11 @@ Item {
                     }
                 }
 
-                StatusButton {
+                StatusQControls.StatusFlatButton {
                     id: cancelBtn
                     anchors.left: parent.left
                     anchors.leftMargin: Style.current.halfPadding
                     anchors.top: editTextInput.bottom
-                    bgColor: Style.current.transparent
                     //% "Cancel"
                     text: qsTrId("browsing-cancel")
                     onClicked: {
@@ -396,7 +397,7 @@ Item {
                     }
                 }
 
-                StatusButton {
+                StatusQControls.StatusButton {
                     id: saveBtn
                     anchors.left: cancelBtn.right
                     anchors.leftMargin: Style.current.halfPadding

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

@@ -3,7 +3,7 @@ import QtQuick.Layouts 1.3
 import QtQuick.Controls 2.14
 
 import StatusQ.Core 0.1
-import StatusQ.Controls 0.1
+import StatusQ.Controls 0.1 as StatusQControls
 import StatusQ.Components 0.1
 
 import utils 1.0
@@ -125,7 +125,7 @@ Item {
         }
     }
 
-    StatusButton {
+    StatusQControls.StatusButton {
         id: releaseBtn
         visible: false
         enabled: false
@@ -150,7 +150,7 @@ Item {
     }
 
 
-    StatusButton {
+    StatusQControls.StatusButton {
         anchors.bottom: parent.bottom
         anchors.bottomMargin: Style.current.padding
         anchors.horizontalCenter: parent.horizontalCenter

ui/shared/controls/GasSelector.qml

@@ -3,8 +3,9 @@ import QtQuick.Controls 2.13
 import QtQuick.Layouts 1.13
 
 import utils 1.0
-import "../status"
+
-import "../"
+import StatusQ.Controls 0.1
+
 import "../panels"
 import "."
 
@@ -210,7 +211,7 @@ Item {
         color: Style.current.secondaryText
     }
 
-    StatusButton {
+    StatusFlatButton {
         visible: false // Change to TRUE once EIP1559 suggestions are revised
         id: buttonAdvanced
         anchors.verticalCenter: prioritytext.verticalCenter
@@ -220,7 +221,6 @@ Item {
             qsTrId("use-suggestions") :
             //% "Use custom"
             qsTrId("use-custom")
-        flat: true
         font.pixelSize: 13
         onClicked: advancedMode = !advancedMode
     }

ui/shared/controls/Input.qml

@@ -1,13 +1,11 @@
 import QtQuick 2.13
 import QtQuick.Controls 2.13
 
+import StatusQ.Controls 0.1
 import StatusQ.Popups 0.1
 
-
 import utils 1.0
-import "./"
+
-import "../status"
-import "../"
 import "../panels"
 import "../controls"
 
@@ -172,8 +170,7 @@ Item {
                         }
                         height: 28
                         font.pixelSize: 12
-                        borderColor: Style.current.blue
+                        size: StatusBaseButton.Size.Small
-                        showBorder: true
                         onClicked: {
                             if (inputBox.copyToClipboard) {
                                 chatsModel.copyToClipboard(inputBox.textToCopy ? inputBox.textToCopy : inputValue.text)

ui/shared/keycard/PairingModal.qml

@@ -5,7 +5,6 @@ import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 import StatusQ.Controls 0.1
 import StatusQ.Popups 0.1
-import "../../shared"
 import "../../shared/controls"
 
 StatusModal {

ui/shared/popups/BlockContactConfirmationDialog.qml

@@ -3,9 +3,10 @@ import QtQuick.Controls 2.13
 import QtQuick.Layouts 1.13
 
 import utils 1.0
-import "../status"
+
+import StatusQ.Controls 0.1
+
 import "../panels"
-import "../"
 import "."
 
 // TODO: replace with StatusModal
@@ -39,7 +40,7 @@ ModalPopup {
         StatusButton {
             anchors.right: parent.right
             anchors.rightMargin: Style.current.smallPadding
-            type: "warn"
+            type: StatusBaseButton.Type.Danger
             //% "Block User"
             text: qsTrId("block-user")
             anchors.bottom: parent.bottom

ui/shared/popups/DownloadModal.qml

@@ -3,9 +3,9 @@ import QtQuick.Controls 2.13
 import QtQuick.Layouts 1.13
 
 import utils 1.0
-import "../status"
+
+import StatusQ.Controls 0.1
 import "../panels"
-import "../"
 import "."
 
 // TODO: replace with StatusModal

ui/shared/popups/ImageCropperModal.qml

@@ -3,8 +3,9 @@ import QtQuick.Controls 2.13
 import QtQuick.Layouts 1.13
 
 import utils 1.0
-import "../"
+
-import "../status"
+import StatusQ.Controls 0.1
+
 import "../controls"
 import "."
 

ui/shared/popups/SendModal.qml

@@ -4,11 +4,12 @@ import QtQuick.Layouts 1.13
 import QtQuick.Dialogs 1.3
 
 import utils 1.0
-import "../"
+
+import StatusQ.Controls 0.1
+
 import "../panels"
 import "../controls"
 import "../views"
-import "../status"
 import "."
 
 // TODO: replace with StatusModal
@@ -226,7 +227,7 @@ ModalPopup {
             icon.name: "arrow-right"
             icon.width: 20
             icon.height: 16
-            rotation: 180
+            icon.rotation: 180
             onClicked: {
                 stack.back()
             }
@@ -245,7 +246,7 @@ ModalPopup {
             //% "Next"
             text: qsTrId("next")
             enabled: stack.currentGroup.isValid && !stack.currentGroup.isPending
-            state: stack.currentGroup.isPending ? "pending" : "default"
+            loading: stack.currentGroup.isPending
             onClicked: {
                 const validity = stack.currentGroup.validate()
                 if (validity.isValid && !validity.isPending) {

ui/shared/popups/TransactionSettingsConfirmationPopup.qml

@@ -3,9 +3,10 @@ import QtQuick.Controls 2.13
 import QtQuick.Layouts 1.13
 
 import utils 1.0
-import "../status"
+
+import StatusQ.Controls 0.1
+
 import "../panels"
-import "../"
 import "."
 
 // TODO: replace with StatusModal
@@ -245,7 +246,7 @@ ModalPopup {
 
         StatusButton {
             id: confirmButton
-            type: "warn"
+            type: StatusBaseButton.Type.Danger
             anchors.right: parent.right
             anchors.rightMargin: Style.current.smallPadding        
             text: qsTr("Continue anyway")

ui/shared/popups/UnblockContactConfirmationDialog.qml

@@ -3,7 +3,9 @@ import QtQuick.Controls 2.13
 import QtQuick.Layouts 1.13
 
 import utils 1.0
-import "../status"
+
+import StatusQ.Controls 0.1
+
 import "../panels"
 import "./"
 
@@ -40,7 +42,7 @@ ModalPopup {
         StatusButton {
             anchors.right: parent.right
             anchors.rightMargin: Style.current.smallPadding
-            type: "warn"
+            type: StatusBaseButton.Type.Danger
             //% "Unblock User"
             text: qsTrId("unblock-user")
             anchors.bottom: parent.bottom

ui/shared/status/StatusButton.qml

@@ -1,143 +0,0 @@
-import QtQuick 2.13
-import QtQuick.Controls 2.13
-import QtQml 2.14
-import QtGraphicalEffects 1.13
-
-import utils 1.0
-import "../../shared"
-import "../../shared/panels"
-import "./core"
-
-Button {
-    property string type: "primary"
-    property string size: "large"
-    property string state: "default"
-    property color color: type === "warn" ? Style.current.danger : Style.current.buttonForegroundColor
-    property color bgColor: type === "warn" ? Style.current.buttonWarnBackgroundColor : Style.current.buttonBackgroundColor
-    property color borderColor: color
-    property color hoveredBorderColor: color
-    property bool forceBgColorOnHover: false
-    property int borderRadius: Style.current.radius
-    property color bgHoverColor: {
-        if (type === "warn") {
-            if (showBorder) {
-                return Style.current.buttonOutlineHoveredWarnBackgroundColor
-            }
-            return Style.current.buttonHoveredWarnBackgroundColor
-        }
-        return Style.current.buttonBackgroundColorHover
-    }
-    property bool disableColorOverlay: false
-    property bool showBorder: false
-    property int iconRotation: 0
-
-    id: control
-    font.pixelSize: size === "small" ? 13 : 15
-    font.family: Style.current.fontRegular.name
-    font.weight: Font.Medium
-    implicitHeight: flat ? 32 : (size === "small" ? 38 : 44)
-    implicitWidth: buttonLabel.implicitWidth + (flat ? 3* Style.current.halfPadding : 2 * Style.current.padding) +
-                   (iconLoader.active ? iconLoader.width : 0)
-    enabled: state === "default"
-
-    contentItem: Item {
-        id: content
-        anchors.fill: parent
-        anchors.horizontalCenter: parent.horizontalCenter
-
-        Loader {
-            id: iconLoader
-            active: !!control.icon && !!control.icon.source.toString()
-            anchors.left: parent.left
-            anchors.leftMargin: Style.current.halfPadding
-            anchors.verticalCenter: parent.verticalCenter
-
-            sourceComponent: SVGImage {
-                id: iconImg
-                source: control.icon.source
-                height: control.icon.height
-                width: control.icon.width
-                fillMode: Image.PreserveAspectFit
-                rotation: control.iconRotation
-
-                ColorOverlay {
-                    enabled: !control.disableColorOverlay
-                    anchors.fill: iconImg
-                    source: iconImg
-                    color: control.disableColorOverlay ? "transparent" : buttonLabel.color
-                    antialiasing: true
-                    smooth: true
-                    rotation: control.iconRotation
-                }
-            }
-        }
-
-        Text {
-            id: buttonLabel
-            text: control.text
-            font: control.font
-            horizontalAlignment: Text.AlignHCenter
-            verticalAlignment: Text.AlignVCenter
-            anchors.top: parent.top
-            anchors.bottom: parent.bottom
-            anchors.right: iconLoader.active ? undefined : parent.right
-            anchors.left: iconLoader.active ? iconLoader.right : parent.left
-            anchors.leftMargin: iconLoader.active ? Style.current.smallPadding : 0
-            color: {
-              if (!enabled) {
-                return Style.current.buttonDisabledForegroundColor
-              } else if (type !== "warn" && (hovered || highlighted)) {
-                  return control.color !== Style.current.buttonForegroundColor ?
-                    control.color : Style.current.blue
-              }
-              return control.color
-            }
-            visible: !loadingIndicator.active
-        }
-
-        Loader {
-            id: loadingIndicator
-            active: control.state === "pending"
-            sourceComponent: StatusLoadingIndicator {}
-            height: loadingIndicator.visible ? 
-                                    control.size === "large" ?
-                                    23 : 17 
-                                    : 0
-            width: loadingIndicator.height
-            anchors.horizontalCenter: parent.horizontalCenter
-            anchors.verticalCenter: parent.verticalCenter
-        }
-    }
-
-    background: Rectangle {
-        radius: borderRadius
-        anchors.fill: parent
-        border.width: flat || showBorder ? 1 : 0
-        border.color: {
-          if (hovered) {
-              return control.hoveredBorderColor !== control.borderColor ? control.hoveredBorderColor : control.borderColor
-          }
-          if (showBorder && enabled) {
-              return control.borderColor
-          }
-          return Style.current.transparent
-        }
-        color: {
-            if (flat) {
-                return hovered && forceBgColorOnHover ? control.bgHoverColor : "transparent"
-            }
-            if (type === "secondary") {
-                return hovered || control.highlighted ? control.bgColor : "transparent"
-            }
-            return !enabled ? (control.bgColor === Style.current.transparent ? control.bgColor : Style.current.buttonDisabledBackgroundColor) :
-                      (hovered ? control.bgHoverColor : control.bgColor)
-        }
-    }
-
-    MouseArea {
-        cursorShape: Qt.PointingHandCursor
-        anchors.fill: parent
-        onPressed: mouse.accepted = false
-    }
-}
-

ui/shared/status/StatusChatInput.qml

@@ -7,6 +7,7 @@ import QtQuick.Dialogs 1.3
 import DotherSide 0.1
 
 import utils 1.0
+
 import "../../shared"
 import "../../shared/panels"
 import "../../app/AppLayouts/Chat/panels"
@@ -1073,24 +1074,16 @@ Rectangle {
                 }
             }
 
-            StatusButton {
+            StatusQ.StatusFlatButton {
                 id: sendBtn
-                icon.source: Style.svg("send")
+                icon.name: "send"
-                icon.width: 16
+                text: qsTr("Send")
-                icon.height: 18
+                size: StatusQ.StatusBaseButton.Size.Small
-                borderRadius: 16
-                //% "Send"
-                text: qsTrId("command-button-send")
-                type: "secondary"
-                flat: true
-                showBorder: true
-                forceBgColorOnHover: true
                 anchors.right: parent.right
                 anchors.rightMargin: Style.current.halfPadding
-                anchors.bottom: parent.bottom
+                anchors.verticalCenter: parent.verticalCenter
                 visible: imageBtn2.visible
-                highlighted: chatsModel.plainText(Emoji.deparse(messageInputField.text)).length > 0 || isImage
+                enabled: (chatsModel.plainText(Emoji.deparse(messageInputField.text)).length > 0 || isImage) && messageInputField.length < messageLimit
-                enabled: highlighted && messageInputField.length < messageLimit
                 onClicked: function (event) {
                     control.sendMessage(event)
                     control.hideExtendedArea();
@@ -1141,7 +1134,7 @@ Rectangle {
         }
     }
 
-    StatusButton {
+    StatusQ.StatusButton {
         id: unblockBtn
         visible: control.isContactBlocked
         height: messageInput.height - Style.current.halfPadding
@@ -1149,9 +1142,8 @@ Rectangle {
         anchors.rightMargin: Style.current.halfPadding
         anchors.bottom: parent.bottom
         anchors.bottomMargin: Style.current.padding
-        borderRadius: Style.current.radius
         text: qsTr("Unblock")
-        type: "warn"
+        type: StatusQ.StatusBaseButton.Type.Danger
         onClicked: function (event) {
             profileModel.contacts.unblockContact(chatsModel.channelView.activeChannel.id)
         }

ui/shared/status/StatusETHTransactionModal.qml

@@ -4,8 +4,9 @@ import QtQuick.Layouts 1.13
 import QtQuick.Dialogs 1.3
 
 import utils 1.0
-import "../../shared"
+
-import "../../shared/status"
+import StatusQ.Controls 0.1 as StatusQControls
+
 import "../../shared/controls"
 import "../../shared/views"
 import "../../shared/popups"
@@ -175,7 +176,7 @@ ModalPopup {
         width: parent.width
         height: btnNext.height
 
-         StatusRoundButton {
+         StatusQControls.StatusRoundButton {
             id: btnBack
             anchors.left: parent.left
             icon.name: "arrow-right"
@@ -199,7 +200,7 @@ ModalPopup {
             }
         }
         
-        StatusButton {
+        StatusQControls.StatusButton {
             id: btnNext
             anchors.right: parent.right
             //% "Next"

ui/shared/status/StatusGifPopup.qml

@@ -2,13 +2,12 @@ import QtQuick 2.13
 import QtQuick.Controls 2.13
 import QtQuick.Layouts 1.3
 import QtGraphicalEffects 1.0
+
 import StatusQ.Components 0.1
+import StatusQ.Controls 0.1 as StatusQControls
 
 import utils 1.0
 
-import StatusQ.Controls 0.1
-
-import "../../shared"
 import "../../shared/panels"
 import "../../shared/controls"
 
@@ -116,7 +115,7 @@ Popup {
                 }
             }
 
-            StatusFlatRoundButton {
+            StatusQControls.StatusFlatRoundButton {
                 id: clearBtn
                 implicitWidth: 14
                 implicitHeight: 14
@@ -127,7 +126,7 @@ Popup {
                 visible: searchBox.text !== ""
                 icon.width: 14
                 icon.height: 14
-                type: StatusFlatRoundButton.Type.Tertiary
+                type: StatusQControls.StatusFlatRoundButton.Type.Tertiary
                 color: "transparent"
                 onClicked: toggleCategory(previousCategory)
             }
@@ -250,7 +249,7 @@ Popup {
                 color: Style.current.secondaryText
             }
 
-            StatusButton {
+            StatusQControls.StatusButton {
                 id: removeBtn
                 anchors.horizontalCenter: parent.horizontalCenter
                 text: qsTr("Enable")
@@ -286,7 +285,7 @@ Popup {
                 color: Style.current.secondaryText
             }
 
-            StatusButton {
+            StatusQControls.StatusButton {
                 id: retryBtn
                 anchors.top: emptyText.bottom
                 anchors.topMargin: Style.current.padding

ui/shared/status/StatusSNTTransactionModal.qml

@@ -4,8 +4,9 @@ import QtQuick.Layouts 1.13
 import QtQuick.Dialogs 1.3
 
 import utils 1.0
-import "../../shared"
+
-import "../../shared/status"
+import StatusQ.Controls 0.1 as StatusQControls
+
 import "../../shared/views"
 import "../../shared/controls"
 import "../../shared/popups"
@@ -183,13 +184,13 @@ ModalPopup {
         width: parent.width
         height: btnNext.height
 
-        StatusRoundButton {
+        StatusQControls.StatusRoundButton {
             id: btnBack
             anchors.left: parent.left
             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: {
@@ -207,13 +208,13 @@ ModalPopup {
             }
         }
 
-        StatusButton {
+        StatusQControls.StatusButton {
             id: btnNext
             anchors.right: parent.right
             //% "Next"
             text: qsTrId("next")
             enabled: stack.currentGroup.isValid && !stack.currentGroup.isPending
-            state: stack.currentGroup.isPending ? "pending" : "default"
+            loading: stack.currentGroup.isPending
             onClicked: {
                 const validity = stack.currentGroup.validate() 
                 if (validity.isValid && !validity.isPending) { 

ui/shared/status/StatusStickersPopup.qml

@@ -4,7 +4,9 @@ import QtQuick.Layouts 1.3
 import QtGraphicalEffects 1.0
 
 import utils 1.0
-import "../../shared"
+
+import StatusQ.Controls 0.1 as StatusQControls
+
 import "../../shared/panels"
 import "../../shared/status/core"
 import "../../shared/status"
@@ -130,7 +132,7 @@ Popup {
                     }
                 }
 
-                StatusButton {
+                StatusQControls.StatusButton {
                     visible: lblNoStickersYet.visible
                     //% "Get Stickers"
                     text: qsTrId("get-stickers")
@@ -180,11 +182,9 @@ Popup {
             Layout.bottomMargin: 8
             Layout.alignment: Qt.AlignTop | Qt.AlignLeft
 
-            StatusRoundButton {
+            StatusQControls.StatusFlatRoundButton {
                 id: btnAddStickerPack
-                size: "medium"
+                icon.name: "add"
-                type: "secondary"
-                icon.name: "plusSign"
                 implicitWidth: 24
                 implicitHeight: 24
                 state: root.stickerPacksLoaded ? "default" : "pending"

ui/shared/status/qmldir

@@ -1,4 +1,3 @@
-StatusButton 1.0 StatusButton.qml
 StatusChatCommandButton 1.0 StatusChatCommandButton.qml
 StatusChatCommandPopup 1.0 StatusChatCommandPopup.qml
 StatusChatInput 1.0 StatusChatInput.qml

ui/shared/views/NoFriendsRectangle.qml

@@ -1,8 +1,9 @@
 import QtQuick 2.13
 
 import utils 1.0
-import "../"
+
-import "../status"
+import StatusQ.Controls 0.1
+
 import "../popups"
 import "../panels"