fix(Wallet): Saved address add/edit modal layout issues

- Also replaced StatusModal with StatusDialog

Closes #6495

ui/app/AppLayouts/Wallet/popups/AddEditSavedAddressPopup.qml

@@ -1,6 +1,6 @@
 import QtQuick 2.13
 import QtQuick.Controls 2.13
-import QtQuick.Dialogs 1.3
+import QtQml.Models 2.14
 
 import utils 1.0
 import shared.controls 1.0
@@ -10,11 +10,11 @@ import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 import StatusQ.Controls 0.1
 import StatusQ.Controls.Validators 0.1
-import StatusQ.Popups 0.1
+import StatusQ.Popups.Dialog 0.1
 
 import "../stores"
 
-StatusModal {
+StatusDialog {
     id: root
 
     property bool edit: false
@@ -35,8 +35,11 @@ StatusModal {
 
     width: 574
     height: 490
-    header.title: edit ? qsTr("Edit saved address") : qsTr("Add saved address")
-    header.subTitle: edit ? name : ""
+
+    header: StatusDialogHeader {
+        headline.title: edit ? qsTr("Edit saved address") : qsTr("Add saved address")
+        headline.subtitle: edit ? name : ""
+    }
 
     onOpened: {
         if(edit) {
@@ -45,11 +48,8 @@ StatusModal {
         nameInput.input.edit.forceActiveFocus(Qt.MouseFocusReason)
     }
 
-    contentItem: Column {
-        anchors.left: parent.left
-        anchors.leftMargin: 8
-        anchors.right: parent.right
-        anchors.rightMargin: 10
+    Column {
+        width: parent.width
         height: childrenRect.height
         topPadding: Style.current.xlPadding
 
@@ -57,8 +57,9 @@ StatusModal {
 
         StatusInput {
             id: nameInput
-            width: parent.width
-            input.implicitHeight: 56
+            implicitWidth: parent.width
+            minimumHeight: 56
+            maximumHeight: 56
             placeholderText: qsTr("Enter a name")
             label: qsTr("Name")
             validators: [
@@ -76,38 +77,35 @@ StatusModal {
         }
 
         // To-Do use StatusInput within the below component
-        Item {
-            width: parent.width
-            height: addressInput.height
-            RecipientSelector {
-                id: addressInput
-                anchors.left: parent.left
-                anchors.leftMargin: Style.current.padding
-                anchors.top: parent.top
-                width: parent.width
-                accounts: RootStore.accounts
-                contactsStore: root.contactsStore
-                label: qsTr("Address")
-                input.placeholderText: qsTr("Enter ENS Name or Ethereum Address")
-                labelFont.pixelSize: 15
-                labelFont.weight: Font.Normal
-                input.implicitHeight: 56
-                isSelectorVisible: false
-                addContactEnabled: false
-                onSelectedRecipientChanged: {
-                    root.address = selectedRecipient.address
-                }
-                readOnly: root.edit
-                wrongInputValidationError: qsTr("Please enter a valid ENS name OR Ethereum Address")
+        RecipientSelector {
+            id: addressInput
+            implicitWidth: parent.width
+            inputWidth: implicitWidth
+            accounts: RootStore.accounts
+            contactsStore: root.contactsStore
+            label: qsTr("Address")
+            input.placeholderText: qsTr("Enter ENS Name or Ethereum Address")
+            labelFont.pixelSize: 15
+            labelFont.weight: Font.Normal
+            input.implicitHeight: 56
+            input.textField.anchors.rightMargin: 0
+            isSelectorVisible: false
+            addContactEnabled: false
+            onSelectedRecipientChanged: {
+                root.address = selectedRecipient.address
             }
+            readOnly: root.edit
+            wrongInputValidationError: qsTr("Please enter a valid ENS name OR Ethereum Address")
         }
     }
 
-    rightButtons: [
-        StatusButton {
-            text: root.edit ? qsTr("Save") : qsTr("Add address")
-            enabled: _internal.valid && _internal.dirty
-            onClicked: save(name, address)
+    footer: StatusDialogFooter {
+        rightButtons:  ObjectModel {
+            StatusButton {
+                text: root.edit ? qsTr("Save") : qsTr("Add address")
+                enabled: _internal.valid && _internal.dirty
+                onClicked: root.save(name, address)
+            }
         }
-    ]
+    }
 }

ui/imports/shared/controls/AddressInput.qml

@@ -49,8 +49,6 @@ Item {
 
     ContactsListAndSearch {
         id: contactFieldAndList
-        anchors.top: parent.top
-        anchors.bottom: parent.bottom
         width: parent.width
         showContactList: false
         addContactEnabled: root.addContactEnabled

ui/imports/shared/controls/ContactsListAndSearch.qml

@@ -64,10 +64,9 @@ Item {
     Input {
         id: chatKey
         property bool hasValidSearchResult: false
-
+        height: visible ? implicitHeight : 0
         placeholderText: qsTr("Enter ENS username or chat key")
         visible: showSearch
-        height: visible ? implicitHeight : 0
         Keys.onReleased: {
             successMessage = "";
             searchResults.pubKey = "";

ui/imports/shared/controls/Input.qml

@@ -49,12 +49,12 @@ Item {
     signal textEdited(string inputValue)
     signal keyPressed(var event)
 
+    anchors.right: parent.right
+    anchors.left: parent.left
     implicitHeight: inputRectangle.height +
                     (hasLabel ? inputLabel.height + labelMargin : 0) +
                     (!keepHeight &&!!validationError ? (validationErrorText.height + validationErrorTopMargin) : 0)
     height: implicitHeight
-    anchors.right: parent.right
-    anchors.left: parent.left
 
     function resetInternal() {
         inputValue.text = ""
@@ -65,35 +65,25 @@ Item {
         id: inputLabel
         text: inputBox.label
         font.weight: Font.Medium
-        anchors.left: parent.left
-        anchors.leftMargin: 0
-        anchors.top: parent.top
-        anchors.topMargin: 0
         font.pixelSize: 13
         color: Style.current.textColor
     }
 
     Item {
         id: inputField
-        anchors.right: parent.right
         anchors.left: parent.left
+        anchors.right: parent.right
         height: customHeight
         anchors.top: inputBox.hasLabel ? inputLabel.bottom : parent.top
         anchors.topMargin: inputBox.hasLabel ? inputBox.labelMargin : 0
-
         StyledTextField {
             id: inputValue
             visible: !inputBox.isTextArea && !inputBox.isSelect
             placeholderText: inputBox.placeholderText
             placeholderTextColor: inputBox.placeholderTextColor
-            anchors.top: parent.top
-            anchors.topMargin: 0
-            anchors.bottom: parent.bottom
-            anchors.bottomMargin: 0
+            anchors.fill: parent
             anchors.right: clipboardButtonLoader.active ? clipboardButtonLoader.left : parent.right
-            anchors.rightMargin: clipboardButtonLoader.active ? Style.current.padding : parent.rightMargin
-            anchors.left: parent.left
-            anchors.leftMargin: 0
+            anchors.rightMargin: clipboardButtonLoader.active ? Style.current.padding : 0
             leftPadding: inputBox.hasIcon ? iconWidth + 20 : Style.current.padding
             selectByMouse: true
             font.pixelSize: fontPixelSize