Merge #246: Introduce TextButton color interaction states & fix margins

3be7fda qml: Introduce TextButton color interaction states (Jarol Rodriguez)
8658fe8 qml: allow to specify button and detailItem margin (Jarol Rodriguez)

Pull request description:

  Introduces color interaction states for the TextButton control, as specified in the design file.

  #### Light
  | [Default](https://www.figma.com/file/ek8w3n3upbluw5UL2lGhRx/Bitcoin-Core-App-Design?node-id=6335%3A24025&t=1HgWYBIOiBJFlWQ1-4) | [Hover](https://www.figma.com/file/ek8w3n3upbluw5UL2lGhRx/Bitcoin-Core-App-Design?node-id=6335%3A24023&t=1HgWYBIOiBJFlWQ1-4) | [Pressed](https://www.figma.com/file/ek8w3n3upbluw5UL2lGhRx/Bitcoin-Core-App-Design?node-id=6335%3A24024&t=1HgWYBIOiBJFlWQ1-4) |
  | ------- | ----- | ------- |
  | <img width="752" alt="Screen Shot 2023-02-02 at 7 51 37 PM" src="https://user-images.githubusercontent.com/23396902/216486226-5798cb07-2666-4f11-8569-7f2e2795ce85.png"> | <img width="752" alt="Screen Shot 2023-02-02 at 7 52 36 PM" src="https://user-images.githubusercontent.com/23396902/216486246-e93b9141-acbe-4c8f-a6f7-6f6666cb5cf7.png"> | <img width="752" alt="Screen Shot 2023-02-02 at 7 52 48 PM" src="https://user-images.githubusercontent.com/23396902/216486263-4a719fd2-8f49-4c8e-96ab-f909efe267c1.png"> |

  #### Dark
  | [Default](https://www.figma.com/file/ek8w3n3upbluw5UL2lGhRx/Bitcoin-Core-App-Design?node-id=6335%3A24025&t=1HgWYBIOiBJFlWQ1-4) | [Hover](https://www.figma.com/file/ek8w3n3upbluw5UL2lGhRx/Bitcoin-Core-App-Design?node-id=6335%3A24023&t=1HgWYBIOiBJFlWQ1-4) | [Pressed](https://www.figma.com/file/ek8w3n3upbluw5UL2lGhRx/Bitcoin-Core-App-Design?node-id=6335%3A24024&t=1HgWYBIOiBJFlWQ1-4) |
  | ------- | ----- | ------- |
  | <img width="752" alt="Screen Shot 2023-02-02 at 7 50 46 PM" src="https://user-images.githubusercontent.com/23396902/216486148-1e021989-d7fd-4ef6-9730-5dcd12781426.png"> | <img width="752" alt="Screen Shot 2023-02-02 at 7 50 58 PM" src="https://user-images.githubusercontent.com/23396902/216486194-3e36e177-faa5-4d2f-92c3-9c1da6001da0.png"> | <img width="752" alt="Screen Shot 2023-02-02 at 7 51 12 PM" src="https://user-images.githubusercontent.com/23396902/216486204-6bfd6608-0096-4658-b620-df0c39b4394a.png"> |

  This makes sure the padding is correct for the TextButton and that the margin is correct for both the TextButton and ContinueButton are as specified in the design file

  | TextButton Padding | TextButton Margin | ContinueButton Margin |
  | ------------------ | ----------------- | --------------------- |
  | <img width="346" alt="Screen Shot 2023-02-02 at 8 10 33 PM" src="https://user-images.githubusercontent.com/23396902/216487130-d18307a3-2acf-4cdb-bf70-4a92ea52952c.png"> | <img width="346" alt="Screen Shot 2023-02-02 at 8 09 06 PM" src="https://user-images.githubusercontent.com/23396902/216487147-86fa4051-c009-497f-ace0-a61a12eb17ca.png"> | <img width="346" alt="Screen Shot 2023-02-02 at 8 09 37 PM" src="https://user-images.githubusercontent.com/23396902/216487166-4d602c5f-4a0c-4968-9163-05430c36b21a.png"> |

  [![Windows](https://img.shields.io/badge/OS-Windows-green)](https://api.cirrus-ci.com/v1/artifact/github/bitcoin-core/gui-qml/win64/insecure_win_gui.zip?branch=pull/<PR>)
  [![Intel macOS](https://img.shields.io/badge/OS-Intel%20macOS-green)](https://api.cirrus-ci.com/v1/artifact/github/bitcoin-core/gui-qml/macos/insecure_mac_gui.zip?branch=pull/<PR>)
  [![Apple Silicon macOS](https://img.shields.io/badge/OS-Apple%20Silicon%20macOS-green)](https://api.cirrus-ci.com/v1/artifact/github/bitcoin-core/gui-qml/macos_arm64/insecure_mac_arm64_gui.zip?branch=pull/<PR>)
  [![ARM64 Android](https://img.shields.io/badge/OS-Android-green)](https://api.cirrus-ci.com/v1/artifact/github/bitcoin-core/gui-qml/android/insecure_android_apk.zip?branch=pull/<PR>)

ACKs for top commit:
  johnny9:
    ACK 3be7fda

Tree-SHA512: 55c2f8a0dfdd26d67a173f9bfe80a0389e7c5261a642fb5f05ddddc4bf86541763d3cf754a7456b6524d0c935c00da62bed7015b205d5cd6226f0ded17500ff5

Author: hebasto

src/qml/controls/InformationPage.qml

@@ -16,8 +16,10 @@ Page {
     property alias navMiddleDetail: navbar.middleDetail
     property alias navRightDetail: navbar.rightDetail
     property string buttonText: ""
+    property int buttonMargin: 40
     property bool bannerActive: true
     property bool detailActive: false
+    property int detailTopMargin: 30
     property bool lastPage: false
     property bool bold: false
     property bool center: true
@@ -83,7 +85,7 @@ Page {
                 visible: active
                 Layout.fillWidth: true
                 Layout.alignment: Qt.AlignCenter
-                Layout.topMargin: 30
+                Layout.topMargin: root.detailTopMargin
                 Layout.leftMargin: 20
                 Layout.rightMargin: 20
                 Layout.maximumWidth: detailMaximumWidth
@@ -95,7 +97,7 @@ Page {
             visible: root.buttonText.length > 0
             enabled: visible
             width: Math.min(300, parent.width - 2 * anchors.leftMargin)
-            anchors.topMargin: 40
+            anchors.topMargin: root.buttonMargin
             anchors.bottomMargin: 60
             anchors.leftMargin: 20
             anchors.rightMargin: 20

src/qml/controls/TextButton.qml

@@ -8,18 +8,74 @@ import QtQuick.Controls 2.15
 Button {
     id: root
     property int textSize: 18
-    property string textColor: Theme.color.orange
+    property color textColor
+    property color bgColor
     property bool bold: true
     property bool rightalign: false
     font.family: "Inter"
     font.styleName: bold ? "Semi Bold" : "Regular"
     font.pixelSize: root.textSize
+    padding: 15
+    state: "DEFAULT"
     contentItem: Text {
         text: root.text
         font: root.font
         color: root.textColor
         horizontalAlignment: rightalign ? Text.AlignRight : Text.AlignHCenter
         verticalAlignment: Text.AlignVCenter
+        Behavior on color {
+            ColorAnimation { duration: 150 }
+        }
+    }
+    background: Rectangle {
+        id: bg
+        color: root.bgColor
+        radius: 5
+        Behavior on color {
+            ColorAnimation { duration: 150 }
+        }
+    }
+    states: [
+        State {
+            name: "DEFAULT"
+            PropertyChanges {
+                target: root
+                textColor: Theme.color.orange
+                bgColor: Theme.color.background
+            }
+        },
+        State {
+            name: "HOVER"
+            PropertyChanges {
+                target: root
+                textColor: Theme.color.orangeLight1
+                bgColor: Theme.color.neutral2
+            }
+        },
+        State {
+            name: "PRESSED"
+            PropertyChanges {
+                target: root
+                textColor: Theme.color.orangeLight2
+                bgColor: Theme.color.neutral3
+            }
+        }
+    ]
+    MouseArea {
+        anchors.fill: parent
+        hoverEnabled: true
+        onEntered: {
+            root.state = "HOVER"
+        }
+        onExited: {
+            root.state = "DEFAULT"
+        }
+        onPressed: {
+            root.state = "PRESSED"
+        }
+        onReleased: {
+            root.state = "DEFAULT"
+            root.clicked()
+        }
     }
-    background: null
 }

src/qml/pages/onboarding/OnboardingConnection.qml

@@ -34,14 +34,19 @@ Page {
             headerText: qsTr("Starting initial download")
             headerMargin: 30
             description: qsTr("The application will connect to the Bitcoin network and start downloading and verifying transactions.\n\nThis may take several hours, or even days, based on your connection.")
-            descriptionMargin: 20
+            descriptionMargin: 10
             detailActive: true
-            detailItem: TextButton {
-                text: qsTr("Connection settings")
-                onClicked: connections.incrementCurrentIndex()
+            detailTopMargin: 10
+            detailItem: RowLayout {
+                TextButton {
+                    Layout.alignment: Qt.AlignCenter
+                    text: qsTr("Connection settings")
+                    onClicked: connections.incrementCurrentIndex()
+                }
             }
             lastPage: true
             buttonText: qsTr("Next")
+            buttonMargin: 20
         }
         SettingsConnection {
             navRightDetail: NavButton {

src/qml/pages/onboarding/OnboardingStorageAmount.qml

@@ -37,13 +37,14 @@ Page {
                     Layout.alignment: Qt.AlignCenter
                 }
                 TextButton {
-                    Layout.topMargin: 30
-                    Layout.fillWidth: true
+                    Layout.topMargin: 10
+                    Layout.alignment: Qt.AlignCenter
                     text: qsTr("Detailed settings")
                     onClicked: storages.incrementCurrentIndex()
                 }
             }
             buttonText: qsTr("Next")
+            buttonMargin: 20
         }
         SettingsStorage {
             navRightDetail: NavButton {