Add OptionButton control

src/Makefile.qt.include

@@ -298,6 +298,8 @@ QML_QRC_CPP = qml/qrc_bitcoin.cpp
 QML_QRC = qml/bitcoin_qml.qrc
 QML_RES_QML = \
   qml/components/BlockCounter.qml \
+  qml/components/ConnectionOptions.qml \
+  qml/controls/OptionButton.qml \
   qml/pages/initerrormessage.qml \
   qml/pages/stub.qml
 

src/qml/bitcoin_qml.qrc

@@ -1,6 +1,8 @@
 <!DOCTYPE RCC><RCC version="1.0">
     <qresource prefix="/qml">
         <file>components/BlockCounter.qml</file>
+        <file>components/ConnectionOptions.qml</file>
+        <file>controls/OptionButton.qml</file>
         <file>pages/initerrormessage.qml</file>
         <file>pages/stub.qml</file>
     </qresource>

src/qml/components/BlockCounter.qml

@@ -18,6 +18,6 @@ Label {
     verticalAlignment: Text.AlignVCenter
     font.family: "Inter"
     font.styleName: "Semi Bold"
-    font.pixelSize: height / 3
+    font.pixelSize: 20
     text: blockHeight
 }

src/qml/components/ConnectionOptions.qml

@@ -0,0 +1,35 @@
+// Copyright (c) 2021 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.12
+import QtQuick.Controls 2.12
+import QtQuick.Layouts 1.11
+import "../controls"
+
+ColumnLayout {
+    ButtonGroup {
+        id: group
+    }
+    spacing: 15
+    OptionButton {
+        ButtonGroup.group: group
+        Layout.fillWidth: true
+        text: qsTr("Fast always on")
+        description: qsTr("Loads quickly at all times and uses as much cellular data as needed.")
+        recommended: true
+    }
+    OptionButton {
+        ButtonGroup.group: group
+        Layout.fillWidth: true
+        checked: true
+        text: qsTr("Slow always on")
+        description: qsTr("Loads quickly at all times and uses as much cellular data as needed.")
+    }
+    OptionButton {
+        ButtonGroup.group: group
+        Layout.fillWidth: true
+        text: qsTr("Only when on Wi-Fi")
+        description: qsTr("Loads quickly when on wi-fi and pauses when on cellular data.")
+    }
+}

src/qml/controls/OptionButton.qml

@@ -0,0 +1,73 @@
+// Copyright (c) 2021 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.12
+import QtQuick.Controls 2.12
+import QtQuick.Layouts 1.11
+
+Button {
+    property string description
+    property bool recommended: false
+    id: button
+    padding: 15
+    checkable: true
+    background: Rectangle {
+        border.width: 1
+        border.color: button.checked ? "#F7931A" : button.hovered ? "white" : "#999999"
+        radius: 10
+        color: "transparent"
+        Rectangle {
+            visible: button.visualFocus
+            anchors.fill: parent
+            anchors.margins: -4
+            border.width: 2
+            border.color: "#F7931A"
+            radius: 14
+            color: "transparent"
+            opacity: 0.4
+        }
+    }
+    contentItem: ColumnLayout {
+        spacing: 3
+        Label {
+            Layout.fillWidth: true
+            Layout.preferredWidth: 0
+            font.family: "Inter"
+            font.styleName: "Regular"
+            font.pointSize: 18
+            color: "white"
+            text: button.text
+            wrapMode: Text.WordWrap
+        }
+        Label {
+            Layout.fillWidth: true
+            Layout.preferredWidth: 0
+            font.family: "Inter"
+            font.styleName: "Regular"
+            font.pixelSize: 15
+            color: "#DEDEDE"
+            text: button.description
+            wrapMode: Text.WordWrap
+        }
+        Loader {
+            Layout.topMargin: 2
+            active: button.recommended
+            visible: active
+            sourceComponent: Label {
+                background: Rectangle {
+                    color: "white"
+                    radius: 3
+                }
+                font.styleName: "Regular"
+                font.pixelSize: 13
+                topPadding: 3
+                rightPadding: 7
+                bottomPadding: 4
+                leftPadding: 7
+                color: "black"
+                text: qsTr("Recommended")
+            }
+        }
+    }
+}

src/qml/pages/stub.qml

@@ -5,33 +5,35 @@
 import QtQuick 2.12
 import QtQuick.Controls 2.12
 import QtQuick.Layouts 1.11
-import "../components" as BitcoinCoreComponents
-
+import "../components"
 
 ApplicationWindow {
     id: appWindow
     title: "Bitcoin Core TnG"
     minimumWidth: 750
     minimumHeight: 450
-    background: Rectangle {
-        color: "black"
-    }
+    color: "black"
     visible: true
 
     Component.onCompleted: nodeModel.startNodeInitializionThread();
 
-    Image {
-        id: appLogo
-        anchors.horizontalCenter: parent.horizontalCenter
-        source: "image://images/app"
-        sourceSize.width: 128
-        sourceSize.height: 128
-    }
-
-    BitcoinCoreComponents.BlockCounter {
-        id: blockCounter
+    ColumnLayout {
         anchors.centerIn: parent
-        height: parent.height / 3
-        blockHeight: nodeModel.blockTipHeight
+        spacing: 15
+        width: 400
+        Image {
+            Layout.alignment: Qt.AlignCenter
+            source: "image://images/app"
+            sourceSize.width: 64
+            sourceSize.height: 64
+        }
+        BlockCounter {
+            Layout.alignment: Qt.AlignCenter
+            blockHeight: nodeModel.blockTipHeight
+        }
+        ConnectionOptions {
+            Layout.preferredWidth: 400
+            focus: true
+        }
     }
 }