refactor(@desktop/browser): use StatusQ controls in browser module

ui/app/AppLayouts/Browser/panels/BrowserHeader.qml

@@ -4,11 +4,16 @@ import QtQuick.Layouts 1.13
 import Qt.labs.settings 1.0
 import QtQuick.Controls.Styles 1.0
 import QtWebEngine 1.10
+
 import utils 1.0
+
+import StatusQ.Controls 0.1 as StatusQControls
+
 import "../../../../shared"
 import "../../../../shared/panels"
 import "../../../../shared/controls"
 import "../../../../shared/status"
+
 import "../popups"
 import "../controls"
 
@@ -212,15 +217,13 @@ Rectangle {
 
         Component {
             id: connectedBtnComponent
-            StatusButton {
+            StatusQControls.StatusFlatButton {
                 id: accountBtnConnected
-                icon.source: Style.svg("walletIcon")
+                icon.name: "wallet"
                 icon.width: 18
                 icon.height: 18
                 icon.color: dappBrowserAccIcon
                 text: dappBrowserAccName
-                implicitHeight: 32
-                type: "secondary"
                 onClicked: {
                     if (browserWalletMenu.opened) {
                         browserWalletMenu.close()

ui/app/AppLayouts/Browser/panels/DownloadBar.qml

@@ -1,8 +1,9 @@
 import QtQuick 2.1
 import QtGraphicalEffects 1.13
 import utils 1.0
-import "../../../../shared"
-import "../../../../shared/status"
+
+import StatusQ.Controls 0.1
+
 import "../controls"
 
 Rectangle {
@@ -92,7 +93,7 @@ Rectangle {
 
     StatusButton {
         id: showAllBtn
-        size: "small"
+        size: StatusBaseButton.Size.Small
         //% "Show All"
         text: qsTrId("show-all")
         anchors.verticalCenter: parent.verticalCenter
@@ -103,13 +104,15 @@ Rectangle {
         }
     }
 
-    StatusIconButton {
+    StatusFlatRoundButton {
         id: closeBtn
         anchors.verticalCenter: parent.verticalCenter
         anchors.right: parent.right
         anchors.rightMargin: Style.current.padding
-        icon.name: "browser/close"
-        iconColor: Style.current.textColor
+
+        type: StatusFlatRoundButton.Type.Secondary
+
+        icon.name: "close"
         onClicked: {
             downloadBar.isVisible = false
         }

ui/app/AppLayouts/Browser/popups/AddFavoriteModal.qml

@@ -2,11 +2,14 @@ import QtQuick 2.13
 import QtQuick.Controls 2.13
 import QtQuick.Layouts 1.13
 import QtGraphicalEffects 1.13
+
 import utils 1.0
+
+import StatusQ.Controls 0.1
+
 import "../../../../shared"
 import "../../../../shared/controls"
 import "../../../../shared/popups"
-import "../../../../shared/status"
 import "../stores"
 
 // TODO: replace with StatusModal
@@ -126,9 +129,7 @@ ModalPopup {
             //% "Remove"
             text: qsTrId("remove")
             anchors.bottom: parent.bottom
-            color: Style.current.danger
-            bgColor: Utils.setColorAlpha(Style.current.danger, 0.1)
-            bgHoverColor: Utils.setColorAlpha(Style.current.danger, 0.2)
+            type: StatusBaseButton.Type.Danger
             onClicked: {
                 BookmarksStore.removeBookmark(popup.ogUrl)
                 popup.close()

ui/app/AppLayouts/Browser/popups/BrowserConnectionModal.qml

@@ -2,13 +2,16 @@ import QtQuick 2.13
 import QtQuick.Controls 2.13
 import QtQuick.Layouts 1.13
 import utils 1.0
+
+import StatusQ.Controls 0.1
+
 import "../../../../shared"
-import "../../../../shared/status"
 import "../../../../shared/panels"
 import "../../../../shared/controls"
 import "../controls"
 import "../stores"
 
+// TODO: replace StatusModal
 Popup {
     property var currentTab
     property var request: ({"hostname": "", "title": "", "permission": ""})
@@ -62,7 +65,7 @@ Popup {
             height: imgSize
             Layout.alignment: Qt.AlignHCenter | Qt.AlignTop
 
-                FaviconImage {
+            FaviconImage {
                 id: siteImg
                 width: logoHeader.imgSize
                 height: logoHeader.imgSize
@@ -115,7 +118,7 @@ Popup {
             horizontalAlignment: Text.AlignHCenter
         }
 
-        AccountSelector {
+        StatusAccountSelector {
             id: accountSelector
             label: ""
             width: 190
@@ -170,7 +173,7 @@ Popup {
             Layout.alignment: Qt.AlignHCenter | Qt.AlignTop
 
             StatusButton {
-                type: "warn"
+                type: StatusBaseButton.Type.Danger
                 width: 155
                 //% "Deny"
                 text: qsTrId("deny")

ui/app/AppLayouts/Browser/popups/JSDialogWindow.qml

@@ -2,10 +2,11 @@ import QtQuick 2.13
 import QtQuick.Controls 2.13
 import QtQuick.Layouts 1.13
 import QtWebEngine 1.10
-import "../../../../shared"
+
+import StatusQ.Controls 0.1
+
 import "../../../../shared/controls"
 import "../../../../shared/popups"
-import "../../../../shared/status"
 
 import utils 1.0
 
@@ -71,9 +72,8 @@ ModalPopup {
             }
         }
 
-        StatusButton {
+        StatusFlatButton {
             id: cancelButton
-            type: "secondary"
             anchors.right: okButton.left
             anchors.rightMargin: Style.current.smallPadding
             //% "Cancel"

ui/app/AppLayouts/Browser/popups/SignMessageModal.qml

@@ -5,15 +5,17 @@ import QtQuick.Dialogs 1.3
 import QtGraphicalEffects 1.13
 
 import utils 1.0
+
+import StatusQ.Controls 0.1
+import StatusQ.Popups 0.1
+
 import "../../../../shared"
 import "../../../../shared/panels"
 import "../../../../shared/popups"
 import "../../../../shared/views"
-import "../../../../shared/status"
 import "../stores"
 
-// TODO: replace with StatusModal
-ModalPopup {
+StatusModal {
     property var request
     property var selectedAccount
 
@@ -29,10 +31,11 @@ ModalPopup {
     property var web3Response
 
 
+    anchors.centerIn: parent
     id: root
 
     //% "Signature request"
-    title: qsTrId("signature-request")
+    header.title: qsTrId("signature-request")
     height: 504
 
     onClosed: {
@@ -75,150 +78,149 @@ ModalPopup {
         }
     }
 
-    TransactionSigner {
-        id: transactionSigner
-        width: parent.width
-        signingPhrase: WalletStore.signingPhrase
-        visible: showSigningPhrase
-    }
+    contentItem: Item {
+        width: root.width
+        height: childrenRect.height
 
-    Column {
-        id: content
-        anchors.left: parent.left
-        anchors.right: parent.right
-        visible: !showSigningPhrase
-
-        LabelValueRow {
-            //% "From"
-            label: qsTrId("from")
-            value: Item {
-                id: itmFromValue
-                anchors.fill: parent
-                anchors.verticalCenter: parent.verticalCenter
-                Row {
-                    spacing: Style.current.halfPadding
-                    rightPadding: 0
-                    anchors.right: parent.right
-                    anchors.verticalCenter: parent.verticalCenter
-
-                    StyledText {
-                        font.pixelSize: 15
-                        height: 22
-                        text: selectedAccount.name
-                        elide: Text.ElideRight
-                        anchors.verticalCenter: parent.verticalCenter
-                        horizontalAlignment: Text.AlignRight
-                        verticalAlignment: Text.AlignVCenter
-                    }
-                    SVGImage {
-                        id: imgFromWallet
-                        sourceSize.height: 18
-                        sourceSize.width: 18
-                        visible: true
-                        horizontalAlignment: Image.AlignLeft
-                        width: undefined
-                        anchors.verticalCenter: parent.verticalCenter
-                        fillMode: Image.PreserveAspectFit
-                        source: Style.svg("walletIcon")
-                        ColorOverlay {
-                            visible: parent.visible
-                            anchors.fill: parent
-                            source: parent
-                            color: selectedAccount.iconColor
-                        }
-                    }
-                }
-            }
+        TransactionSigner {
+            id: transactionSigner
+            width: parent.width
+            signingPhrase: WalletStore.signingPhrase
+            visible: showSigningPhrase
         }
 
-        LabelValueRow {
-            //% "Data"
-            label: qsTrId("data")
-            value: Item {
-                anchors.fill: parent
-                anchors.verticalCenter: parent.verticalCenter
+        Column {
+            id: content
+            anchors.left: parent.left
+            anchors.right: parent.right
+            visible: !showSigningPhrase
 
-                // TODO; replace with StatusModal
-                ModalPopup {
-                    id: messagePopup
-                    //% "Message"
-                    title: qsTrId("message")
-                    height: 286
-                    width: 400
-                    Item {
-                        anchors.fill: parent
-                        anchors.leftMargin: Style.current.padding
-                        anchors.rightMargin: Style.current.padding
-                        ScrollView {
-                            width: parent.width
-                            height: 150
-                            TextArea {
-                                wrapMode: TextEdit.Wrap
-                                readOnly: true
-                                text: messageToSign()
+            LabelValueRow {
+                //% "From"
+                label: qsTrId("from")
+                value: Item {
+                    id: itmFromValue
+                    anchors.fill: parent
+                    anchors.verticalCenter: parent.verticalCenter
+                    Row {
+                        spacing: Style.current.halfPadding
+                        rightPadding: 0
+                        anchors.right: parent.right
+                        anchors.verticalCenter: parent.verticalCenter
+
+                        StyledText {
+                            font.pixelSize: 15
+                            height: 22
+                            text: selectedAccount.name
+                            elide: Text.ElideRight
+                            anchors.verticalCenter: parent.verticalCenter
+                            horizontalAlignment: Text.AlignRight
+                            verticalAlignment: Text.AlignVCenter
+                        }
+                        SVGImage {
+                            id: imgFromWallet
+                            sourceSize.height: 18
+                            sourceSize.width: 18
+                            visible: true
+                            horizontalAlignment: Image.AlignLeft
+                            width: undefined
+                            anchors.verticalCenter: parent.verticalCenter
+                            fillMode: Image.PreserveAspectFit
+                            source: Style.svg("walletIcon")
+                            ColorOverlay {
+                                visible: parent.visible
+                                anchors.fill: parent
+                                source: parent
+                                color: selectedAccount.iconColor
                             }
                         }
                     }
                 }
+            }
 
-                Row {
-                    spacing: Style.current.halfPadding
-                    rightPadding: 0
-                    anchors.right: parent.right
+            LabelValueRow {
+                //% "Data"
+                label: qsTrId("data")
+                value: Item {
+                    anchors.fill: parent
                     anchors.verticalCenter: parent.verticalCenter
-                    StyledText {
-                        width: 250
-                        font.pixelSize: 15
-                        height: 22
-                        text: messageToSign()
-                        anchors.verticalCenter: parent.verticalCenter
-                        horizontalAlignment: Text.AlignRight
-                        verticalAlignment: Text.AlignVCenter
-                        elide: Text.ElideRight
-                        color: Style.current.secondaryText
-                    }
-                    SVGImage {
-                        width: 13
-                        anchors.verticalCenter: parent.verticalCenter
-                        fillMode: Image.PreserveAspectFit
-                        source: Style.svg("caret")
-                        rotation: 270
-                        ColorOverlay {
+
+                    // TODO; replace with StatusModal
+                    ModalPopup {
+                        id: messagePopup
+                        //% "Message"
+                        title: qsTrId("message")
+                        height: 286
+                        width: 400
+                        Item {
                             anchors.fill: parent
-                            source: parent
-                            color: Style.current.secondaryText
+                            anchors.leftMargin: Style.current.padding
+                            anchors.rightMargin: Style.current.padding
+                            ScrollView {
+                                width: parent.width
+                                height: 150
+                                TextArea {
+                                    wrapMode: TextEdit.Wrap
+                                    readOnly: true
+                                    text: messageToSign()
+                                }
+                            }
                         }
                     }
-                }
-                MouseArea {
-                    anchors.fill: parent
-                    visible: true
-                    cursorShape: Qt.PointingHandCursor
-                    onClicked: messagePopup.open()
+
+                    Row {
+                        spacing: Style.current.halfPadding
+                        rightPadding: 0
+                        anchors.right: parent.right
+                        anchors.verticalCenter: parent.verticalCenter
+                        StyledText {
+                            width: 250
+                            font.pixelSize: 15
+                            height: 22
+                            text: messageToSign()
+                            anchors.verticalCenter: parent.verticalCenter
+                            horizontalAlignment: Text.AlignRight
+                            verticalAlignment: Text.AlignVCenter
+                            elide: Text.ElideRight
+                            color: Style.current.secondaryText
+                        }
+                        SVGImage {
+                            width: 13
+                            anchors.verticalCenter: parent.verticalCenter
+                            fillMode: Image.PreserveAspectFit
+                            source: Style.svg("caret")
+                            rotation: 270
+                            ColorOverlay {
+                                anchors.fill: parent
+                                source: parent
+                                color: Style.current.secondaryText
+                            }
+                        }
+                    }
+                    MouseArea {
+                        anchors.fill: parent
+                        visible: true
+                        cursorShape: Qt.PointingHandCursor
+                        onClicked: messagePopup.open()
+                    }
                 }
             }
         }
+
     }
 
+    rightButtons: [
 
-    footer: Item {
-        width: parent.width
-        height: btnReject.height
-
-        StatusButton {
+        StatusFlatButton {
             id: btnReject
-            anchors.right:btnNext.left
-            anchors.rightMargin: Style.current.padding
             //% "Reject"
             text: qsTrId("reject")
             color: Style.current.danger
-            type: "secondary"
             onClicked: close()
-        }
+        },
 
         StatusButton {
             id: btnNext
-            anchors.right: parent.right
             text: showSigningPhrase ? 
                     //% "Sign"
                     qsTrId("transactions-sign") : 
@@ -233,7 +235,7 @@ ModalPopup {
                 }
             }
         }
-    }
+    ]
 }
 
 /*##^##