qml: add Hover,Filled, Active color interaction states to ExternalLink

This commits to the current state of the Setting control itself

Author: jarolrod

src/qml/components/AboutOptions.qml

@@ -10,39 +10,47 @@ import "../controls"
 ColumnLayout {
     spacing: 20
     Setting {
+        id: websiteLink
         Layout.fillWidth: true
         header: qsTr("Website")
         actionItem: ExternalLink {
+            parentState: websiteLink.state
             description: "bitcoincore.org"
             link: "https://bitcoincore.org"
             iconSource: "image://images/caret-right"
         }
         onClicked: loadedItem.clicked()
     }
     Setting {
+        id: sourceLink
         Layout.fillWidth: true
         header: qsTr("Source code")
         actionItem: ExternalLink {
+            parentState: sourceLink.state
             description: "github.com/bitcoin/bitcoin"
             link: "https://github.com/bitcoin/bitcoin"
             iconSource: "image://images/caret-right"
         }
         onClicked: loadedItem.clicked()
     }
     Setting {
+        id: licenseLink
         Layout.fillWidth: true
         header: qsTr("License")
         actionItem: ExternalLink {
+            parentState: licenseLink.state
             description: "MIT"
             link: "https://opensource.org/licenses/MIT"
             iconSource: "image://images/caret-right"
         }
         onClicked: loadedItem.clicked()
     }
     Setting {
+        id: versionLink
         Layout.fillWidth: true
         header: qsTr("Version")
         actionItem: ExternalLink {
+            parentState: versionLink.state
             description: "v22.99.0-1e7564eca8a6"
             link: "https://bitcoin.org/en/download"
             iconSource: "image://images/caret-right"

src/qml/components/DeveloperOptions.qml

@@ -10,9 +10,11 @@ import "../controls"
 ColumnLayout {
     spacing: 20
     Setting {
+        id: devDocsLink
         Layout.fillWidth: true
         header: qsTr("Developer documentation")
         actionItem: ExternalLink {
+            parentState: devDocsLink.state
             iconSource: "qrc:/icons/export"
             iconWidth: 30
             iconHeight: 30

src/qml/controls/ExternalLink.qml

@@ -8,12 +8,43 @@ import QtQuick.Layouts 1.15
 
 AbstractButton {
     id: root
+    required property string parentState
     required property string link
     property string description: ""
     property int descriptionSize: 18
     property url iconSource: ""
     property int iconWidth: 18
     property int iconHeight: 18
+    property color iconColor
+    property color textColor
+    state: root.parentState
+
+    states: [
+        State {
+            name: "FILLED"
+            PropertyChanges {
+                target: root
+                iconColor: Theme.color.neutral9
+                textColor: Theme.color.neutral7
+            }
+        },
+        State {
+            name: "HOVER"
+            PropertyChanges {
+                target: root
+                iconColor: Theme.color.orangeLight1
+                textColor: Theme.color.orangeLight1
+            }
+        },
+        State {
+            name: "ACTIVE"
+            PropertyChanges {
+                target: root
+                iconColor: Theme.color.orange
+                textColor: Theme.color.orange
+            }
+        }
+    ]
 
     contentItem: RowLayout {
         spacing: 0
@@ -26,9 +57,13 @@ AbstractButton {
                 font.family: "Inter"
                 font.styleName: "Regular"
                 font.pixelSize: root.descriptionSize
-                color: Theme.color.neutral7
+                color: root.textColor
                 textFormat: Text.RichText
-                text: "<style>a:link { color: " + Theme.color.neutral7 + "; text-decoration: none;}</style>" + "<a href=\"" + link + "\">" + root.description + "</a>"
+                text: root.description
+
+                Behavior on color {
+                    ColorAnimation { duration: 150 }
+                }
             }
         }
         Loader {
@@ -37,11 +72,15 @@ AbstractButton {
             visible: active
             sourceComponent: Button {
                 icon.source: root.iconSource
-                icon.color: Theme.color.neutral9
+                icon.color: root.iconColor
                 icon.height: root.iconHeight
                 icon.width: root.iconWidth
                 background: null
                 onClicked: root.clicked()
+
+                Behavior on icon.color {
+                    ColorAnimation { duration: 150 }
+                }
             }
         }
     }