qml: Introduce TextButton color interaction states

Author: jarolrod

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 {