fix(@desktop/browser): Wallet permissions and enter password modals are stretched

fixes #4150

ui/app/AppLayouts/Browser/BrowserLayout.qml

@@ -39,8 +39,8 @@ Rectangle {
 
     property Component accessDialogComponent: BrowserConnectionModal {
         currentTab: tabs.getTab(tabs.currentIndex) && tabs.getTab(tabs.currentIndex).item
-        x: browserWindow.width - width - Style.current.halfPadding
+        x: appLayout.width - width - Style.current.halfPadding
-        y: browserHeader.y + browserHeader.height + Style.current.halfPadding
+        y: browserWindow.y + browserHeader.height + Style.current.halfPadding
     }
 
     // TODO we'll need a new dialog at one point because this one is not using the same call, but it's good for now

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

@@ -1,34 +1,33 @@
 import QtQuick 2.13
 import QtQuick.Controls 2.13
 import QtQuick.Layouts 1.13
+
 import utils 1.0
 import shared.controls 1.0
 import shared.panels 1.0
+
 import StatusQ.Controls 0.1
+import StatusQ.Popups 0.1
+import StatusQ.Core 0.1
 
 import "../controls"
 import "../stores"
 
-// TODO: replace StatusModal
+StatusModal {
-Popup {
+
     property var currentTab
     property var request: ({"hostname": "", "title": "", "permission": ""})
     property string currentAddress: ""
     property bool interactedWith: false
 
-    id: root
+    id: browserConnectionModal
-    modal: true
+
-    Overlay.modal: Rectangle {
+    width: 360
-        color: "#60000000"
+    height: 480
-    }
+    showHeader: false
     closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside
-    width: 470
+    topPadding: 0
-    height: 400
+    bottomPadding: 0
-    background: Rectangle {
-        color: Style.current.background
-        radius: 8
-    }
-    padding: Style.current.padding
 
     function postMessage(isAllowed){
         interactedWith = true
@@ -42,53 +41,41 @@ Popup {
             currentTabConnected = false
             postMessage(false);
         }
-        root.destroy();
     }
 
+    contentItem: Item {
+        width: parent.width
+        height: parent.height
+
         ColumnLayout {
             spacing: Style.current.bigPadding
-        anchors.left: root.left
+            anchors.centerIn: parent
-        anchors.leftMargin: Style.current.padding
-        anchors.right: root.right
-        anchors.rightMargin: Style.current.padding
-        anchors.top: root.top
-        anchors.topMargin: Style.current.padding
 
             RowLayout {
                 property int imgSize: 40
 
                 id: logoHeader
                 spacing: Style.current.halfPadding
-            width: 176
-            height: imgSize
                 Layout.alignment: Qt.AlignHCenter | Qt.AlignTop
 
                 FaviconImage {
                     id: siteImg
-                width: logoHeader.imgSize
-                height: logoHeader.imgSize
                 }
 
                 SVGImage {
                     id: dots1
                     source: Style.svg("dots-icon")
-                width: 20
-                height: 4
                 }
 
                 RoundedIcon {
                     source: Style.svg("check")
                     iconColor: Style.current.primary
                     color: Style.current.secondaryBackground
-                width: 24
-                height: 24
                 }
 
                 SVGImage {
                     id: dots2
                     source: Style.svg("dots-icon")
-                width: 20
-                height: 4
                 }
 
                 RoundedIcon {
@@ -97,46 +84,45 @@ Popup {
                     iconWidth: 18
                     iconColor: accountSelector.selectedAccount.iconColor || Style.current.primary
                     color: Style.current.background
-                width: logoHeader.imgSize
-                height: logoHeader.imgSize
                     border.width: 1
                     border.color: Style.current.border
                 }
             }
 
-        StyledText {
+            StatusBaseText {
                 id: titleText
                 //% "'%1' would like to connect to"
                 text: qsTrId("--1--would-like-to-connect-to").arg(request.title)
-            Layout.fillWidth: true
-            Layout.alignment: Qt.AlignHCenter | Qt.AlignTop
                 wrapMode: Text.WordWrap
                 font.weight: Font.Bold
                 font.pixelSize: 17
                 horizontalAlignment: Text.AlignHCenter
+                elide: Text.ElideRight
+                Layout.maximumWidth: browserConnectionModal.width - Style.current.padding
+                Layout.fillWidth: true
+                Layout.alignment: Qt.AlignHCenter | Qt.AlignTop
             }
 
             StatusAccountSelector {
                 id: accountSelector
                 label: ""
-            width: 300
+                implicitWidth: 300
-            implicitWidth: width
                 Layout.alignment: Qt.AlignHCenter | Qt.AlignTop
                 showAccountDetails: false
                 accounts: WalletStore.accounts
                 selectedAccount: WalletStore.dappBrowserAccount
                 currency: WalletStore.defaultCurrency
                 onSelectedAccountChanged: {
-                if (!root.currentAddress) {
+                    if (!browserConnectionModal.currentAddress) {
                         // We just set the account for the first time. Nothing to do here
-                    root.currentAddress = selectedAccount.address
+                        browserConnectionModal.currentAddress = selectedAccount.address
                         return
                     }
-                if (root.currentAddress === selectedAccount.address) {
+                    if (browserConnectionModal.currentAddress === selectedAccount.address) {
                         return
                     }
 
-                root.currentAddress = selectedAccount.address
+                    browserConnectionModal.currentAddress = selectedAccount.address
                     Web3ProviderStore.web3ProviderInst.dappsAddress = selectedAccount.address;
                     Web3ProviderStore.revokeAllPermissions()
 
@@ -147,8 +133,7 @@ Popup {
                 }
             }
 
-
+            StatusBaseText {
-        StyledText {
                 id: infoText
                 text: {
                     switch(request.permission){
@@ -159,47 +144,42 @@ Popup {
                     default: return qsTr("Unknown permission: " + request.permission);
                     }
                 }
-            Layout.fillWidth: true
                 wrapMode: Text.WordWrap
-            Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
                 font.pixelSize: 15
                 horizontalAlignment: Text.AlignHCenter
                 color: Style.current.secondaryText
+                Layout.maximumWidth: browserConnectionModal.width - Style.current.padding
+                Layout.fillWidth: true
+                Layout.alignment: Qt.AlignHCenter | Qt.AlignTop
             }
 
             Row {
-            width: childrenRect.width
                 spacing: Style.current.padding
                 Layout.alignment: Qt.AlignHCenter | Qt.AlignTop
 
                 StatusButton {
                     type: StatusBaseButton.Type.Danger
-                width: 155
+                    width: 151
                     //% "Deny"
                     text: qsTrId("deny")
                     onClicked: {
                         postMessage(false);
-                    root.close();
+                        browserConnectionModal.close();
                     }
                 }
 
-            StyledButton {
+                StatusButton {
-                btnColor: Utils.setColorAlpha(Style.current.success, 0.1)
+                    normalColor: Utils.setColorAlpha(Style.current.success, 0.1)
                     textColor: Style.current.success
-                width: 155
+                    width: 151
                     //% "Allow"
-                label: qsTrId("allow")
+                    text: qsTrId("allow")
                     onClicked: {
                         postMessage(true);
-                    root.close();
+                        browserConnectionModal.close();
+                    }
                 }
             }
         }
     }
 }
-
-/*##^##
-Designer {
-    D{i:0;formeditorColor:"#ffffff"}
-}
-##^##*/