fix(@desktop/browser): Fix further missing look and feel for browser's

Khushboo-dev-cpp · Khushboo-dev-cpp · commit 434ad3a48544 · 2025-12-02T16:32:16.000+01:00
incognito mode.
diff --git a/ui/StatusQ/src/StatusQ/Layout/StatusSectionLayoutLandscape.qml b/ui/StatusQ/src/StatusQ/Layout/StatusSectionLayoutLandscape.qml
@@ -170,6 +170,7 @@ SplitView {
                 id: statusToolBar
                 anchors.top: parent.top
                 width: visible ? parent.width : 0
+                height: visible ? implicitHeight : 0
                 visible: root.showHeader
                 headerContent: LayoutItemProxy {
                     id: headerContentProxy
@@ -193,6 +194,7 @@ SplitView {
                 height: root.footer ? root.footer.height : 0
                 anchors.bottom: parent.bottom
                 target: root.footer
+                visible: !!target
             }
         }
     }
diff --git a/ui/app/AppLayouts/Browser/BrowserLayout.qml b/ui/app/AppLayouts/Browser/BrowserLayout.qml
@@ -198,6 +198,7 @@ StatusSectionLayout {
         }
     }
 
+    showHeader: false
     backgroundColor: Theme.palette.statusAppNavBar.backgroundColor
     centerPanel: Rectangle {
         id: browserWindow
diff --git a/ui/app/AppLayouts/Browser/controls/BrowserHeaderButton.qml b/ui/app/AppLayouts/Browser/controls/BrowserHeaderButton.qml
@@ -3,25 +3,25 @@ import QtQuick
 import StatusQ.Core.Theme
 import StatusQ.Controls
 
-StatusFlatRoundButton {
+StatusFlatButton {
     id: root
 
     property bool incognitoMode: false
 
     // as per design
-    implicitWidth: 40
-    implicitHeight: 40
+    implicitWidth: 36
+    implicitHeight: 36
+    radius: width/2
 
     type: StatusFlatRoundButton.Type.Tertiary
-    icon.color: root.incognitoMode ?
+    asset.color: root.incognitoMode ?
                     Theme.palette.privacyColors.tertiary:
                     hovered ? Theme.palette.primaryColor1:
                               Theme.palette.baseColor1
-    icon.disabledColor: root.incognitoMode ?
+    asset.disabledColor: root.incognitoMode ?
                             Theme.palette.privacyColors.tertiaryOpaque:
                             Theme.palette.baseColor2
-    backgroundHoverColor: root.incognitoMode ?
+    hoverColor: root.incognitoMode ?
                               Theme.palette.privacyColors.secondary:
                               Theme.palette.baseColor2
-    sensor.acceptedButtons: Qt.LeftButton | Qt.RightButton
 }
diff --git a/ui/app/AppLayouts/Browser/panels/BrowserHeader.qml b/ui/app/AppLayouts/Browser/panels/BrowserHeader.qml
@@ -42,7 +42,7 @@ Rectangle {
     QtObject {
         id: _internal
         readonly property int innerMargin: 12
-        readonly property int buttonSize: 40
+        readonly property int buttonSize: 36
     }
 
     width: parent.width
@@ -54,7 +54,7 @@ Rectangle {
     RowLayout {
         id: barRow
         width: parent.width
-        height: 56
+        height: 48
         spacing: _internal.innerMargin
 
         BrowserHeaderButton {
@@ -108,7 +108,7 @@ Rectangle {
 
         StatusTextField {
             id: addressBar
-            Layout.preferredHeight: 40
+            Layout.preferredHeight: 26
             Layout.fillWidth: true
             background: Rectangle {
                 color: root.currentTabIncognito ?
@@ -121,6 +121,7 @@ Rectangle {
             leftPadding: Theme.padding
             rightPadding: addFavoriteBtn.width + reloadBtn.width + Theme.bigPadding
             placeholderText: qsTr("Enter URL")
+            font.pixelSize: Theme.additionalTextSize
             focus: !SQUtils.Utils.isMobile
             color: root.currentTabIncognito ?
                        Theme.palette.privacyColors.tertiary:
@@ -159,6 +160,7 @@ Rectangle {
             enabled: true
             model: root.browserDappsModel
             showConnectButton: false
+            backgroundRadius: width/2
             
             onDisconnectDapp: function(dappUrl) {
                 root.disconnectDapp(dappUrl)
@@ -174,21 +176,19 @@ Rectangle {
             }
         }
 
-        Loader {
-            active: true
-            sourceComponent: BrowserHeaderButton {
-                incognitoMode: root.currentTabIncognito
-                icon.name: "homepage/wallet"
-                onPressed: {
-                    root.openWalletMenu()
-                }
+        BrowserHeaderButton {
+            incognitoMode: root.currentTabIncognito
+            icon.name: "homepage/wallet"
+            onPressed: {
+                root.openWalletMenu()
             }
         }
 
         BrowserHeaderButton {
             id: settingsMenuButton
 
             incognitoMode: root.currentTabIncognito
+            asset.rotation: 90
             icon.name: "more"
             Layout.rightMargin: _internal.innerMargin
             highlighted: settingMenu.opened
diff --git a/ui/app/AppLayouts/Browser/panels/BrowserTabView.qml b/ui/app/AppLayouts/Browser/panels/BrowserTabView.qml
@@ -8,6 +8,8 @@ import StatusQ.Controls
 import StatusQ.Components
 import StatusQ.Core.Utils as SQUtils
 
+import AppLayouts.Browser.controls
+
 import utils
 
 FocusScope {
@@ -41,6 +43,7 @@ FocusScope {
         readonly property int minTabButtonWidth: 118
         readonly property int maxTabButtonWidth: 236
         readonly property bool tabBarOverflowing: tabBarListView.visibleArea.widthRatio < 1
+        readonly property bool currentTabIcognito: root.getCurrentTab()?.profile?.offTheRecord ?? false
     }
 
     TabBar {
@@ -50,7 +53,9 @@ FocusScope {
         anchors.right: parent.right
         height: root.tabHeight
         background: Rectangle {
-            color: Theme.palette.statusAppNavBar.backgroundColor
+            color: d.currentTabIcognito ?
+                       Theme.palette.privacyColors.secondary:
+                       Theme.palette.statusAppNavBar.backgroundColor
         }
         contentItem: ListView {
             id: tabBarListView
@@ -153,11 +158,15 @@ FocusScope {
         color: Theme.palette.transparent
         width: d.tabHeight
         height: d.tabHeight
-        StatusFlatButton {
+        BrowserHeaderButton {
             anchors.fill: parent
             anchors.margins: 4
+            radius: Theme.radius
             icon.name: "add"
-            type: StatusBaseButton.Type.Primary
+            incognitoMode: d.currentTabIcognito
+            hoverColor: d.currentTabIcognito ?
+                                      Theme.palette.privacyColors.primary:
+                                      Theme.palette.indirectColor1
             onClicked: root.openNewTabTriggered()
         }
     }
diff --git a/ui/app/AppLayouts/Wallet/controls/DappsComboBox.qml b/ui/app/AppLayouts/Wallet/controls/DappsComboBox.qml
@@ -25,6 +25,7 @@ ComboBox {
     property bool dappClickable: true
     property bool incognitoMode: false
     property var popupDirectParent: root
+    property int backgroundRadius: Theme.radius
 
     implicitHeight: 38
     implicitWidth: 38
@@ -44,6 +45,7 @@ ComboBox {
                     : Theme.palette.directColor8;
         }
         border.width: 0
+        radius: root.backgroundRadius
     }
 
     indicator: null

Original file line number	Diff line number	Diff line change
`@@ -170,6 +170,7 @@ SplitView {`
`170`	`170`	`id: statusToolBar`
`171`	`171`	`anchors.top: parent.top`
`172`	`172`	`width: visible ? parent.width : 0`
	`173`	`+ height: visible ? implicitHeight : 0`
`173`	`174`	`visible: root.showHeader`
`174`	`175`	`headerContent: LayoutItemProxy {`
`175`	`176`	`id: headerContentProxy`
`@@ -193,6 +194,7 @@ SplitView {`
`193`	`194`	`height: root.footer ? root.footer.height : 0`
`194`	`195`	`anchors.bottom: parent.bottom`
`195`	`196`	`target: root.footer`
	`197`	`+ visible: !!target`
`196`	`198`	`}`
`197`	`199`	`}`
`198`	`200`	`}`
Original file line number	Diff line number	Diff line change
`@@ -198,6 +198,7 @@ StatusSectionLayout {`
`198`	`198`	`}`
`199`	`199`	`}`
`200`	`200`
	`201`	`+ showHeader: false`
`201`	`202`	`backgroundColor: Theme.palette.statusAppNavBar.backgroundColor`
`202`	`203`	`centerPanel: Rectangle {`
`203`	`204`	`id: browserWindow`
Original file line number	Diff line number	Diff line change
`@@ -25,6 +25,7 @@ ComboBox {`
`25`	`25`	`property bool dappClickable: true`
`26`	`26`	`property bool incognitoMode: false`
`27`	`27`	`property var popupDirectParent: root`
	`28`	`+ property int backgroundRadius: Theme.radius`
`28`	`29`
`29`	`30`	`implicitHeight: 38`
`30`	`31`	`implicitWidth: 38`
`@@ -44,6 +45,7 @@ ComboBox {`
`44`	`45`	`: Theme.palette.directColor8;`
`45`	`46`	`}`
`46`	`47`	`border.width: 0`
	`48`	`+ radius: root.backgroundRadius`
`47`	`49`	`}`
`48`	`50`
`49`	`51`	`indicator: null`