feat: style address bar and surrounding buttons

ui/app/AppLayouts/Browser/BrowserHeader.qml

@@ -3,15 +3,20 @@ import QtQuick.Controls 2.13
 import QtQuick.Layouts 1.13
 import Qt.labs.settings 1.0
 import QtQuick.Controls.Styles 1.0
+import QtWebEngine 1.10
 import "../../../shared"
+import "../../../shared/status"
 import "../../../imports"
 
-Item {
+Rectangle {
     property alias browserSettings: browserSettings
+    readonly property int innerMargin: 12
 
     id: root
     width: parent.width
     height: 45
+    color: Style.current.background
+    border.width: 0
 
     Settings {
         id : browserSettings
@@ -28,6 +33,7 @@ Item {
 
     RowLayout {
         anchors.fill: parent
+        spacing: root.innerMargin
 
         Menu {
             id: historyMenu
@@ -49,9 +55,10 @@ Item {
             }
         }
 
-        ToolButton {
+        StatusIconButton {
             id: backButton
-            icon.source: "../../img/browser/back.png"
+            icon.name: "leave_chat"
+            disabledColor: Style.current.lightGrey
             onClicked: currentWebView.goBack()
             onPressAndHold: {
                 if (currentWebView && (currentWebView.canGoBack || currentWebView.canGoForward)){
@@ -59,24 +66,27 @@ Item {
                 }
             }
             enabled: currentWebView && currentWebView.canGoBack
+            width: 24
+            height: 24
+            Layout.leftMargin: root.innerMargin
+            padding: 6
         }
 
-        ToolButton {
+        StatusIconButton {
             id: forwardButton
-            icon.source: "../../img/browser/forward.png"
+            icon.name: "leave_chat"
+            iconRotation: 180
+            disabledColor: Style.current.lightGrey
             onClicked: currentWebView.goForward()
-            enabled: currentWebView && currentWebView.canGoForward
             onPressAndHold: {
                 if (currentWebView && (currentWebView.canGoBack || currentWebView.canGoForward)){
                     historyMenu.popup(forwardButton.x, forwardButton.y + forwardButton.height)
                 }
             }
-        }
-
-        ToolButton {
-            id: reloadButton
-            icon.source: currentWebView && currentWebView.loading ? "../../img/browser/stop.png" : "../../img/browser/refresh.png"
-            onClicked: currentWebView && currentWebView.loading ? currentWebView.stop() : currentWebView.reload()
+            enabled: currentWebView && currentWebView.canGoForward
+            width: 24
+            height: 24
+            Layout.leftMargin: -root.innerMargin/2
         }
 
         Connections {
@@ -90,30 +100,47 @@ Item {
 
         StyledTextField {
             id: addressBar
+            height: 40
             Layout.fillWidth: true
             background: Rectangle {
-                border.color: Style.current.secondaryText
-                border.width: 1
-                radius: 2
-            }
-            leftPadding: 25
-            Image {
-                anchors.verticalCenter: addressBar.verticalCenter;
-                x: 5
-                z: 2
-                id: faviconImage
-                width: 16; height: 16
-                sourceSize: Qt.size(width, height)
-                source: currentWebView && currentWebView.icon ? currentWebView.icon : ""
+                color: Style.current.inputBackground
+                border.color: Style.current.inputBorderFocus
+                border.width: activeFocus ? 1 : 0
+                radius: 20
             }
+            leftPadding: Style.current.padding
+            placeholderText: qsTr("Enter URL")
             focus: true
             text: ""
+            color: Style.current.textColor
             Keys.onPressed: {
                 // TODO: disable browsing local files?  file://
                 if (event.key === Qt.Key_Enter || event.key === Qt.Key_Return){
                     currentWebView.url = determineRealURL(text);
                 }
             }
+
+            // TODO move this to the tab
+//            Image {
+//                anchors.verticalCenter: addressBar.verticalCenter;
+//                x: 5
+//                z: 2
+//                id: faviconImage
+//                width: 16; height: 16
+//                sourceSize: Qt.size(width, height)
+//                source: currentWebView && currentWebView.icon ? currentWebView.icon : ""
+            //            }
+
+            StatusIconButton {
+                id: chatCommandsBtn
+                icon.name: currentWebView && currentWebView.loading ? "close" : "browser/refresh"
+                anchors.verticalCenter: parent.verticalCenter
+                anchors.right: parent.right
+                anchors.rightMargin: Style.current.halfPadding
+                onClicked: currentWebView && currentWebView.loading ? currentWebView.stop() : currentWebView.reload()
+                width: 24
+                height: 24
+            }
         }
 
         Menu {
@@ -143,27 +170,13 @@ Item {
             }
         }
 
-        ToolButton {
+        StatusIconButton {
             id: accountBtn
-            Rectangle {
-                id: rectAccountBtn
-                anchors.centerIn: parent
-                width: 20
-                height: width
-                radius: width / 2
-                color: "#ff0000"
-                StyledText {
-                    id: txtAccountBtn
-                    text: ""
-                    opacity: 0.7
-                    font.weight: Font.Bold
-                    font.pixelSize: 14
-                    color: "white"
-                    anchors.horizontalCenter: parent.horizontalCenter
-                    anchors.verticalCenter: parent.verticalCenter
-                }
-            }
+            icon.name: "walletIcon"
             onClicked: accountsMenu.popup(accountBtn.x, accountBtn.y + accountBtn.height)
+            width: 24
+            height: 24
+            padding: 6
         }
 
         Menu {
@@ -249,13 +262,23 @@ Item {
             }
         }
 
-        ToolButton {
+        StatusIconButton {
             id: settingsMenuButton
-            text: qsTr("⋮")
+            icon.name: "dots-icon"
             onClicked: settingsMenu.open()
+            width: 24
+            height: 24
+            Layout.rightMargin: root.innerMargin
+            padding: 6
         }
     }
 }
 
 
 
+
+/*##^##
+Designer {
+    D{i:0;width:700}
+}
+##^##*/

ui/app/img/browser/refresh.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 6.25C16.2802 6.25 19.75 9.71979 19.75 14C19.75 18.2802 16.2802 21.75 12 21.75C7.71979 21.75 4.25 18.2802 4.25 14C4.25 13.5858 4.58579 13.25 5 13.25C5.41421 13.25 5.75 13.5858 5.75 14C5.75 17.4518 8.54822 20.25 12 20.25C15.4518 20.25 18.25 17.4518 18.25 14C18.25 10.5482 15.4518 7.75 12 7.75H11.0178C10.5723 7.75 10.3492 8.28857 10.6642 8.60355L12.5303 10.4697C12.8232 10.7626 12.8232 11.2374 12.5303 11.5303C12.2374 11.8232 11.7626 11.8232 11.4697 11.5303L7.46967 7.53033C7.17678 7.23744 7.17678 6.76256 7.46967 6.46967L11.4697 2.46967C11.7626 2.17678 12.2374 2.17678 12.5303 2.46967C12.8232 2.76256 12.8232 3.23744 12.5303 3.53033L10.6642 5.39645C10.3492 5.71143 10.5723 6.25 11.0178 6.25H12Z" fill="#939BA1"/>
+</svg>

ui/shared/status/StatusIconButton.qml

@@ -8,13 +8,21 @@ RoundButton {
     id: control
 
     property string type: "primary"
+    property color disabledColor: Style.current.secondaryText
+    property int iconRotation: 0
 
     implicitHeight: 32
     implicitWidth: 32
 
     icon.height: 20
     icon.width: 20
-    icon.color: (hovered || highlighted) ? Style.current.blue : Style.current.darkGrey
+    icon.color: {
+        if (!enabled) {
+            return control.disabledColor
+        }
+
+        return (hovered || highlighted) ? Style.current.blue : Style.current.secondaryText
+    }
     radius: Style.current.radius
 
     onIconChanged: {
@@ -44,15 +52,17 @@ RoundButton {
             anchors.horizontalCenter: parent.horizontalCenter
             anchors.verticalCenter: parent.verticalCenter
             fillMode: Image.PreserveAspectFit
+            rotation: control.iconRotation
         }
-
         ColorOverlay {
             anchors.fill: iconImg
             source: iconImg
             color: control.icon.color
             antialiasing: true
             smooth: true
+            rotation: control.iconRotation
         }
+
     }
 
     MouseArea {