diff --git a/storybook/qmlTests/tests/tst_DappsComboBox.qml b/storybook/qmlTests/tests/tst_DappsComboBox.qml index a5d1dafb99f..5d7c92e2ba7 100644 --- a/storybook/qmlTests/tests/tst_DappsComboBox.qml +++ b/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) } diff --git a/ui/StatusQ/src/StatusQ/Core/Theme/StatusDarkTheme.qml b/ui/StatusQ/src/StatusQ/Core/Theme/StatusDarkTheme.qml index 1d7e7f0d053..0b6f6e21495 100644 --- a/ui/StatusQ/src/StatusQ/Core/Theme/StatusDarkTheme.qml +++ b/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) } } diff --git a/ui/StatusQ/src/StatusQ/Core/Theme/StatusLightTheme.qml b/ui/StatusQ/src/StatusQ/Core/Theme/StatusLightTheme.qml index 10bdc66293a..7d1211ed400 100644 --- a/ui/StatusQ/src/StatusQ/Core/Theme/StatusLightTheme.qml +++ b/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) } } diff --git a/ui/StatusQ/src/StatusQ/Core/Theme/ThemePalette.qml b/ui/StatusQ/src/StatusQ/Core/Theme/ThemePalette.qml index 5dbb3fdd7a4..bb0da8407a9 100644 --- a/ui/StatusQ/src/StatusQ/Core/Theme/ThemePalette.qml +++ b/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 diff --git a/ui/StatusQ/src/StatusQ/Layout/StatusSectionLayout.qml b/ui/StatusQ/src/StatusQ/Layout/StatusSectionLayout.qml index 19b3bbc33c5..3ae966e0063 100644 --- a/ui/StatusQ/src/StatusQ/Layout/StatusSectionLayout.qml +++ b/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 diff --git a/ui/StatusQ/src/StatusQ/Layout/StatusSectionLayoutLandscape.qml b/ui/StatusQ/src/StatusQ/Layout/StatusSectionLayoutLandscape.qml index 749593a2ed9..c59e5aaf7b9 100644 --- a/ui/StatusQ/src/StatusQ/Layout/StatusSectionLayoutLandscape.qml +++ b/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 { diff --git a/ui/StatusQ/src/StatusQ/Layout/StatusSectionLayoutPortrait.qml b/ui/StatusQ/src/StatusQ/Layout/StatusSectionLayoutPortrait.qml index 81340ce4f62..908ed7a83cf 100644 --- a/ui/StatusQ/src/StatusQ/Layout/StatusSectionLayoutPortrait.qml +++ b/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 { diff --git a/ui/app/AppLayouts/Browser/BrowserLayout.qml b/ui/app/AppLayouts/Browser/BrowserLayout.qml index 907bae2d10b..cabc58ba644 100644 --- a/ui/app/AppLayouts/Browser/BrowserLayout.qml +++ b/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 diff --git a/ui/app/AppLayouts/Browser/controls/BrowserHeaderButton.qml b/ui/app/AppLayouts/Browser/controls/BrowserHeaderButton.qml new file mode 100644 index 00000000000..7f0f604bc00 --- /dev/null +++ b/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 +} diff --git a/ui/app/AppLayouts/Browser/controls/qmldir b/ui/app/AppLayouts/Browser/controls/qmldir index f69b7b325a9..8eebc67ef7c 100644 --- a/ui/app/AppLayouts/Browser/controls/qmldir +++ b/ui/app/AppLayouts/Browser/controls/qmldir @@ -1 +1,2 @@ DownloadElement 1.0 DownloadElement.qml +BrowserHeaderButton 1.0 BrowserHeaderButton.qml diff --git a/ui/app/AppLayouts/Browser/panels/BrowserHeader.qml b/ui/app/AppLayouts/Browser/panels/BrowserHeader.qml index 7a57619a315..c8c85450bc6 100644 --- a/ui/app/AppLayouts/Browser/panels/BrowserHeader.qml +++ b/ui/app/AppLayouts/Browser/panels/BrowserHeader.qml @@ -1,18 +1,12 @@ import QtQuick -import QtQuick.Controls import QtQuick.Layouts import StatusQ.Controls import StatusQ.Core.Theme import StatusQ.Core.Utils as SQUtils -import shared.controls import AppLayouts.Wallet.controls - -import utils - -import "../popups" -import "../controls" +import AppLayouts.Browser.controls Rectangle { id: root @@ -34,7 +28,7 @@ Rectangle { property var browserDappsModel: null property int browserDappsCount: 0 - signal addNewFavoriteClicked(int xPos) + signal addNewFavoriteClicked() signal launchInBrowser(string url) signal openHistoryPopup(int xPos, int yPos) signal goForward() @@ -53,7 +47,9 @@ Rectangle { width: parent.width height: barRow.height + (favoritesBarLoader.active ? favoritesBarLoader.height : 0) - color: root.currentTabIncognito ? Theme.palette.privacyModeColors.navBarSecondaryColor: Theme.palette.background + color: root.currentTabIncognito ? + Theme.palette.privacyColors.primary: + Theme.palette.background RowLayout { id: barRow @@ -61,16 +57,13 @@ Rectangle { height: 56 spacing: _internal.innerMargin - StatusFlatRoundButton { + BrowserHeaderButton { id: backButton - Layout.preferredWidth: _internal.buttonSize - Layout.preferredHeight: _internal.buttonSize + Layout.leftMargin: _internal.innerMargin + incognitoMode: root.currentTabIncognito icon.name: "arrow-left" - icon.disabledColor: Theme.palette.baseColor2 - type: StatusFlatRoundButton.Type.Tertiary enabled: canGoBack - sensor.acceptedButtons: Qt.LeftButton | Qt.RightButton onClicked: function(mouse) { if (mouse.button === Qt.RightButton) { openHistoryPopup(backButton.x, backButton.y + backButton.height) @@ -84,16 +77,13 @@ Rectangle { } } - StatusFlatRoundButton { + BrowserHeaderButton { id: forwardButton - Layout.preferredWidth: _internal.buttonSize - Layout.preferredHeight: _internal.buttonSize + Layout.leftMargin: -_internal.innerMargin/2 + incognitoMode: root.currentTabIncognito icon.name: "arrow-right" - icon.disabledColor: Theme.palette.baseColor2 - type: StatusFlatRoundButton.Type.Tertiary enabled: canGoForward - sensor.acceptedButtons: Qt.LeftButton | Qt.RightButton onClicked: function(mouse) { if (mouse.button === Qt.RightButton) { openHistoryPopup(forwardButton.x, forwardButton.y + forwardButton.height) @@ -107,21 +97,34 @@ Rectangle { } } + BrowserHeaderButton { + id: reloadBtn + + Layout.leftMargin: -_internal.innerMargin/2 + incognitoMode: root.currentTabIncognito + icon.name: isLoading ? "close-circle" : "refresh" + onClicked: isLoading ? stopLoading(): reload() + } + StatusTextField { id: addressBar Layout.preferredHeight: 40 Layout.fillWidth: true background: Rectangle { - color: Theme.palette.baseColor2 - border.color: parent.cursorVisible ? Theme.palette.primaryColor1 : Theme.palette.primaryColor2 - border.width: 1 + color: root.currentTabIncognito ? + Theme.palette.privacyColors.secondary: + Theme.palette.baseColor2 + border.color: addressBar.cursorVisible ? Theme.palette.primaryColor1 : Theme.palette.primaryColor2 + border.width: root.currentTabIncognito ? 0: 1 radius: 20 } leftPadding: Theme.padding rightPadding: addFavoriteBtn.width + reloadBtn.width + Theme.bigPadding placeholderText: qsTr("Enter URL") focus: !SQUtils.Utils.isMobile - color: Theme.palette.textColor + color: root.currentTabIncognito ? + Theme.palette.privacyColors.tertiary: + Theme.palette.textColor onActiveFocusChanged: { if (activeFocus) { addressBar.selectAll() @@ -133,39 +136,24 @@ Rectangle { launchInBrowser(text) } } + } - StatusFlatRoundButton { - id: addFavoriteBtn - width: 24 - height: 24 - anchors.verticalCenter: parent.verticalCenter - anchors.right: reloadBtn.left - anchors.rightMargin: Theme.halfPadding - visible: !!currentUrl - icon.name: !!root.currentFavorite ? "favourite-filled" : "favourite" - color: "transparent" - type: StatusFlatRoundButton.Type.Tertiary - onClicked: addNewFavoriteClicked(addFavoriteBtn.x) - } + BrowserHeaderButton { + id: addFavoriteBtn - StatusFlatRoundButton { - id: reloadBtn - width: 24 - height: 24 - anchors.verticalCenter: parent.verticalCenter - anchors.right: parent.right - anchors.rightMargin: Theme.halfPadding - icon.name: isLoading ? "close-circle" : "refresh" - color: "transparent" - type: StatusFlatRoundButton.Type.Tertiary - onClicked: isLoading ? stopLoading(): reload() - } + visible: !!currentUrl + incognitoMode: root.currentTabIncognito + icon.name: !!root.currentFavorite ? "favourite-filled" : "favourite" + onClicked: addNewFavoriteClicked() } DappsComboBox { Layout.preferredWidth: _internal.buttonSize Layout.preferredHeight: _internal.buttonSize spacing: 8 + + incognitoMode: root.currentTabIncognito + popupDirectParent: root visible: true enabled: true @@ -187,29 +175,21 @@ Rectangle { } Loader { - Layout.preferredWidth: _internal.buttonSize - Layout.preferredHeight: _internal.buttonSize active: true - sourceComponent: accountBtnCompoent - } - - Component { - id: accountBtnCompoent - StatusFlatRoundButton { - icon.name: "filled-account" - type: StatusFlatRoundButton.Type.Tertiary + sourceComponent: BrowserHeaderButton { + incognitoMode: root.currentTabIncognito + icon.name: "homepage/wallet" onPressed: { root.openWalletMenu() } } } - StatusFlatRoundButton { + BrowserHeaderButton { id: settingsMenuButton - Layout.preferredHeight: _internal.buttonSize - Layout.preferredWidth: _internal.buttonSize + + incognitoMode: root.currentTabIncognito icon.name: "more" - type: StatusFlatRoundButton.Type.Tertiary Layout.rightMargin: _internal.innerMargin highlighted: settingMenu.opened onClicked: { diff --git a/ui/app/AppLayouts/Browser/panels/BrowserTabView.qml b/ui/app/AppLayouts/Browser/panels/BrowserTabView.qml index 49591ebfca4..25f6d3ded1b 100644 --- a/ui/app/AppLayouts/Browser/panels/BrowserTabView.qml +++ b/ui/app/AppLayouts/Browser/panels/BrowserTabView.qml @@ -47,7 +47,7 @@ FocusScope { id: tabBar anchors.top: parent.top anchors.left: parent.left - anchors.right: standaloneAddTabButton.visible ? standaloneAddTabButton.left : parent.right + anchors.right: parent.right height: root.tabHeight background: Rectangle { color: Theme.palette.statusAppNavBar.backgroundColor @@ -63,14 +63,8 @@ FocusScope { snapMode: ListView.SnapToItem clip: true - footer: Item { - width: d.tabHeight - height: d.tabHeight + footer: AddTabButton{ visible: !d.tabBarOverflowing - AddTabButton { - anchors.centerIn: parent - padding: 4 - } } TapHandler { @@ -82,10 +76,10 @@ FocusScope { AddTabButton { id: standaloneAddTabButton + anchors.top: parent.top anchors.right: parent.right - width: d.tabHeight - height: d.tabHeight + color: Theme.palette.statusAppNavBar.backgroundColor visible: d.tabBarOverflowing } @@ -155,11 +149,17 @@ FocusScope { tab.destroy() } - component AddTabButton: StatusFlatButton { - isRoundIcon: true - icon.name: "add-tab" - type: StatusBaseButton.Type.Primary - onClicked: root.openNewTabTriggered() + component AddTabButton: Rectangle { + color: Theme.palette.transparent + width: d.tabHeight + height: d.tabHeight + StatusFlatButton { + anchors.fill: parent + anchors.margins: 4 + icon.name: "add" + type: StatusBaseButton.Type.Primary + onClicked: root.openNewTabTriggered() + } } Component { @@ -182,11 +182,11 @@ FocusScope { color: { if (tabButton.checked) { if(tabButton.incognito) - return Theme.palette.privacyModeColors.navBarSecondaryColor + return Theme.palette.privacyColors.primary return Theme.palette.background } else { if(tabButton.incognito) - return Theme.palette.privacyModeColors.navBarColor + return Theme.palette.privacyColors.secondary return Theme.palette.baseColor2 } } diff --git a/ui/app/AppLayouts/Browser/popups/AddFavoriteModal.qml b/ui/app/AppLayouts/Browser/popups/AddFavoriteModal.qml index 805c99ea818..f320c7552b5 100644 --- a/ui/app/AppLayouts/Browser/popups/AddFavoriteModal.qml +++ b/ui/app/AppLayouts/Browser/popups/AddFavoriteModal.qml @@ -17,6 +17,7 @@ import AppLayouts.Browser.stores as BrowserStores ModalPopup { id: root + required property bool incognitoMode required property BrowserStores.BookmarksStore bookmarksStore property string ogUrl: "" @@ -31,7 +32,9 @@ ModalPopup { background: Rectangle { id: bgPopup - color: Theme.palette.background + color: root.incognitoMode? + Theme.palette.privacyColors.primary: + Theme.palette.background radius: Theme.radius layer.enabled: true layer.effect: DropShadow { diff --git a/ui/app/AppLayouts/Browser/popups/BrowserSettingsMenu.qml b/ui/app/AppLayouts/Browser/popups/BrowserSettingsMenu.qml index 5670539506f..5781e3b37f2 100644 --- a/ui/app/AppLayouts/Browser/popups/BrowserSettingsMenu.qml +++ b/ui/app/AppLayouts/Browser/popups/BrowserSettingsMenu.qml @@ -10,7 +10,7 @@ import StatusQ.Popups StatusMenu { id: root - required property bool isIncognito + required property bool incognitoMode required property real zoomFactor visualizeShortcuts: true @@ -25,6 +25,13 @@ StatusMenu { signal toggleCompatibilityMode(bool checked) signal launchBrowserSettings() + background: Rectangle { + color: root.incognitoMode ? + Theme.palette.privacyColors.primary: + Theme.palette.statusMenu.backgroundColor + radius: Theme.radius + } + StatusAction { text: qsTr("New Tab") icon.name: "add-tab" @@ -37,7 +44,7 @@ StatusMenu { icon.name: "hide" text: checked ? qsTr("Exit Incognito mode") : qsTr("Go Incognito") checkable: true - checked: isIncognito + checked: root.incognitoMode onToggled: goIncognito(checked) } diff --git a/ui/app/AppLayouts/Browser/popups/BrowserWalletMenu.qml b/ui/app/AppLayouts/Browser/popups/BrowserWalletMenu.qml index 705a7380186..6f07cf36092 100644 --- a/ui/app/AppLayouts/Browser/popups/BrowserWalletMenu.qml +++ b/ui/app/AppLayouts/Browser/popups/BrowserWalletMenu.qml @@ -18,6 +18,7 @@ import AppLayouts.Browser.stores as BrowserStores Dialog { id: root + required property bool incognitoMode required property BrowserStores.BrowserWalletStore browserWalletStore signal sendTriggered(string address) @@ -32,7 +33,9 @@ Dialog { height: contentItem.childrenRect.height + 2 * Theme.padding background: Rectangle { id: bgPopup - color: Theme.palette.background + color: root.incognitoMode ? + Theme.palette.privacyColors.primary: + Theme.palette.background radius: Theme.radius layer.enabled: true layer.effect: DropShadow { diff --git a/ui/app/AppLayouts/Browser/popups/FavoriteMenu.qml b/ui/app/AppLayouts/Browser/popups/FavoriteMenu.qml index 594ee8725ac..5d1ee58ab5b 100644 --- a/ui/app/AppLayouts/Browser/popups/FavoriteMenu.qml +++ b/ui/app/AppLayouts/Browser/popups/FavoriteMenu.qml @@ -2,6 +2,7 @@ import QtQuick import QtQuick.Controls import StatusQ.Popups +import StatusQ.Core.Theme import AppLayouts.Browser.stores as BrowserStores @@ -16,6 +17,11 @@ StatusMenu { signal openInNewTab(url url) signal editFavoriteTriggered() + background: Rectangle { + color: Theme.palette.statusMenu.backgroundColor + radius: Theme.radius + } + StatusAction { text: qsTr("Open in new Tab") icon.name: "generate_account" diff --git a/ui/app/AppLayouts/Wallet/controls/DappsComboBox.qml b/ui/app/AppLayouts/Wallet/controls/DappsComboBox.qml index 246a1ac9dc4..66375cf2bf6 100644 --- a/ui/app/AppLayouts/Wallet/controls/DappsComboBox.qml +++ b/ui/app/AppLayouts/Wallet/controls/DappsComboBox.qml @@ -23,6 +23,8 @@ ComboBox { property bool showConnectButton: true property bool dappClickable: true + property bool incognitoMode: false + property var popupDirectParent: root implicitHeight: 38 implicitWidth: 38 @@ -30,10 +32,18 @@ ComboBox { background: SQP.StatusComboboxBackground { objectName: "dappsBackground" active: root.down || root.hovered - Binding on color { - when: !root.enabled - value: Theme.palette.baseColor2 + color: { + if (!root.enabled) + return Theme.palette.baseColor2 + + if (!root.hovered) + return Theme.palette.transparent + + return root.incognitoMode + ? Theme.palette.privacyColors.secondary + : Theme.palette.directColor8; } + border.width: 0 } indicator: null @@ -53,10 +63,13 @@ ComboBox { StatusIcon { objectName: "dappIcon" anchors.centerIn: parent - width: 16 - height: 16 + width: 24 + height: 24 icon: "dapp" - color: Theme.palette.baseColor1 + color: root.incognitoMode ? + Theme.palette.privacyColors.tertiary: + hovered ? Theme.palette.primaryColor1: + Theme.palette.baseColor1 } } @@ -76,18 +89,25 @@ ComboBox { popup: DAppsListPopup { objectName: "dappsListPopup" - directParent: root + directParent: root.popupDirectParent relativeX: { - const globalX = root.mapToGlobal(root.width / 2, 0).x + const globalX = directParent.mapToGlobal(directParent.width / 2, 0).x if (globalX < root.Window.width / 2) return 0 - return root.width - width + return directParent.width - width } - relativeY: root.height + 4 + relativeY: directParent.height + 4 closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent + background: Rectangle { + color: root.incognitoMode ? + Theme.palette.privacyColors.primary: + Theme.palette.statusMenu.backgroundColor + radius: Theme.radius + } + delegateModel: root.delegateModel showConnectButton: root.showConnectButton diff --git a/ui/imports/shared/popups/walletconnect/DAppsListPopup.qml b/ui/imports/shared/popups/walletconnect/DAppsListPopup.qml index 9549975f4d5..25d8548a043 100644 --- a/ui/imports/shared/popups/walletconnect/DAppsListPopup.qml +++ b/ui/imports/shared/popups/walletconnect/DAppsListPopup.qml @@ -24,6 +24,7 @@ StatusDropdown { width: 312 padding: 0 + bottomPadding: Theme.halfPadding modal: false @@ -36,6 +37,7 @@ StatusDropdown { id: listPlaceholder text: qsTr("Connected dApps will appear here") + textColor: Theme.palette.textColor Layout.fillWidth: true Layout.preferredHeight: 44 @@ -63,7 +65,7 @@ StatusDropdown { anchors.verticalCenter: parent.verticalCenter font.pixelSize: Theme.tertiaryTextFontSize - color: Theme.palette.baseColor1 + color: Theme.palette.textColor } } diff --git a/ui/imports/shared/popups/walletconnect/controls/DAppDelegate.qml b/ui/imports/shared/popups/walletconnect/controls/DAppDelegate.qml index 58be8c1afcd..54b9fdbf722 100644 --- a/ui/imports/shared/popups/walletconnect/controls/DAppDelegate.qml +++ b/ui/imports/shared/popups/walletconnect/controls/DAppDelegate.qml @@ -92,7 +92,7 @@ StatusMouseArea { Layout.fillWidth: true font.pixelSize: Theme.tertiaryTextFontSize - color: Theme.palette.baseColor1 + color: Theme.palette.directColor5 elide: Text.ElideRight @@ -106,9 +106,7 @@ StatusMouseArea { objectName: "disconnectDappButton" size: StatusBaseButton.Size.Large - asset.color: root.containsMouse ? Theme.palette.directColor1 - : Theme.palette.baseColor1 - + asset.color: Theme.palette.directColor1 icon.name: "disconnect" tooltip.text: qsTr("Disconnect dApp")