From b9594591b096421032b759662cde87e10700574a Mon Sep 17 00:00:00 2001 From: Jonathan Rainville Date: Tue, 16 Mar 2021 15:19:48 -0400 Subject: [PATCH] fix: fix a lot of issues relative to dark theme Fixes #1997 --- ui/app/AppLayouts/Chat/ChatColumn/Message.qml | 2 +- ui/app/AppLayouts/Chat/CommunityColumn.qml | 1 + .../Chat/ContactsColumn/AddChat.qml | 1 + .../Chat/ContactsColumn/ChannelList.qml | 2 +- .../Chat/components/GroupChatPopup.qml | 1 + .../Chat/components/NoFriendsRectangle.qml | 2 +- .../Profile/Sections/ContactsContainer.qml | 1 + .../AppLayouts/Profile/Sections/Ens/List.qml | 1 + .../Profile/Sections/NetworksModal.qml | 1 + .../Profile/Sections/SyncContainer.qml | 1 + .../Wallet/AccountSettingsModal.qml | 1 - ui/app/AppLayouts/Wallet/LeftTab.qml | 9 +++--- ui/app/AppLayouts/Wallet/WalletHeader.qml | 2 +- ui/app/AppLayouts/Wallet/WalletLayout.qml | 3 -- .../Wallet/components/AddAccount.qml | 1 + .../components/AddAccountWithPrivateKey.qml | 3 +- .../Wallet/components/AddAccountWithSeed.qml | 3 +- .../Wallet/components/AddWatchOnlyAccount.qml | 3 +- .../components/GenerateAccountModal.qml | 8 ++--- .../Wallet/components/HeaderButton.qml | 7 +++++ ui/imports/Constants.qml | 13 ++------- ui/imports/Themes/DarkTheme.qml | 27 +++++++++++++---- ui/imports/Themes/LightTheme.qml | 15 ++++++++++ ui/imports/Themes/Theme.qml | 4 +++ ui/imports/Utils.qml | 19 ++++++++++++ ui/onboarding/Login.qml | 1 + ui/shared/StatusTabButton.qml | 3 +- ui/shared/status/StatusButton.qml | 2 +- ui/shared/status/StatusChatInputReplyArea.qml | 8 ++--- ui/shared/status/StatusCheckBox.qml | 2 +- ui/shared/status/StatusRoundButton.qml | 8 ++--- ui/shared/status/StatusStickersPopup.qml | 1 + ui/shared/status/StatusWalletColorButton.qml | 2 +- ui/shared/status/StatusWalletColorSelect.qml | 29 ++++++++++++------- 34 files changed, 125 insertions(+), 62 deletions(-) diff --git a/ui/app/AppLayouts/Chat/ChatColumn/Message.qml b/ui/app/AppLayouts/Chat/ChatColumn/Message.qml index 5e22d839c9..bac5ff2afc 100644 --- a/ui/app/AppLayouts/Chat/ChatColumn/Message.qml +++ b/ui/app/AppLayouts/Chat/ChatColumn/Message.qml @@ -214,7 +214,7 @@ Item { anchors.topMargin: 3 anchors.horizontalCenter: parent.horizontalCenter horizontalAlignment: Text.AlignHCenter - color: Style.current.darkGrey + color: Style.current.secondaryText //% "before %1" text: qsTrId("before--1").arg(new Date(chatsModel.oldestMsgTimestamp*1000).toDateString()) } diff --git a/ui/app/AppLayouts/Chat/CommunityColumn.qml b/ui/app/AppLayouts/Chat/CommunityColumn.qml index 11f3f7430f..097387d33b 100644 --- a/ui/app/AppLayouts/Chat/CommunityColumn.qml +++ b/ui/app/AppLayouts/Chat/CommunityColumn.qml @@ -46,6 +46,7 @@ Item { pressedIconRotation: 45 icon.name: "plusSign" size: "medium" + type: "secondary" width: 36 height: 36 anchors.right: parent.right diff --git a/ui/app/AppLayouts/Chat/ContactsColumn/AddChat.qml b/ui/app/AppLayouts/Chat/ContactsColumn/AddChat.qml index 61e6066b05..84db9b7f72 100644 --- a/ui/app/AppLayouts/Chat/ContactsColumn/AddChat.qml +++ b/ui/app/AppLayouts/Chat/ContactsColumn/AddChat.qml @@ -9,6 +9,7 @@ StatusRoundButton { pressedIconRotation: 45 icon.name: "plusSign" size: "medium" + type: "secondary" width: 36 height: 36 diff --git a/ui/app/AppLayouts/Chat/ContactsColumn/ChannelList.qml b/ui/app/AppLayouts/Chat/ContactsColumn/ChannelList.qml index 5888b88c9a..784c43c668 100644 --- a/ui/app/AppLayouts/Chat/ContactsColumn/ChannelList.qml +++ b/ui/app/AppLayouts/Chat/ContactsColumn/ChannelList.qml @@ -66,7 +66,7 @@ Item { StyledText { font.pixelSize: 15 - color: Style.current.darkGrey + color: Style.current.secondaryText anchors.verticalCenter: parent.verticalCenter anchors.horizontalCenter: parent.horizontalCenter //% "No search results" diff --git a/ui/app/AppLayouts/Chat/components/GroupChatPopup.qml b/ui/app/AppLayouts/Chat/components/GroupChatPopup.qml index 4cd7fcb75a..96b89650ab 100644 --- a/ui/app/AppLayouts/Chat/components/GroupChatPopup.qml +++ b/ui/app/AppLayouts/Chat/components/GroupChatPopup.qml @@ -155,6 +155,7 @@ ModalPopup { anchors.bottom: parent.bottom anchors.right: parent.right icon.name: "arrow-right" + type: "secondary" icon.width: 20 icon.height: 16 enabled: !!pubKeys.length diff --git a/ui/app/AppLayouts/Chat/components/NoFriendsRectangle.qml b/ui/app/AppLayouts/Chat/components/NoFriendsRectangle.qml index 7684b6fd3e..289429205d 100644 --- a/ui/app/AppLayouts/Chat/components/NoFriendsRectangle.qml +++ b/ui/app/AppLayouts/Chat/components/NoFriendsRectangle.qml @@ -3,7 +3,7 @@ import "../../../../imports" import "../../../../shared" import "../../../../shared/status" -Rectangle { +Item { id: noContactsRect width: 260 //% "You don’t have any contacts yet. Invite your friends to start chatting." diff --git a/ui/app/AppLayouts/Profile/Sections/ContactsContainer.qml b/ui/app/AppLayouts/Profile/Sections/ContactsContainer.qml index facae8ab25..d544950ead 100644 --- a/ui/app/AppLayouts/Profile/Sections/ContactsContainer.qml +++ b/ui/app/AppLayouts/Profile/Sections/ContactsContainer.qml @@ -41,6 +41,7 @@ Item { id: addButton icon.name: "plusSign" size: "medium" + type: "secondary" anchors.verticalCenter: parent.verticalCenter } diff --git a/ui/app/AppLayouts/Profile/Sections/Ens/List.qml b/ui/app/AppLayouts/Profile/Sections/Ens/List.qml index f196df03fc..c31a62def2 100644 --- a/ui/app/AppLayouts/Profile/Sections/Ens/List.qml +++ b/ui/app/AppLayouts/Profile/Sections/Ens/List.qml @@ -132,6 +132,7 @@ Item { id: addButton icon.name: "plusSign" size: "medium" + type: "secondary" anchors.verticalCenter: parent.verticalCenter } diff --git a/ui/app/AppLayouts/Profile/Sections/NetworksModal.qml b/ui/app/AppLayouts/Profile/Sections/NetworksModal.qml index e3bd4b6f92..51dbf661d6 100644 --- a/ui/app/AppLayouts/Profile/Sections/NetworksModal.qml +++ b/ui/app/AppLayouts/Profile/Sections/NetworksModal.qml @@ -37,6 +37,7 @@ ModalPopup { id: addButton icon.name: "plusSign" size: "medium" + type: "secondary" anchors.verticalCenter: parent.verticalCenter } diff --git a/ui/app/AppLayouts/Profile/Sections/SyncContainer.qml b/ui/app/AppLayouts/Profile/Sections/SyncContainer.qml index d9449db62e..16583660a9 100644 --- a/ui/app/AppLayouts/Profile/Sections/SyncContainer.qml +++ b/ui/app/AppLayouts/Profile/Sections/SyncContainer.qml @@ -49,6 +49,7 @@ Item { id: addButton icon.name: "plusSign" size: "medium" + type: "secondary" anchors.verticalCenter: parent.verticalCenter } diff --git a/ui/app/AppLayouts/Wallet/AccountSettingsModal.qml b/ui/app/AppLayouts/Wallet/AccountSettingsModal.qml index e18f046b27..2d2006b4e9 100644 --- a/ui/app/AppLayouts/Wallet/AccountSettingsModal.qml +++ b/ui/app/AppLayouts/Wallet/AccountSettingsModal.qml @@ -46,7 +46,6 @@ ModalPopup { StatusWalletColorSelect { id: accountColorInput selectedColor: currentAccount.iconColor.toUpperCase() - model: Constants.accountColors anchors.top: accountNameInput.bottom anchors.topMargin: marginBetweenInputs anchors.left: parent.left diff --git a/ui/app/AppLayouts/Wallet/LeftTab.qml b/ui/app/AppLayouts/Wallet/LeftTab.qml index 81dfa30414..83024f9140 100644 --- a/ui/app/AppLayouts/Wallet/LeftTab.qml +++ b/ui/app/AppLayouts/Wallet/LeftTab.qml @@ -75,11 +75,11 @@ Item { id: walletDelegate Rectangle { - property bool selected: index == selectedAccount + property bool selected: index === selectedAccount id: rectangle height: 64 - color: selected ? iconColor : Style.current.transparent + color: selected ? Style.current.buttonForegroundColor : Style.current.transparent radius: Style.current.radius anchors.right: parent.right anchors.rightMargin: Style.current.padding @@ -99,7 +99,8 @@ Item { ColorOverlay { anchors.fill: walletIcon source: walletIcon - color: selected || !iconColor ? Style.current.white : iconColor // change image color + color: selected || !iconColor ? Style.current.white : + Utils.getCurrentThemeAccountColor(iconColor) || Style.current.accountColors[0] } StyledText { id: walletName @@ -129,7 +130,7 @@ Item { anchors.leftMargin: 0 font.pixelSize: 15 font.weight: Font.Medium - color: selected ? Style.current.white : Style.current.darkGrey + color: selected ? Style.current.white : Style.current.secondaryText opacity: selected ? 0.7 : 1 } StyledText { diff --git a/ui/app/AppLayouts/Wallet/WalletHeader.qml b/ui/app/AppLayouts/Wallet/WalletHeader.qml index b1a82f4bcb..9c4b3047f8 100644 --- a/ui/app/AppLayouts/Wallet/WalletHeader.qml +++ b/ui/app/AppLayouts/Wallet/WalletHeader.qml @@ -36,7 +36,7 @@ Item { id: separatorDot width: 8 height: 8 - color: currentAccount.iconColor + color: Style.current.primary anchors.top: title.verticalCenter anchors.topMargin: -3 anchors.left: title.right diff --git a/ui/app/AppLayouts/Wallet/WalletLayout.qml b/ui/app/AppLayouts/Wallet/WalletLayout.qml index bfd1172364..0902cd2088 100644 --- a/ui/app/AppLayouts/Wallet/WalletLayout.qml +++ b/ui/app/AppLayouts/Wallet/WalletLayout.qml @@ -90,13 +90,11 @@ ColumnLayout { StatusTabButton { id: assetBtn - tabColor: walletModel.currentAccount.iconColor //% "Assets" btnText: qsTrId("wallet-assets") } StatusTabButton { id: collectiblesBtn - tabColor: walletModel.currentAccount.iconColor anchors.left: assetBtn.right anchors.leftMargin: 32 //% "Collectibles" @@ -104,7 +102,6 @@ ColumnLayout { } StatusTabButton { id: historyBtn - tabColor: walletModel.currentAccount.iconColor anchors.left: collectiblesBtn.right anchors.leftMargin: 32 //% "History" diff --git a/ui/app/AppLayouts/Wallet/components/AddAccount.qml b/ui/app/AppLayouts/Wallet/components/AddAccount.qml index d912a2e17f..82e09a1a26 100644 --- a/ui/app/AppLayouts/Wallet/components/AddAccount.qml +++ b/ui/app/AppLayouts/Wallet/components/AddAccount.qml @@ -9,6 +9,7 @@ StatusRoundButton { icon.name: "plusSign" pressedIconRotation: 45 size: "medium" + type: "secondary" width: 36 height: 36 diff --git a/ui/app/AppLayouts/Wallet/components/AddAccountWithPrivateKey.qml b/ui/app/AppLayouts/Wallet/components/AddAccountWithPrivateKey.qml index 324c3980a4..8d3c48133d 100644 --- a/ui/app/AppLayouts/Wallet/components/AddAccountWithPrivateKey.qml +++ b/ui/app/AppLayouts/Wallet/components/AddAccountWithPrivateKey.qml @@ -55,7 +55,7 @@ ModalPopup { passwordValidationError = "" privateKeyValidationError = "" accountNameValidationError = "" - accountColorInput.selectedColor = Constants.accountColors[Math.floor(Math.random() * Constants.accountColors.length)] + accountColorInput.selectedColor = Style.current.accountColors[Math.floor(Math.random() * Style.current.accountColors.length)] passwordInput.forceActiveFocus(Qt.MouseFocusReason) } @@ -95,7 +95,6 @@ ModalPopup { StatusWalletColorSelect { id: accountColorInput - model: Constants.accountColors anchors.top: accountNameInput.bottom anchors.topMargin: marginBetweenInputs anchors.left: parent.left diff --git a/ui/app/AppLayouts/Wallet/components/AddAccountWithSeed.qml b/ui/app/AppLayouts/Wallet/components/AddAccountWithSeed.qml index 760322cd19..fbefb477cb 100644 --- a/ui/app/AppLayouts/Wallet/components/AddAccountWithSeed.qml +++ b/ui/app/AppLayouts/Wallet/components/AddAccountWithSeed.qml @@ -59,7 +59,7 @@ ModalPopup { passwordValidationError = ""; seedValidationError = ""; accountNameValidationError = ""; - accountColorInput.selectedColor = Constants.accountColors[Math.floor(Math.random() * Constants.accountColors.length)] + accountColorInput.selectedColor = Style.current.accountColors[Math.floor(Math.random() * Style.current.accountColors.length)] passwordInput.forceActiveFocus(Qt.MouseFocusReason) } @@ -108,7 +108,6 @@ ModalPopup { StatusWalletColorSelect { id: accountColorInput - model: Constants.accountColors anchors.top: accountNameInput.bottom anchors.topMargin: marginBetweenInputs anchors.left: parent.left diff --git a/ui/app/AppLayouts/Wallet/components/AddWatchOnlyAccount.qml b/ui/app/AppLayouts/Wallet/components/AddWatchOnlyAccount.qml index 2adb72628c..d477466aca 100644 --- a/ui/app/AppLayouts/Wallet/components/AddWatchOnlyAccount.qml +++ b/ui/app/AppLayouts/Wallet/components/AddWatchOnlyAccount.qml @@ -41,7 +41,7 @@ ModalPopup { accountNameValidationError = ""; addressInput.text = ""; accountNameInput.text = ""; - accountColorInput.selectedColor = Constants.accountColors[Math.floor(Math.random() * Constants.accountColors.length)] + accountColorInput.selectedColor = Style.current.accountColors[Math.floor(Math.random() * Style.current.accountColors.length)] addressInput.forceActiveFocus(Qt.MouseFocusReason) } @@ -68,7 +68,6 @@ ModalPopup { StatusWalletColorSelect { id: accountColorInput - model: Constants.accountColors anchors.top: accountNameInput.bottom anchors.topMargin: marginBetweenInputs anchors.left: parent.left diff --git a/ui/app/AppLayouts/Wallet/components/GenerateAccountModal.qml b/ui/app/AppLayouts/Wallet/components/GenerateAccountModal.qml index c9bd995992..4230faf7d9 100644 --- a/ui/app/AppLayouts/Wallet/components/GenerateAccountModal.qml +++ b/ui/app/AppLayouts/Wallet/components/GenerateAccountModal.qml @@ -41,7 +41,7 @@ ModalPopup { accountNameValidationError = ""; passwordInput.text = ""; accountNameInput.text = ""; - accountColorInput.selectedColor = Constants.accountColors[Math.floor(Math.random() * Constants.accountColors.length)] + accountColorInput.selectedColor = Style.current.accountColors[Math.floor(Math.random() * Style.current.accountColors.length)] passwordInput.forceActiveFocus(Qt.MouseFocusReason) } @@ -68,12 +68,10 @@ ModalPopup { StatusWalletColorSelect { id: accountColorInput - selectedColor: Constants.accountColors[0] - model: Constants.accountColors + selectedColor: Style.current.accountColors[0] anchors.top: accountNameInput.bottom anchors.topMargin: marginBetweenInputs - anchors.left: parent.left - anchors.right: parent.right + width: parent.width } footer: StatusButton { diff --git a/ui/app/AppLayouts/Wallet/components/HeaderButton.qml b/ui/app/AppLayouts/Wallet/components/HeaderButton.qml index b5b255de23..e27860c94b 100644 --- a/ui/app/AppLayouts/Wallet/components/HeaderButton.qml +++ b/ui/app/AppLayouts/Wallet/components/HeaderButton.qml @@ -1,4 +1,5 @@ import QtQuick 2.13 +import QtGraphicalEffects 1.13 import "../../../../imports" import "../../../../shared" @@ -26,6 +27,12 @@ Rectangle { fillMode: Image.PreserveAspectFit source: imageSource rotation: flipImage ? 180 : 0 + + ColorOverlay { + anchors.fill: parent + source: parent + color: Style.current.primary + } } StyledText { diff --git a/ui/imports/Constants.qml b/ui/imports/Constants.qml index eb37bf7440..ffef294958 100644 --- a/ui/imports/Constants.qml +++ b/ui/imports/Constants.qml @@ -24,6 +24,9 @@ QtObject { readonly property int notificationPopupTTL: 5000 + readonly property string lightThemeName: "light" + readonly property string darkThemeName: "dark" + readonly property string chat: "chat" readonly property string wallet: "wallet" readonly property string timeline: "timeline" @@ -77,16 +80,6 @@ QtObject { readonly property string zeroAddress: "0x0000000000000000000000000000000000000000" - readonly property var accountColors: [ - "#9B832F", - "#D37EF4", - "#1D806F", - "#FA6565", - "#7CDA00", - "#887af9", - "#8B3131" - ] - readonly property string networkMainnet: "mainnet_rpc" readonly property string networkPOA: "poa_rpc" readonly property string networkXDai: "xdai_rpc" diff --git a/ui/imports/Themes/DarkTheme.qml b/ui/imports/Themes/DarkTheme.qml index f6a6019434..0e10a0b8be 100644 --- a/ui/imports/Themes/DarkTheme.qml +++ b/ui/imports/Themes/DarkTheme.qml @@ -2,6 +2,8 @@ import QtQuick 2.13 import "." Theme { + property string name: "dark" + property color white: "#FFFFFF" property color white2: "#FCFCFC" property color black: "#000000" @@ -47,7 +49,7 @@ Theme { property color primaryMenuItemHover: blue property color primaryMenuItemTextHover: almostBlack property color backgroundTertiary: tenPercentBlue - property color pillButtonTextColor: almostBlack + property color pillButtonTextColor: secondaryText property color chatReplyCurrentUser: lightGrey property color codeBackground: "#2E386B" property color primarySelectionColor: "#b4c8ff" @@ -58,25 +60,38 @@ Theme { property color mentionBgColor: "#1a0da4c9" property color mentionMessageColor: "#1a0da4c9" property color mentionMessageHoverColor: "#330da4c9" - + property color replyBackground: "#484848" + property color buttonForegroundColor: blue property color buttonBackgroundColor: secondaryBackground property color buttonSecondaryColor: darkGrey property color buttonDisabledForegroundColor: lightGrey property color buttonDisabledBackgroundColor: darkGrey property color buttonWarnBackgroundColor: "#FFEAEE" + property color buttonOutlineHoveredWarnBackgroundColor: "#4dff5c7b" property color buttonHoveredWarnBackgroundColor: red property color buttonHoveredBackgroundColor: blue property color roundedButtonForegroundColor: white property color roundedButtonBackgroundColor: secondaryBackground - property color roundedButtonSecondaryForegroundColor: white + property color roundedButtonSecondaryForegroundColor: black property color roundedButtonSecondaryBackgroundColor: buttonForegroundColor - property color roundedButtonSecondaryHoveredBackgroundColor: darkAccentBlue + property color roundedButtonSecondaryHoveredBackgroundColor: "#AAC6FF" property color roundedButtonDisabledForegroundColor: buttonDisabledForegroundColor property color roundedButtonDisabledBackgroundColor: buttonDisabledBackgroundColor - property color roundedButtonSecondaryDisabledForegroundColor: roundedButtonForegroundColor - property color roundedButtonSecondaryDisabledBackgroundColor: buttonDisabledForegroundColor + property color roundedButtonSecondaryDisabledForegroundColor: black + property color roundedButtonSecondaryDisabledBackgroundColor: lightGrey property color tooltipBackgroundColor: white property color tooltipForegroundColor: black + + property var accountColors: [ + "#AAC6FF", + "#EAD27B", + "#E6ABFC", + "#10A88E", + "#FB8383", + "#93DB33", + "#ADA3FF", + "#AD4343" + ] } diff --git a/ui/imports/Themes/LightTheme.qml b/ui/imports/Themes/LightTheme.qml index 7141c6241a..78741ef779 100644 --- a/ui/imports/Themes/LightTheme.qml +++ b/ui/imports/Themes/LightTheme.qml @@ -2,6 +2,8 @@ import QtQuick 2.13 import "." Theme { + property string name: "light" + property color white: "#FFFFFF" property color white2: "#FCFCFC" property color black: "#000000" @@ -57,6 +59,7 @@ Theme { property color mentionBgColor: "#1a07bce9" property color mentionMessageColor: "#1a07bce9" property color mentionMessageHoverColor: "#3307bce9" + property color replyBackground: "#d7dadd" property color buttonForegroundColor: blue property color buttonBackgroundColor: secondaryBackground @@ -64,6 +67,7 @@ Theme { property color buttonDisabledForegroundColor: buttonSecondaryColor property color buttonDisabledBackgroundColor: grey property color buttonWarnBackgroundColor: "#FFEAEE" + property color buttonOutlineHoveredWarnBackgroundColor: "#1affeaee" property color buttonHoveredWarnBackgroundColor: red property color buttonHoveredBackgroundColor: blue @@ -78,4 +82,15 @@ Theme { property color roundedButtonSecondaryDisabledBackgroundColor: buttonDisabledForegroundColor property color tooltipBackgroundColor: black property color tooltipForegroundColor: white + + property var accountColors: [ + "#4360DF", + "#9B832F", + "#D37EF4", + "#1D806F", + "#FA6565", + "#7CDA00", + "#887Af9", + "#8B3131" + ] } diff --git a/ui/imports/Themes/Theme.qml b/ui/imports/Themes/Theme.qml index a94a08a2bf..5ab52f1be3 100644 --- a/ui/imports/Themes/Theme.qml +++ b/ui/imports/Themes/Theme.qml @@ -12,6 +12,8 @@ QtObject { property QtObject fontHexLight: FontLoader { id: _fontHexLight; source: "../../fonts/InterStatus/InterStatus-Light.otf"; } property QtObject fontHexRegular: FontLoader { id: _fontHexRegular; source: "../../fonts/InterStatus/InterStatus-Regular.otf"; } + property string name + property color white property color white2 property color black @@ -76,6 +78,8 @@ QtObject { property int tertiaryTextFontSize: 12 property int asideTextFontSize: 10 + property var accountColors + function updateFontSize(fontSize) { switch (fontSize) { case Constants.fontSizeXS: diff --git a/ui/imports/Utils.qml b/ui/imports/Utils.qml index e49404839c..e9dbd9424b 100644 --- a/ui/imports/Utils.qml +++ b/ui/imports/Utils.qml @@ -30,6 +30,25 @@ QtObject { (!startsWith0x(value) && value.length === 64)) } + function getCurrentThemeAccountColor(color) { + const upperCaseColor = color.toUpperCase() + if (Style.current.accountColors.indexOf(upperCaseColor) > -1) { + return upperCaseColor + } + + let colorIndex + if (Style.current.name === Constants.lightThemeName) { + colorIndex = Style.darkTheme.accountColors.indexOf(upperCaseColor) + } else { + colorIndex = Style.lightTheme.accountColors.indexOf(upperCaseColor) + } + if (colorIndex === -1) { + // Unknown color + return false + } + return Style.current.accountColors[colorIndex] + } + function getAppSectionIndex(section) { let sectionId = -1 switch (section) { diff --git a/ui/onboarding/Login.qml b/ui/onboarding/Login.qml index a42254bbb8..a2b49ea8cf 100644 --- a/ui/onboarding/Login.qml +++ b/ui/onboarding/Login.qml @@ -143,6 +143,7 @@ Item { StatusRoundButton { id: submitBtn size: "medium" + type: "secondary" icon.name: "arrow-right" icon.width: 18 icon.height: 14 diff --git a/ui/shared/StatusTabButton.qml b/ui/shared/StatusTabButton.qml index b33c425e92..d73e9d8d76 100644 --- a/ui/shared/StatusTabButton.qml +++ b/ui/shared/StatusTabButton.qml @@ -4,7 +4,6 @@ import "../imports" TabButton { property string btnText: "Default Button" - property string tabColor: Style.current.blue id: tabButton width: tabBtnText.width @@ -26,7 +25,7 @@ TabButton { Rectangle { visible: parent.checked || parent.hovered - color: parent.checked ? tabColor : Style.current.secondaryBackground + color: parent.checked ? Style.current.primary : Style.current.secondaryBackground anchors.bottom: parent.bottom width: 40 anchors.horizontalCenter: parent.horizontalCenter diff --git a/ui/shared/status/StatusButton.qml b/ui/shared/status/StatusButton.qml index 1efa9f96b7..90034544f2 100644 --- a/ui/shared/status/StatusButton.qml +++ b/ui/shared/status/StatusButton.qml @@ -18,7 +18,7 @@ Button { property color bgHoverColor: { if (type === "warn") { if (showBorder) { - return Style.current.buttonWarnBackgroundColor + return Style.current.buttonOutlineHoveredWarnBackgroundColor } return Utils.setColorAlpha(Style.current.buttonHoveredWarnBackgroundColor, 0.2) } diff --git a/ui/shared/status/StatusChatInputReplyArea.qml b/ui/shared/status/StatusChatInputReplyArea.qml index 6782e68752..f84ba158af 100644 --- a/ui/shared/status/StatusChatInputReplyArea.qml +++ b/ui/shared/status/StatusChatInputReplyArea.qml @@ -7,7 +7,7 @@ import "../../shared" Rectangle { id: root height: 50 - color: Style.current.lightGrey + color: Style.current.replyBackground radius: 16 clip: true @@ -29,7 +29,7 @@ Rectangle { StyledText { id: replyToUsername text: "↪ " + userName - color: Style.current.black + color: Style.current.textColor anchors.top: parent.top anchors.topMargin: Style.current.halfPadding anchors.left: parent.left @@ -52,7 +52,7 @@ Rectangle { font.weight: Font.Normal // Eliding only works for PlainText: https://bugreports.qt.io/browse/QTBUG-16567 textFormat: Text.PlainText - color: Style.current.black + color: Style.current.textColor } RoundButton { @@ -74,7 +74,7 @@ Rectangle { ColorOverlay { anchors.fill: iconImg source: iconImg - color: Style.current.black + color: Style.current.textColor antialiasing: true } } diff --git a/ui/shared/status/StatusCheckBox.qml b/ui/shared/status/StatusCheckBox.qml index 446b251f91..fce3ef5d0f 100644 --- a/ui/shared/status/StatusCheckBox.qml +++ b/ui/shared/status/StatusCheckBox.qml @@ -15,7 +15,7 @@ CheckBox { radius: 3 color: (control.down || control.checked) ? Style.current.primary : Style.current.inputBackground - Image { + SVGImage { source: "../img/checkmark.svg" width: 16 height: 16 diff --git a/ui/shared/status/StatusRoundButton.qml b/ui/shared/status/StatusRoundButton.qml index 732737502d..4cb299a949 100644 --- a/ui/shared/status/StatusRoundButton.qml +++ b/ui/shared/status/StatusRoundButton.qml @@ -116,7 +116,7 @@ RoundButton { return 20 } } - icon.color: size === "medium" || size === "small" ? + icon.color: type === "secondary" ? !enabled ? Style.current.roundedButtonSecondaryDisabledForegroundColor : Style.current.roundedButtonSecondaryForegroundColor @@ -131,9 +131,9 @@ RoundButton { background: Rectangle { anchors.fill: parent - opacity: hovered && size === "large" ? 0.2 : 1 + opacity: hovered && size === "large" && type !== "secondary" ? 0.2 : 1 color: { - if (size === "medium" || size == "small") { + if (size === "medium" || size === "small" || type === "secondary") { return !enabled ? Style.current.roundedButtonSecondaryDisabledBackgroundColor : hovered ? (control.type === "warn" ? Style.current.red : Style.current.roundedButtonSecondaryHoveredBackgroundColor) : (control.type === "warn" ? Style.current.lightRed : Style.current.roundedButtonSecondaryBackgroundColor) @@ -182,7 +182,7 @@ RoundButton { anchors.fill: iconImg source: iconImg color: { - if (size === "medium" || size == "small") { + if (type === "secondary") { return !control.enabled ? Style.current.roundedButtonSecondaryDisabledForegroundColor : (control.type === "warn" ? Style.current.danger : Style.current.roundedButtonSecondaryForegroundColor) diff --git a/ui/shared/status/StatusStickersPopup.qml b/ui/shared/status/StatusStickersPopup.qml index 80c013247f..ec8239fd22 100644 --- a/ui/shared/status/StatusStickersPopup.qml +++ b/ui/shared/status/StatusStickersPopup.qml @@ -179,6 +179,7 @@ Popup { StatusRoundButton { id: btnAddStickerPack size: "medium" + type: "secondary" icon.name: "plusSign" implicitWidth: 24 implicitHeight: 24 diff --git a/ui/shared/status/StatusWalletColorButton.qml b/ui/shared/status/StatusWalletColorButton.qml index c456fe5532..b3d2434472 100644 --- a/ui/shared/status/StatusWalletColorButton.qml +++ b/ui/shared/status/StatusWalletColorButton.qml @@ -24,7 +24,7 @@ StatusIconButton { anchors.rightMargin: 2 visible: control.selected radius: width / 2 - color: "#4EBC60" + color: Style.current.green SVGImage { id: checkmark source: "../img/checkmark.svg" diff --git a/ui/shared/status/StatusWalletColorSelect.qml b/ui/shared/status/StatusWalletColorSelect.qml index 6d6cdbf29d..356ef6ffbf 100644 --- a/ui/shared/status/StatusWalletColorSelect.qml +++ b/ui/shared/status/StatusWalletColorSelect.qml @@ -10,7 +10,7 @@ Item { property string selectedColor //% "Account color" property string label: qsTrId("account-color") - property var model + property var model: Style.current.accountColors height: childrenRect.height StyledText { @@ -32,16 +32,25 @@ Item { anchors.right: parent.right Repeater { model: control.model - Item { - height: colorBtn.height - width: colorBtn.width - StatusWalletColorButton { - id: colorBtn - icon.color: modelData - selected: control.selectedColor.toUpperCase() == modelData.toUpperCase() - onClicked: { - control.selectedColor = modelData.toUpperCase() + StatusWalletColorButton { + id: colorBtn + icon.color: modelData + selected: { + const upperCaseColor = control.selectedColor.toUpperCase() + const upperCaseModelDataColor = modelData.toUpperCase() + if (upperCaseColor === upperCaseModelDataColor) { + return true } + // Check the colors in the other theme + const currentColor = Utils.getCurrentThemeAccountColor(upperCaseColor) + if (!currentColor) { + return false + } + + return currentColor === upperCaseModelDataColor + } + onClicked: { + control.selectedColor = modelData.toUpperCase() } } }