qml: Add OutlineButton interaction color animation states

Author: jarolrod

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()
         }
     }
 }