feat(@desktop/browser): Improve incognito mode color scheme

storybook/qmlTests/tests/tst_DappsComboBox.qml

@@ -52,8 +52,8 @@ Item {
         function test_dappIcon() {
             const icon = findChild(controlUnderTest, "dappIcon")
             compare(icon.icon, "dapp")
-            compare(icon.width, 16)
-            compare(icon.height, 16)
+            compare(icon.width, 24)
+            compare(icon.height, 24)
             compare(icon.status, Image.Ready)
         }
 

ui/StatusQ/src/StatusQ/Core/Theme/StatusDarkTheme.qml

@@ -187,6 +187,12 @@ ThemePalette {
         property color camel: "#9F7252"
         property color magenta: "#BD1E56"
         property color yinYang: "#FFFFFF"
-        property color purple2: "#7140FD"
+    }
+
+    privacyColors: QtObject {
+        property color primary: "#341D65"
+        property color secondary: "#5B438E"
+        property color tertiary: white
+        property color tertiaryOpaque: getColor(white, 0.3)
     }
 }

ui/StatusQ/src/StatusQ/Core/Theme/StatusLightTheme.qml

@@ -187,6 +187,12 @@ ThemePalette {
         property color camel: "#C78F67"
         property color magenta: "#EC266C"
         property color yinYang: "#09101C"
-        property color purple2: "#5A33CA"
+    }
+
+    privacyColors: QtObject {
+        property color primary: "#BEBBF9"
+        property color secondary: "#D6D7F7"
+        property color tertiary: "#201C76"
+        property color tertiaryOpaque: getColor("#201C76", 0.3)
     }
 }

ui/StatusQ/src/StatusQ/Core/Theme/ThemePalette.qml

