Add and demo ConnectionSettings and ContinueButton components

src/Makefile.qt.include

@@ -299,9 +299,13 @@ QML_QRC = qml/bitcoin_qml.qrc
 QML_RES_QML = \
   qml/components/BlockCounter.qml \
   qml/components/ConnectionOptions.qml \
+  qml/components/ConnectionSettings.qml \
+  qml/controls/ContinueButton.qml \
   qml/controls/Header.qml \
   qml/controls/OptionButton.qml \
+  qml/controls/OptionSwitch.qml \
   qml/controls/ProgressIndicator.qml \
+  qml/controls/Setting.qml \
   qml/pages/initerrormessage.qml \
   qml/pages/stub.qml
 

src/qml/bitcoin_qml.qrc

@@ -2,9 +2,13 @@
     <qresource prefix="/qml">
         <file>components/BlockCounter.qml</file>
         <file>components/ConnectionOptions.qml</file>
+        <file>components/ConnectionSettings.qml</file>
+        <file>controls/ContinueButton.qml</file>
         <file>controls/Header.qml</file>
         <file>controls/OptionButton.qml</file>
+        <file>controls/OptionSwitch.qml</file>
         <file>controls/ProgressIndicator.qml</file>
+        <file>controls/Setting.qml</file>
         <file>pages/initerrormessage.qml</file>
         <file>pages/stub.qml</file>
     </qresource>

src/qml/components/ConnectionSettings.qml

@@ -0,0 +1,35 @@
+// Copyright (c) 2022 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 "../controls"
+
+ColumnLayout {
+    spacing: 20
+    Setting {
+        Layout.fillWidth: true
+        header: "Use cellular data"
+    }
+    Setting {
+        Layout.fillWidth: true
+        header: "Daily upload limit"
+    }
+    Setting {
+        Layout.fillWidth: true
+        header: "Connection limit"
+    }
+    Setting {
+        Layout.fillWidth: true
+        header: "Listening enabled"
+        description: "Reduces data usage."
+    }
+    Setting {
+        last: true
+        Layout.fillWidth: true
+        header: "Blocks Only"
+        description: "Do not transfer unconfirmed transactions. Also disabled listening."
+    }
+}

src/qml/controls/ContinueButton.qml

@@ -0,0 +1,25 @@
+// Copyright (c) 2022 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
+
+Button {
+    font.family: "Inter"
+    font.styleName: "Semi Bold"
+    font.pointSize: 18
+    contentItem: Text {
+        text: parent.text
+        font: parent.font
+        color: "white"
+        horizontalAlignment: Text.AlignHCenter
+        verticalAlignment: Text.AlignVCenter
+    }
+    background: Rectangle {
+        implicitHeight: 46
+        implicitWidth: 300
+        color: "#F7931A"
+        radius: 5
+    }
+}

src/qml/controls/OptionSwitch.qml

@@ -0,0 +1,27 @@
+// Copyright (c) 2022 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
+
+Switch {
+    id: root
+    indicator: Rectangle {
+        implicitWidth: 45
+        implicitHeight: 28
+        x: root.leftPadding
+        y: parent.height / 2 - height / 2
+        radius: 18
+        color: root.checked ? "#F7931A" : "#DDDDDD"
+        Rectangle {
+            id: indicatorButton
+            y: parent.height / 2 - height / 2
+            x: root.checked ? parent.width - width - 4 : 0 + 4
+            width: 20
+            height: 20
+            radius: 18
+            color: "#ffffff"
+        }
+    }
+}

src/qml/controls/Setting.qml

@@ -0,0 +1,41 @@
+// Copyright (c) 2022 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
+
+Control {
+    id: root
+    property bool last: false
+    property string header
+    property string description
+    contentItem: GridLayout {
+        columns: 2
+        rowSpacing: 20
+        width: parent.width
+        Header {
+            Layout.fillWidth: true
+            center: false
+            header: root.header
+            headerSize: 18
+            description: root.description
+            descriptionSize: 15
+            descriptionMargin: 0
+        }
+        OptionSwitch {
+            Layout.alignment: Qt.AlignRight
+        }
+        Loader {
+            Layout.fillWidth:true
+            Layout.columnSpan: 2
+            active: !last
+            visible: active
+            sourceComponent: Rectangle {
+                height: 1
+                color: "#777777"
+            }
+        }
+    }
+}