Merge #238: Add OutlineButton interaction color animation states

f0cdf11 qml: Add OutlineButton interaction color animation states (jarolrod)
5ee9c25 qml: Address silent conflict with Header control in initerrormessage (jarolrod)

Pull request description:

  Introduces the missing OutlineButton interaction color animation states as detailed in #237

  | Default | Hovered | Pressed |
  | ------- | ------- | ------- |
  | <img width="612" alt="Screen Shot 2023-01-31 at 1 25 03 AM" src="https://user-images.githubusercontent.com/23396902/215683311-cd255b10-fe9f-4fbb-b44b-0e108d5050ea.png"> | <img width="612" alt="Screen Shot 2023-01-31 at 1 25 12 AM" src="https://user-images.githubusercontent.com/23396902/215683319-5c6f17fa-cff1-493e-866e-707d8c821738.png"> | <img width="612" alt="Screen Shot 2023-01-31 at 1 25 20 AM" src="https://user-images.githubusercontent.com/23396902/215683343-696db084-3133-48e6-b069-a43429019d22.png"> |

  Closes #237

  [![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 f0cdf11

Tree-SHA512: c1e2ed67cffab33e593e03ec675b703a97b2e5fa43e1bd7d1164031c05199a5f22716eea69111ebde99aa4f78b2e38e3f7bb7a90f3d5aebbb9df9f0cc3bbf21d

Author: hebasto

src/qml/controls/OutlineButton.qml

@@ -6,6 +6,7 @@ import QtQuick 2.15
 import QtQuick.Controls 2.15
 
 Button {
+    id: root
     font.family: "Inter"
     font.styleName: "Semi Bold"
     font.pixelSize: 18
@@ -17,13 +18,49 @@ Button {
         verticalAlignment: Text.AlignVCenter
     }
     background: Rectangle {
+        id: bg
         implicitHeight: 46
         implicitWidth: 340
         color: Theme.color.background
         radius: 5
+        state:"DEFAULT"
         border {
             width: 1
-            color: Theme.color.neutral4
+            Behavior on color {
+                ColorAnimation { duration: 150 }
+            }
+        }
+
+        states: [
+            State {
+                name: "DEFAULT"
+                PropertyChanges { target: bg; border.color: Theme.color.neutral6}
+            },
+            State {
+                name: "HOVER"
+                PropertyChanges { target: bg; border.color: Theme.color.neutral9 }
+            },
+            State {
+                name: "PRESSED"
+                PropertyChanges { target: bg; border.color: Theme.color.orangeLight2 }
+            }
+        ]
+    }
+    MouseArea {
+        anchors.fill: parent
+        hoverEnabled: true
+        onEntered: {
+            root.background.state = "HOVER"
+        }
+        onExited: {
+            root.background.state = "DEFAULT"
+        }
+        onPressed: {
+            root.background.state = "PRESSED"
+        }
+        onReleased: {
+            root.background.state = "DEFAULT"
+            root.clicked()
         }
     }
 }

src/qml/pages/initerrormessage.qml

@@ -23,7 +23,7 @@ ApplicationWindow {
         Header {
             Layout.topMargin: 30
             Layout.fillWidth: true
-            bold: true
+            headerBold: true
             header: qsTr("There was an issue starting up.")
             headerSize: 21
             description: message