Merge #232: Add ContinueButton interaction color animation states

39b4c15 qml: add ContinueButton interaction color animation states (Jarol Rodriguez)

Pull request description:

  Introduces the missing ContinueButton interaction color animation states as detailed in #229

  #### Dark Mode

  | Default | Hovered | Pressed |
  | ------- | ------- | ------- |
  | <img width="321" alt="Screen Shot 2023-01-28 at 6 21 06 PM" src="https://user-images.githubusercontent.com/23396902/215295733-5b592123-a94e-45d8-bb33-49abed4c4d97.png"> | <img width="321" alt="Screen Shot 2023-01-28 at 6 21 25 PM" src="https://user-images.githubusercontent.com/23396902/215295740-e4210277-b678-4ce6-b983-2ce35940c39f.png"> | <img width="321" alt="Screen Shot 2023-01-28 at 6 21 40 PM" src="https://user-images.githubusercontent.com/23396902/215295741-e9eeec10-7fce-4289-8962-86860246954d.png"> |

  #### Light Mode

  | Default | Hovered | Pressed |
  | ------- | ------- | ------- |
  | <img width="321" alt="Screen Shot 2023-01-28 at 6 22 32 PM" src="https://user-images.githubusercontent.com/23396902/215295762-e96bf64c-5da8-4636-98e6-451892cf959a.png"> | <img width="321" alt="Screen Shot 2023-01-28 at 6 22 53 PM" src="https://user-images.githubusercontent.com/23396902/215295768-99db7c5e-b6f9-43dd-94d6-bec7d778abb8.png"> | <img width="321" alt="Screen Shot 2023-01-28 at 6 23 03 PM" src="https://user-images.githubusercontent.com/23396902/215295778-2e1a3961-333f-42bf-9293-c0f74c67b5ce.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/232)
  [![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/232)
  [![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/232)
  [![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/232)

  Closes #229

ACKs for top commit:
  johnny9:
    ACK 39b4c15

Tree-SHA512: 5c61c0e776f39323015711213dff20b6988be02c69a6ca46cdd8065ed85d1fca5b0f9e3274e511dbc907e487b48ef08966b3a91253fbf2073e26eb80c5b5bd3a

Author: hebasto

src/qml/controls/ContinueButton.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,9 +18,47 @@ Button {
         verticalAlignment: Text.AlignVCenter
     }
     background: Rectangle {
+        id: bg
         implicitHeight: 46
         implicitWidth: 300
         color: Theme.color.orange
         radius: 5
+        state:"DEFAULT"
+
+        states: [
+            State {
+                name: "DEFAULT"
+                PropertyChanges { target: bg; color: Theme.color.orange }
+            },
+            State {
+                name: "HOVER"
+                PropertyChanges { target: bg; color: Theme.color.orangeLight1 }
+            },
+            State {
+                name: "PRESSED"
+                PropertyChanges { target: bg; color: Theme.color.orangeLight2 }
+            }
+        ]
+
+        Behavior on color {
+            ColorAnimation { duration: 150 }
+        }
+    }
+    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/controls/Theme.qml

@@ -11,6 +11,8 @@ Control {
         required property color white
         required property color background
         required property color orange
+        required property color orangeLight1
+        required property color orangeLight2
         required property color red
         required property color green
         required property color blue
@@ -38,6 +40,8 @@ Control {
         white: "#FFFFFF"
         background: "black"
         orange: "#F89B2A"
+        orangeLight1: "#FFAD4A"
+        orangeLight2: "#FFBF72"
         red: "#EC6363"
         green: "#36B46B"
         blue: "#3CA3DE"
@@ -59,6 +63,8 @@ Control {
         white: "#FFFFFF"
         background: "white"
         orange: "#F7931A"
+        orangeLight1: "#FFAD4A"
+        orangeLight2: "#FFBF72"
         red: "#EB5757"
         green: "#27AE60"
         blue: "#2D9CDB"