qml: styling History, ProxyConfig and NostrConfigDialog

electrum/gui/qml/components/History.qml

@@ -14,8 +14,8 @@ Pane {
     padding: 0
     clip: true
 
-    background: Rectangle {
-        color: constants.darkerBackground
+    background: PaneInsetBackground {
+        vertical: false
     }
 
     ElListView {

electrum/gui/qml/components/NostrConfigDialog.qml

@@ -52,16 +52,18 @@ ElDialog {
             Layout.rightMargin: constants.paddingLarge
             Layout.bottomMargin: constants.paddingLarge
 
-            DialogHighlightPane {
+            InfoTextArea {
                 Layout.fillWidth: true
-                Label {
-                    text: qsTr('Enter the list of Nostr relays') + '<br/><br/>' +
-                        qsTr('Nostr relays are used to send and receive submarine swap offers.') +
+                Layout.bottomMargin: constants.paddingLarge
+                compact: true
+                text: qsTr('Nostr relays are used to send and receive submarine swap offers.') +
                     ' ' + qsTr('For multisig wallets, nostr is also used to relay transactions to your co-signers.') +
                     ' ' + qsTr('Connections to nostr are only made when required, and ephemerally.')
-                    width: parent.width
-                    wrapMode: Text.Wrap
+                backgroundColor: constants.darkerDialogBackground
             }
+
+            Label {
+                text: qsTr('Enter the list of Nostr relays')
             }
 
             RowLayout {

electrum/gui/qml/components/controls/ProxyConfig.qml

@@ -53,62 +53,57 @@ Item {
             model: proxy_type_map
         }
 
-        GridLayout {
-            columns: 2
+        ColumnLayout {
+            // columns: 2
             Layout.fillWidth: true
+            spacing: constants.paddingSmall
 
-            Label {
-                text: qsTr("Address")
-                enabled: address.enabled
-            }
+            RowLayout {
+                Layout.fillWidth: true
+                Layout.rightMargin: constants.paddingLarge
 
                 TextField {
                     id: address
+                    Layout.fillWidth: true
                     enabled: proxy_enabled_cb.checked
                     inputMethodHints: Qt.ImhNoPredictiveText
-            }
-
-            Label {
-                text: qsTr("Port")
-                enabled: port.enabled
+                    placeholderText: qsTr("Address")
                 }
 
                 TextField {
                     id: port
+                    Layout.fillWidth: true
                     enabled: proxy_enabled_cb.checked
                     inputMethodHints: Qt.ImhDigitsOnly
+                    placeholderText: qsTr("Port")
+                }
             }
 
             Label {
-                text: qsTr("Username")
+                Layout.topMargin: constants.paddingLarge
+                text: qsTr("Authentication")
                 enabled: username_tf.enabled
             }
 
             TextField {
                 id: username_tf
+                Layout.fillWidth: true
+                Layout.rightMargin: constants.paddingLarge
                 enabled: proxy_enabled_cb.checked
                 inputMethodHints: Qt.ImhNoPredictiveText
-            }
-
-            Label {
-                text: qsTr("Password")
-                enabled: password_tf.enabled
+                placeholderText: qsTr("Username")
             }
 
             PasswordField {
                 id: password_tf
                 enabled: proxy_enabled_cb.checked
+                placeholderText: qsTr("Password")
             }
         }
 
-        Pane {
+        Button {
             Layout.alignment: Qt.AlignHCenter
             Layout.topMargin: constants.paddingLarge
-            padding: 0
-            background: Rectangle {
-                color: constants.darkerDialogBackground
-            }
-            FlatButton {
             enabled: proxy_enabled_cb.checked && !_probing
             text: qsTr('Detect Tor proxy')
             onClicked: {
@@ -116,7 +111,6 @@ Item {
                 Network.probeTor()
             }
         }
-        }
 
         BusyIndicator {
             id: spinner