qml: use CaretRightButton, bind to Setting state color

Author: jarolrod

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