qml: Introduce AddWalletButton

Author: johnny9

src/Makefile.qt.include

@@ -382,6 +382,7 @@ QML_RES_QML = \
   qml/components/ThemeSettings.qml \
   qml/components/TotalBytesIndicator.qml \
   qml/components/Tooltip.qml \
+  qml/controls/AddWalletButton.qml \
   qml/controls/CaretRightIcon.qml \
   qml/controls/ContinueButton.qml \
   qml/controls/CoreText.qml \

src/qml/bitcoin_qml.qrc

@@ -20,6 +20,7 @@
         <file>components/ThemeSettings.qml</file>
         <file>components/TotalBytesIndicator.qml</file>
         <file>components/Tooltip.qml</file>
+        <file>controls/AddWalletButton.qml</file>
         <file>controls/ContinueButton.qml</file>
         <file>controls/CoreText.qml</file>
         <file>controls/CoreTextField.qml</file>

src/qml/controls/AddWalletButton.qml

@@ -0,0 +1,83 @@
+// Copyright (c) 2024 The Bitcoin Core developers
+// Distributed under the MIT software license, see the accompanying
+// file COPYING or http://www.opensource.org/licenses/mit-license.php.
+
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+
+import org.bitcoincore.qt 1.0
+
+Button {
+    id: root
+
+    property color bgActiveColor: Theme.color.neutral2
+    property color textColor: Theme.color.neutral7
+    property color textHoverColor: Theme.color.orange
+    property color textActiveColor: Theme.color.orange
+
+    hoverEnabled: AppMode.isDesktop
+    implicitHeight: 30
+    implicitWidth: 220
+
+    MouseArea {
+        anchors.fill: parent
+        enabled: false
+        hoverEnabled: true
+        cursorShape: Qt.PointingHandCursor
+    }
+
+    contentItem: Item {
+        anchors.fill: parent
+        RowLayout {
+            anchors.centerIn: parent
+            spacing: 3
+            Icon {
+                id: addIcon
+                Layout.alignment: Qt.AlignRight
+                source: "image://images/plus"
+                color: Theme.color.neutral7
+                size: 16
+                Layout.minimumWidth: 16
+                Layout.preferredWidth: 16
+                Layout.maximumWidth: 16
+            }
+            CoreText {
+                id: addText
+                Layout.fillHeight: true
+                Layout.alignment: Qt.AlignLeft
+                text: qsTr("Add Wallet")
+                color: Theme.color.neutral7
+                font.pixelSize: 15
+            }
+        }
+    }
+
+    background: Rectangle {
+        id: bg
+        height: 30
+        width: 220
+        radius: 5
+        color: Theme.color.neutral3
+        visible: root.hovered || root.checked
+
+        FocusBorder {
+            visible: root.visualFocus
+        }
+
+        Behavior on color {
+            ColorAnimation { duration: 150 }
+        }
+    }
+
+    states: [
+        State {
+            name: "CHECKED"; when: root.checked
+        },
+        State {
+            name: "HOVER"; when: root.hovered
+            PropertyChanges { target: addText; color: textHoverColor }
+            PropertyChanges { target: addIcon; color: textHoverColor }
+        }
+    ]
+}

src/qml/pages/wallet/WalletSelect.qml

@@ -12,7 +12,7 @@ Popup {
     id: root
 
     property alias model: listView.model
-    implicitHeight: layout.height + arrow.height
+    implicitHeight: layout.height + arrow.height + 11
     implicitWidth: 250
     clip: true
 
@@ -89,29 +89,12 @@ Popup {
             }
         }
 
-        RowLayout {
+        AddWalletButton {
             id: addWallet
-            Layout.preferredWidth: addIcon.size + addText.width
-            Layout.preferredHeight: 45
+
             Layout.alignment: Qt.AlignHCenter
-            Icon {
-                id: addIcon
-                Layout.alignment: Qt.AlignHCenter
-                source: "image://images/plus"
-                color: Theme.color.neutral8
-                size: 14
-                topPadding: 5
-                bottomPadding: 10
-            }
-            CoreText {
-                id: addText
-                Layout.alignment: Qt.AlignHCenter
-                text: qsTr("Add Wallet")
-                color: Theme.color.neutral9
-                font.pixelSize: 15
-                topPadding: 5
-                bottomPadding: 10
-            }
+            Layout.preferredWidth: 220
+            Layout.preferredHeight: 30
         }
     }
 }