@@ -197,7 +197,6 @@ QtObject {
         property color camel
         property color magenta
         property color yinYang
-        property color purple2
     }
 
     readonly property var customisationColorsArray: [
@@ -228,11 +227,17 @@ QtObject {
 
     property QtObject privacyModeColors: QtObject {
         readonly property color navBarColor: customisationColors.purple
-        readonly property color navBarSecondaryColor: customisationColors.purple2
         readonly property color navButtonColor: getColor('white', 0.4)
         readonly property color navButtonHighlightedColor: getColor('white')
     }
 
+    property QtObject privacyColors: QtObject {
+        property color primary
+        property color secondary
+        property color tertiary
+        property color tertiaryOpaque
+    }
+
     function alphaColor(color, alpha) {
         let actualColor = Qt.darker(color, 1)
         actualColor.a = alpha

ui/StatusQ/src/StatusQ/Layout/StatusSectionLayout.qml

@@ -117,6 +117,12 @@ LayoutChooser {
         the header component.
     */
     property Item headerContent
+    /*!
+        \qmlproperty color StatusSectionLayout::backgroundColor
+        This property holds color of the centeral component of
+        the section
+    */
+    property color backgroundColor: Theme.palette.statusAppLayout.rightPanelBackgroundColor
 
     /*!
         \qmlsignal
@@ -167,6 +173,7 @@ LayoutChooser {
         showHeader: root.showHeader
         backButtonName: root.backButtonName
         headerContent: root.headerContent
+        backgroundColor: root.backgroundColor
 
         onBackButtonClicked: root.backButtonClicked()
     }
@@ -185,6 +192,7 @@ LayoutChooser {
         showHeader: root.showHeader
         backButtonName: root.backButtonName
         headerContent: root.headerContent
+        backgroundColor: root.backgroundColor
 
         property int currentIndexCache
 

ui/StatusQ/src/StatusQ/Layout/StatusSectionLayoutLandscape.qml

@@ -112,6 +112,12 @@ SplitView {
     */
     property Item headerContent
 
+    /*!
+        \qmlproperty color StatusSectionLayoutLandscape::backgroundColor
+        This property holds color of the centeral component of
+        the section
+    */
+    property color backgroundColor: Theme.palette.statusAppLayout.rightPanelBackgroundColor
 
     /*!
         \qmlsignal
@@ -149,7 +155,7 @@ SplitView {
         SplitView.fillWidth: (!!centerPanel)
         SplitView.fillHeight: (!!centerPanel)
         background: Rectangle {
-            color: Theme.palette.statusAppLayout.rightPanelBackgroundColor
+            color: root.backgroundColor
         }
         contentItem: Item {
             LayoutItemProxy {

ui/StatusQ/src/StatusQ/Layout/StatusSectionLayoutPortrait.qml

@@ -106,7 +106,12 @@ SwipeView {
         the header component.
     */
     property Item headerContent
-
+    /*!
+        \qmlproperty color StatusSectionLayoutPortrait::backgroundColor
+        This property holds color of the centeral component of
+        the section
+    */
+    property color backgroundColor: Theme.palette.statusAppLayout.rightPanelBackgroundColor
 
     /*!
         \qmlsignal
@@ -149,7 +154,7 @@ SwipeView {
         property bool inView: true
 
         background: Rectangle {
-            color: backgroundColor || Theme.palette.statusAppLayout.rightPanelBackgroundColor
+            color: baseProxyPanel.backgroundColor || root.backgroundColor
         }
         onInViewChanged: {
             // If the panel is not in view, we need to remove it from the swipe view
@@ -185,7 +190,7 @@ SwipeView {
 
     BaseProxyPanel {
         id: centerPanelBase
-        backgroundColor: Theme.palette.statusAppLayout.rightPanelBackgroundColor
+        backgroundColor: root.backgroundColor
         implicitIndex: 1
         inView: !!root.centerPanel
         target: ColumnLayout {

ui/app/AppLayouts/Browser/BrowserLayout.qml

@@ -192,6 +192,7 @@ StatusSectionLayout {
         }
     }
 
+    backgroundColor: Theme.palette.statusAppNavBar.backgroundColor
     centerPanel: Rectangle {
         id: browserWindow
         anchors.fill: parent
@@ -240,11 +241,9 @@ StatusSectionLayout {
             onDisconnectDapp: function(dappUrl) {
                 connectorBridge.disconnect(dappUrl)
             }
-            onAddNewFavoriteClicked: function(xPos) {
+            onAddNewFavoriteClicked: function() {
                 Global.openPopup(addFavoriteModal,
                                  {
-                                     x: xPos - 30,
-                                     y: browserHeader.y + browserHeader.height + 4,
                                      modifiyModal: !!browserHeader.currentFavorite,
                                      toolbarMode: true,
                                      ogUrl: !!browserHeader.currentFavorite ? browserHeader.currentFavorite.url : _internal.currentWebView.url,
@@ -271,7 +270,6 @@ StatusSectionLayout {
             id: tabs
             anchors.top: parent.top
             anchors.bottom: devToolsView.top
-            anchors.bottomMargin: browserHeader.height
             anchors.left: parent.left
             anchors.right: parent.right
             z: 50
@@ -374,9 +372,12 @@ StatusSectionLayout {
 
         BrowserSettingsMenu {
             id: settingsMenu
-            x: parent.width - width
-            y: browserHeader.y + browserHeader.height
-            isIncognito: _internal.currentWebView && _internal.currentWebView.profile === connectorBridge.otrProfile
+
+            parent: browserHeader
+            x: parent.width - width - Theme.halfPadding
+            y: browserHeader.height + 4
+
+            incognitoMode: _internal.currentWebView && _internal.currentWebView.profile === connectorBridge.otrProfile
             zoomFactor: _internal.currentWebView ? _internal.currentWebView.zoomFactor : 1
             onAddNewTab: _internal.addNewTab()
             onAddNewDownloadTab: _internal.addNewDownloadTab()
@@ -418,11 +419,13 @@ StatusSectionLayout {
         Component  {
             id: browserWalletMenu
             BrowserWalletMenu {
+                parent: browserHeader
+                x: browserHeader.width - width - Theme.halfPadding
+                y: browserHeader.height + 4
+
+                incognitoMode: _internal.currentWebView && _internal.currentWebView.profile === connectorBridge.otrProfile
                 browserWalletStore: root.browserWalletStore
-                property point headerPoint: Qt.point(browserHeader.x, browserHeader.y)
-                x: (parent.width - width - Theme.halfPadding)
-                y: (Math.abs(browserHeader.mapFromGlobal(headerPoint).y) +
-                    browserHeader.anchors.topMargin + Theme.halfPadding)
+
                 onSendTriggered: (address) => root.sendToRecipientRequested(address)
                 onAccountChanged: (newAddress) => connectorBridge.connectorManager.changeAccount(newAddress)
                 onReload: {
@@ -437,6 +440,10 @@ StatusSectionLayout {
     Component {
         id: addFavoriteModal
         AddFavoriteModal {
+            parent: browserHeader
+            x: browserHeader.width - width - Theme.halfPadding
+            y: browserHeader.height + 4
+            incognitoMode: _internal.currentWebView && _internal.currentWebView.profile === connectorBridge.otrProfile
             bookmarksStore: root.bookmarksStore
         }
     }
@@ -508,8 +515,6 @@ StatusSectionLayout {
     Component {
         id: webEngineView
         BrowserWebEngineView {
-            anchors.top: parent ? parent.top : undefined
-            anchors.topMargin: browserHeader.height
             bookmarksStore: root.bookmarksStore
             downloadsStore: root.downloadsStore
             currentWebView: _internal.currentWebView

ui/app/AppLayouts/Browser/controls/BrowserHeaderButton.qml

@@ -0,0 +1,27 @@
+import QtQuick
+
+import StatusQ.Core.Theme
+import StatusQ.Controls
+
+StatusFlatRoundButton {
+    id: root
+
+    property bool incognitoMode: false
+
+    // as per design
+    implicitWidth: 40
+    implicitHeight: 40
+
+    type: StatusFlatRoundButton.Type.Tertiary
+    icon.color: root.incognitoMode ?
+                    Theme.palette.privacyColors.tertiary:
+                    hovered ? Theme.palette.primaryColor1:
+                              Theme.palette.baseColor1
+    icon.disabledColor: root.incognitoMode ?
+                            Theme.palette.privacyColors.tertiaryOpaque:
+                            Theme.palette.baseColor2
+    backgroundHoverColor: root.incognitoMode ?
+                              Theme.palette.privacyColors.secondary:
+                              Theme.palette.baseColor2
+    sensor.acceptedButtons: Qt.LeftButton | Qt.RightButton
+}

ui/app/AppLayouts/Browser/controls/qmldir

@@ -1 +1,2 @@
 DownloadElement 1.0 DownloadElement.qml
+BrowserHeaderButton 1.0 BrowserHeaderButton.qml