Merge #242: Introduce reusable CaretRightButton, bind color to Setting stateColor

624d985 qml: use CaretRightButton, bind to Setting state color (jarolrod)
2bd516d qml: add CaretRightButton component (jarolrod)

Pull request description:

  This finishes setting up all current Settings to be able to respond to the Setting state.

  | Filled | Hover | Active |
  | ------ | ----- | ------ |
  | <img width="454" alt="Screen Shot 2023-02-01 at 2 12 02 AM" src="https://user-images.githubusercontent.com/23396902/215975827-b4a3b60c-f19b-483d-94a9-8c2191e48253.png"> | <img width="454" alt="Screen Shot 2023-02-01 at 2 12 11 AM" src="https://user-images.githubusercontent.com/23396902/215975854-d038ee42-4bda-4a87-8e04-bf76ebabb5b5.png"> | <img width="454" alt="Screen Shot 2023-02-01 at 2 12 19 AM" src="https://user-images.githubusercontent.com/23396902/215975871-d6a5b120-e53b-4b00-b5c4-7be1872a9e05.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/242)
  [![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/242)
  [![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/242)
  [![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/242)

ACKs for top commit:
  johnny9:
    ACK 624d985

Tree-SHA512: 864312d8f8702ad30050cbb82ff7944e2bcbaedc29999fcf728e625214b59b26320ee600c674703246fb4e852f957b26bf7982716b14419501c14dcd38879e3f

Author: hebasto

src/Makefile.qt.include

@@ -330,6 +330,7 @@ QML_RES_QML = \
   qml/components/AboutOptions.qml \
   qml/components/BlockClock.qml \
   qml/components/BlockCounter.qml \
+  qml/components/CaretRightButton.qml \
   qml/components/ConnectionOptions.qml \
   qml/components/ConnectionSettings.qml \
   qml/components/DeveloperOptions.qml \

src/qml/bitcoin_qml.qrc

@@ -3,6 +3,7 @@
         <file>components/AboutOptions.qml</file>
         <file>components/BlockClock.qml</file>
         <file>components/BlockCounter.qml</file>
+        <file>components/CaretRightButton.qml</file>
         <file>components/ConnectionOptions.qml</file>
         <file>components/ConnectionSettings.qml</file>
         <file>components/PeersIndicator.qml</file>

src/qml/components/AboutOptions.qml

@@ -58,15 +58,12 @@ ColumnLayout {
         onClicked: loadedItem.clicked()
     }
     Setting {
+        id: gotoDeveloper
         Layout.fillWidth: true
         header: qsTr("Developer options")
         description: qsTr("Only use these if you have development experience")
-        actionItem: Button {
-            icon.source: "image://images/caret-right"
-            icon.color: Theme.color.neutral9
-            icon.height: 18
-            icon.width: 18
-            background: null
+        actionItem: CaretRightButton{
+            stateColor: gotoDeveloper.stateColor
             onClicked: {
                 aboutSwipe.incrementCurrentIndex()
             }

src/qml/components/CaretRightButton.qml

@@ -0,0 +1,20 @@
+// Copyright (c) 2023 The Bitcoin Core developers
+// Distributed under the MIT software license, see the accompanying
+// file COPYING or http://www.opensource.org/licenses/mit-license.php.
+
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+
+Button {
+    id: root
+    required property color stateColor
+    icon.source: "image://images/caret-right"
+    icon.color: root.stateColor
+    icon.height: 18
+    icon.width: 18
+    background: null
+
+    Behavior on icon.color {
+        ColorAnimation { duration: 150 }
+    }
+}

src/qml/components/ConnectionSettings.qml

@@ -59,15 +59,12 @@ ColumnLayout {
         }
     }
     Setting {
+        id: gotoProxy
         last: true
         Layout.fillWidth: true
         header: qsTr("Proxy settings")
-        actionItem: Button {
-            icon.source: "image://images/caret-right"
-            icon.color: Theme.color.neutral9
-            icon.height: 18
-            icon.width: 18
-            background: null
+        actionItem: CaretRightButton {
+            stateColor: gotoProxy.stateColor
         }
     }
 }

src/qml/pages/node/NodeSettings.qml

@@ -47,44 +47,35 @@ Item {
                     onClicked: loadedItem.toggled()
                 }
                 Setting {
+                    id: gotoAbout
                     Layout.fillWidth: true
                     header: qsTr("About")
-                    actionItem: Button {
-                        icon.source: "image://images/caret-right"
-                        icon.color: Theme.color.neutral9
-                        icon.height: 18
-                        icon.width: 18
-                        background: null
+                    actionItem: CaretRightButton {
+                        stateColor: gotoAbout.stateColor
                         onClicked: {
                             nodeSettingsView.push(about_page)
                         }
                     }
                     onClicked: loadedItem.clicked()
                 }
                 Setting {
+                    id: gotoStorage
                     Layout.fillWidth: true
                     header: qsTr("Storage")
-                    actionItem: Button {
-                        icon.source: "image://images/caret-right"
-                        icon.color: Theme.color.neutral9
-                        icon.height: 18
-                        icon.width: 18
-                        background: null
+                    actionItem: CaretRightButton {
+                        stateColor: gotoStorage.stateColor
                         onClicked: {
                             nodeSettingsView.push(storage_page)
                         }
                     }
                     onClicked: loadedItem.clicked()
                 }
                 Setting {
+                    id: gotoConnection
                     Layout.fillWidth: true
                     header: qsTr("Connection")
-                    actionItem: Button {
-                        icon.source: "image://images/caret-right"
-                        icon.color: Theme.color.neutral9
-                        icon.height: 18
-                        icon.width: 18
-                        background: null
+                    actionItem: CaretRightButton {
+                        stateColor: gotoConnection.stateColor
                         onClicked: {
                             nodeSettingsView.push(connection_page)
                         }