qml: add FocusBorder to Focus-able components

Author: jarolrod

src/qml/components/BlockClock.qml

@@ -24,6 +24,8 @@ Item {
     property bool synced: nodeModel.verificationProgress > 0.999
     property bool paused: false
 
+    activeFocusOnTab: true
+
     BlockClockDial {
         id: dial
         anchors.fill: parent
@@ -81,6 +83,9 @@ Item {
             root.paused = !root.paused
             nodeModel.pause = root.paused
         }
+        FocusBorder {
+            visible: root.activeFocus
+        }
     }
 
     states: [

src/qml/controls/ContinueButton.qml

@@ -43,6 +43,10 @@ Button {
         Behavior on color {
             ColorAnimation { duration: 150 }
         }
+
+        FocusBorder {
+            visible: root.visualFocus
+        }
     }
     MouseArea {
         anchors.fill: parent

src/qml/controls/NavButton.qml

@@ -41,6 +41,10 @@ AbstractButton {
             }
         ]
 
+        FocusBorder {
+            visible: root.visualFocus
+        }
+
         Behavior on color {
             ColorAnimation { duration: 150 }
         }

src/qml/controls/OptionButton.qml

@@ -18,15 +18,9 @@ Button {
         border.color: button.checked ? Theme.color.orange : button.hovered ? Theme.color.neutral9 : Theme.color.neutral5
         radius: 10
         color: "transparent"
-        Rectangle {
+        FocusBorder {
             visible: button.visualFocus
-            anchors.fill: parent
-            anchors.margins: -4
-            border.width: 2
-            border.color: Theme.color.orange
-            radius: 14
-            color: "transparent"
-            opacity: 0.4
+            borderRadius: 14
         }
     }
     contentItem: RowLayout {

src/qml/controls/Setting.qml

@@ -43,6 +43,14 @@ AbstractButton {
         }
     ]
 
+    background: FocusBorder {
+        visible: root.visualFocus
+        topMargin: -4
+        bottomMargin: -4
+        leftMargin: -6
+        rightMargin: -6
+    }
+
     MouseArea {
         id: mouseArea
         anchors.fill: root

src/qml/controls/TextButton.qml

@@ -34,6 +34,10 @@ Button {
         Behavior on color {
             ColorAnimation { duration: 150 }
         }
+
+        FocusBorder {
+            visible: root.visualFocus
+        }
     }
     states: [
         State {