qml: add ContinueButton interaction color animation states

Author: jarolrod

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"