From 92f5a9ca5c0a1f4783578510d6b0f9972c052e21 Mon Sep 17 00:00:00 2001 From: Jonathan Rainville Date: Mon, 13 Jul 2020 14:45:54 -0400 Subject: [PATCH] feat: add dark theme colors and new properties for it --- ui/app/AppLayouts/Chat/ChatColumn.qml | 3 ++- ui/app/AppLayouts/Chat/ChatColumn/ChatInput.qml | 1 + ui/app/AppLayouts/Chat/ChatColumn/Message.qml | 6 +++--- ui/app/AppLayouts/Chat/ChatColumn/TopBar.qml | 6 +++--- ui/app/AppLayouts/Chat/ContactsColumn/Channel.qml | 3 +-- ui/app/AppLayouts/Chat/components/Contact.qml | 1 + .../AppLayouts/Chat/components/GroupChatPopup.qml | 2 +- .../Chat/components/PrivateChatPopup.qml | 2 +- .../AppLayouts/Chat/components/StickersPopup.qml | 4 ++-- .../Chat/components/SuggestedChannel.qml | 4 +++- ui/app/AppLayouts/Node/NodeLayout.qml | 2 +- ui/app/AppLayouts/Profile/LeftTab/Menu.qml | 15 ++------------- ui/app/AppLayouts/Profile/LeftTab/Profile.qml | 1 + .../Profile/Sections/AboutContainer.qml | 1 - .../Profile/Sections/BackupSeedModal.qml | 6 +++--- .../Profile/Sections/PrivacyContainer.qml | 4 ++-- ui/app/AppLayouts/Wallet/AssetsTab.qml | 1 - ui/app/AppLayouts/Wallet/LeftTab.qml | 8 ++++---- ui/app/AppLayouts/Wallet/SetCurrencyModal.qml | 2 +- ui/app/AppLayouts/Wallet/WalletLayout.qml | 9 ++++++--- ui/app/AppMain.qml | 12 ++++++------ ui/imports/Themes/DarkTheme.qml | 10 +++++++++- ui/imports/Themes/LightTheme.qml | 7 +++++++ ui/imports/Themes/Theme.qml | 7 +++++++ ui/main.qml | 2 +- ui/onboarding/Intro.qml | 1 - ui/shared/Input.qml | 2 +- ui/shared/ModalPopup.qml | 13 ++++++++++--- ui/shared/PopupMenu.qml | 6 +++--- ui/shared/Select.qml | 1 - ui/shared/Separator.qml | 2 +- ui/shared/SplitViewHandle.qml | 2 +- ui/shared/StatusTabButton.qml | 2 +- ui/shared/StyledButton.qml | 2 +- ui/shared/StyledText.qml | 1 + ui/shared/StyledTextEdit.qml | 1 + ui/shared/TextWithLabel.qml | 1 - 37 files changed, 88 insertions(+), 65 deletions(-) diff --git a/ui/app/AppLayouts/Chat/ChatColumn.qml b/ui/app/AppLayouts/Chat/ChatColumn.qml index 90fd1e49d3..01ec9cdb72 100644 --- a/ui/app/AppLayouts/Chat/ChatColumn.qml +++ b/ui/app/AppLayouts/Chat/ChatColumn.qml @@ -62,8 +62,9 @@ StackLayout { Rectangle { id: inputArea + color: Style.current.background border.width: 1 - border.color: Style.current.grey + border.color: Style.current.border Layout.alignment: Qt.AlignHCenter | Qt.AlignBottom Layout.fillWidth: true Layout.preferredWidth: parent.width diff --git a/ui/app/AppLayouts/Chat/ChatColumn/ChatInput.qml b/ui/app/AppLayouts/Chat/ChatColumn/ChatInput.qml index 2aa2bbd858..758b5ba410 100644 --- a/ui/app/AppLayouts/Chat/ChatColumn/ChatInput.qml +++ b/ui/app/AppLayouts/Chat/ChatColumn/ChatInput.qml @@ -10,6 +10,7 @@ Rectangle { id: rectangle border.width: 0 height: 52 + color: Style.current.transparent visible: chatsModel.activeChannel.chatType !== Constants.chatTypePrivateGroupChat || chatsModel.activeChannel.isMember(profileModel.profile.pubKey) diff --git a/ui/app/AppLayouts/Chat/ChatColumn/Message.qml b/ui/app/AppLayouts/Chat/ChatColumn/Message.qml index 9b326766d1..9d89076e82 100644 --- a/ui/app/AppLayouts/Chat/ChatColumn/Message.qml +++ b/ui/app/AppLayouts/Chat/ChatColumn/Message.qml @@ -242,8 +242,8 @@ Item { property int chatHorizontalPadding: 12 id: chatBox - color: isSticker ? Style.current.white : (isCurrentUser ? Style.current.blue : Style.current.lightBlue) - border.color: isSticker ? Style.current.grey : Style.current.transparent + color: isSticker ? Style.current.background : (isCurrentUser ? Style.current.blue : Style.current.secondaryBackground) + border.color: isSticker ? Style.current.border : Style.current.transparent border.width: 1 height: (3 * chatVerticalPadding) + (contentType == Constants.stickerType ? stickerId.height : (chatText.height + chatReply.height)) width: { @@ -334,7 +334,7 @@ Item { font.pixelSize: 15 readOnly: true selectByMouse: true - color: !isCurrentUser ? Style.current.black : Style.current.white + color: !isCurrentUser ? Style.current.textColor : Style.current.currentUserTextColor visible: contentType == Constants.messageType || isEmoji } diff --git a/ui/app/AppLayouts/Chat/ChatColumn/TopBar.qml b/ui/app/AppLayouts/Chat/ChatColumn/TopBar.qml index 69c77b2c1a..202879de8d 100644 --- a/ui/app/AppLayouts/Chat/ChatColumn/TopBar.qml +++ b/ui/app/AppLayouts/Chat/ChatColumn/TopBar.qml @@ -10,10 +10,10 @@ Rectangle { property int iconSize: 13 id: chatTopBarContent - color: "white" + color: Style.current.background height: 56 Layout.fillWidth: true - border.color: Style.current.grey + border.color: Style.current.border border.width: 1 ChannelIcon { @@ -94,7 +94,7 @@ Rectangle { anchors.fill: parent hoverEnabled: true onEntered: { - parent.color = Style.current.grey + parent.color = Style.current.border } onExited: { parent.color = Style.current.transparent diff --git a/ui/app/AppLayouts/Chat/ContactsColumn/Channel.qml b/ui/app/AppLayouts/Chat/ContactsColumn/Channel.qml index 74ab4a7973..e039eb834b 100644 --- a/ui/app/AppLayouts/Chat/ContactsColumn/Channel.qml +++ b/ui/app/AppLayouts/Chat/ContactsColumn/Channel.qml @@ -14,7 +14,7 @@ Rectangle { property string searchStr: "" id: wrapper - color: ListView.isCurrentItem ? Style.current.lightBlue : Style.current.transparent + color: ListView.isCurrentItem ? Style.current.secondaryBackground : Style.current.transparent anchors.right: parent.right anchors.top: applicationWindow.top anchors.left: parent.left @@ -69,7 +69,6 @@ Rectangle { anchors.leftMargin: channelIcon.visible ? 2 : Style.current.padding anchors.top: parent.top anchors.topMargin: Style.current.smallPadding - color: "black" } StyledText { diff --git a/ui/app/AppLayouts/Chat/components/Contact.qml b/ui/app/AppLayouts/Chat/components/Contact.qml index 1e2e86cfb5..f6313fdf6c 100644 --- a/ui/app/AppLayouts/Chat/components/Contact.qml +++ b/ui/app/AppLayouts/Chat/components/Contact.qml @@ -27,6 +27,7 @@ Rectangle { anchors.left: parent.left border.width: 0 radius: Style.current.radius + color: Style.current.transparent Identicon { id: accountImage diff --git a/ui/app/AppLayouts/Chat/components/GroupChatPopup.qml b/ui/app/AppLayouts/Chat/components/GroupChatPopup.qml index a9fa44cdb7..24aa28ff9e 100644 --- a/ui/app/AppLayouts/Chat/components/GroupChatPopup.qml +++ b/ui/app/AppLayouts/Chat/components/GroupChatPopup.qml @@ -176,7 +176,7 @@ ModalPopup { } ] SVGImage { - id: "btnSelectMembersImg" + id: btnSelectMembersImg width: 50 height: 50 } diff --git a/ui/app/AppLayouts/Chat/components/PrivateChatPopup.qml b/ui/app/AppLayouts/Chat/components/PrivateChatPopup.qml index 3abdb7612e..8e08df8da4 100644 --- a/ui/app/AppLayouts/Chat/components/PrivateChatPopup.qml +++ b/ui/app/AppLayouts/Chat/components/PrivateChatPopup.qml @@ -86,7 +86,7 @@ ModalPopup { } } - Text { + StyledText { id: ensUsername anchors.top: chatKey.bottom anchors.topMargin: Style.current.padding diff --git a/ui/app/AppLayouts/Chat/components/StickersPopup.qml b/ui/app/AppLayouts/Chat/components/StickersPopup.qml index 689364427e..329e1fa13a 100644 --- a/ui/app/AppLayouts/Chat/components/StickersPopup.qml +++ b/ui/app/AppLayouts/Chat/components/StickersPopup.qml @@ -62,7 +62,7 @@ Popup { anchors.top: imgNoStickers.bottom anchors.topMargin: 8 - Text { + StyledText { id: lblNoStickersYet visible: stickerPackListView.count <= 0 anchors.fill: parent @@ -73,7 +73,7 @@ Popup { horizontalAlignment: Text.AlignHCenter } - Text { + StyledText { id: lblNoRecentStickers visible: stickerPackListView.count > 0 && stickerGrid.count <= 0 anchors.fill: parent diff --git a/ui/app/AppLayouts/Chat/components/SuggestedChannel.qml b/ui/app/AppLayouts/Chat/components/SuggestedChannel.qml index 6d985df2aa..aa36fb2251 100644 --- a/ui/app/AppLayouts/Chat/components/SuggestedChannel.qml +++ b/ui/app/AppLayouts/Chat/components/SuggestedChannel.qml @@ -9,7 +9,9 @@ Rectangle { radius: 8 width: children[0].width + 10 height: 32 - border.color: Style.current.grey + border.color: Style.current.border + color: Style.current.background + StyledText { id: suggestedChannelText text: "#" + channel diff --git a/ui/app/AppLayouts/Node/NodeLayout.qml b/ui/app/AppLayouts/Node/NodeLayout.qml index faad73e407..d220da6747 100644 --- a/ui/app/AppLayouts/Node/NodeLayout.qml +++ b/ui/app/AppLayouts/Node/NodeLayout.qml @@ -64,7 +64,7 @@ Item { Rectangle { id: rectangle color: "#00000000" - border.color: Style.current.grey + border.color: Style.current.border anchors.fill: parent Button { diff --git a/ui/app/AppLayouts/Profile/LeftTab/Menu.qml b/ui/app/AppLayouts/Profile/LeftTab/Menu.qml index 8acf7d03a9..c15bdd869a 100644 --- a/ui/app/AppLayouts/Profile/LeftTab/Menu.qml +++ b/ui/app/AppLayouts/Profile/LeftTab/Menu.qml @@ -10,7 +10,7 @@ Rectangle { readonly property int w: 340 id: profileTabBar - color: "#ffffff" + color: Style.current.transparent height: parent.height Layout.fillHeight: true Layout.fillWidth: true @@ -41,7 +41,6 @@ Rectangle { StyledText { id: element1 - color: "#000000" //% "ENS usernames" text: qsTrId("ens-usernames") anchors.left: parent.left @@ -67,7 +66,6 @@ Rectangle { StyledText { id: element2 - color: "#000000" //% "Contacts" text: qsTrId("contacts") anchors.left: parent.left @@ -93,7 +91,6 @@ Rectangle { StyledText { id: element3 - color: "#000000" //% "Privacy and security" text: qsTrId("privacy-and-security") anchors.left: parent.left @@ -115,11 +112,10 @@ Rectangle { anchors.top: privacyTabButton.bottom anchors.topMargin: 0 background: Rectangle { - color: Theme.transparent + color: Style.current.transparent } StyledText { - color: "#000000" //% "Devices" text: qsTrId("devices") anchors.left: parent.left @@ -146,7 +142,6 @@ Rectangle { StyledText { id: element4 - color: "#000000" //% "Sync settings" text: qsTrId("sync-settings") anchors.left: parent.left @@ -173,7 +168,6 @@ Rectangle { StyledText { id: element5 - color: "#000000" //% "Language settings" text: qsTrId("language-settings") anchors.left: parent.left @@ -200,7 +194,6 @@ Rectangle { StyledText { id: element6 - color: "#000000" //% "Notifications settings" text: qsTrId("notifications-settings") anchors.left: parent.left @@ -226,7 +219,6 @@ Rectangle { StyledText { id: element7 - color: "#000000" //% "Advanced settings" text: qsTrId("advanced-settings") anchors.left: parent.left @@ -253,7 +245,6 @@ Rectangle { StyledText { id: element8 - color: "#000000" //% "Need help?" text: qsTrId("need-help") anchors.left: parent.left @@ -279,7 +270,6 @@ Rectangle { StyledText { id: element9 - color: "#000000" //% "About" text: qsTrId("about-app") anchors.left: parent.left @@ -305,7 +295,6 @@ Rectangle { StyledText { id: element10 - color: "#000000" //% "Sign out" text: qsTrId("sign-out") anchors.left: parent.left diff --git a/ui/app/AppLayouts/Profile/LeftTab/Profile.qml b/ui/app/AppLayouts/Profile/LeftTab/Profile.qml index 7166c01344..6da7d9a63c 100644 --- a/ui/app/AppLayouts/Profile/LeftTab/Profile.qml +++ b/ui/app/AppLayouts/Profile/LeftTab/Profile.qml @@ -11,6 +11,7 @@ Rectangle { id: profileHeaderContent height: parent.height Layout.fillWidth: true + color: Style.current.transparent Item { id: profileImgNameContainer diff --git a/ui/app/AppLayouts/Profile/Sections/AboutContainer.qml b/ui/app/AppLayouts/Profile/Sections/AboutContainer.qml index dd22f41825..cdb0215d46 100644 --- a/ui/app/AppLayouts/Profile/Sections/AboutContainer.qml +++ b/ui/app/AppLayouts/Profile/Sections/AboutContainer.qml @@ -99,7 +99,6 @@ Item { font.letterSpacing: 0.1 width: 700 wrapMode: Text.Wrap - color: Style.current.black } } diff --git a/ui/app/AppLayouts/Profile/Sections/BackupSeedModal.qml b/ui/app/AppLayouts/Profile/Sections/BackupSeedModal.qml index 5f23b2dbec..c61ed3e9f8 100644 --- a/ui/app/AppLayouts/Profile/Sections/BackupSeedModal.qml +++ b/ui/app/AppLayouts/Profile/Sections/BackupSeedModal.qml @@ -52,7 +52,7 @@ ModalPopup { visible: index >= wrapper.len/2 } - Text { + StyledText { id: count text: index+1 color: Style.current.darkGrey @@ -63,7 +63,7 @@ ModalPopup { font.pixelSize: 15 } - TextEdit { + StyledTextEdit { text: modelData font.pixelSize: 15 anchors.bottom: parent.bottom @@ -79,7 +79,7 @@ ModalPopup { } } - Text { + StyledText { id: confirmationsInfo //% "With this 12 words you can always get your key back. Write it down. Keep it safe, offline, and separate from this device." text: qsTrId("with-this-12-words-you-can-always-get-your-key-back.-write-it-down.-keep-it-safe,-offline,-and-separate-from-this-device.") diff --git a/ui/app/AppLayouts/Profile/Sections/PrivacyContainer.qml b/ui/app/AppLayouts/Profile/Sections/PrivacyContainer.qml index b64b280c84..3eab7bd8be 100644 --- a/ui/app/AppLayouts/Profile/Sections/PrivacyContainer.qml +++ b/ui/app/AppLayouts/Profile/Sections/PrivacyContainer.qml @@ -23,7 +23,7 @@ Item { font.pixelSize: 20 } - Text { + StyledText { id: labelSecurity //% "Security" text: qsTrId("security") @@ -43,7 +43,7 @@ Item { anchors.leftMargin: Style.current.bigPadding height: children[0].height width: children[0].width - Text { + StyledText { //% "Backup Seed Phrase" text: qsTrId("backup-seed-phrase") font.pixelSize: 14 diff --git a/ui/app/AppLayouts/Wallet/AssetsTab.qml b/ui/app/AppLayouts/Wallet/AssetsTab.qml index 3243d24b14..b31650c048 100644 --- a/ui/app/AppLayouts/Wallet/AssetsTab.qml +++ b/ui/app/AppLayouts/Wallet/AssetsTab.qml @@ -35,7 +35,6 @@ Item { anchors.leftMargin: Style.current.smallPadding anchors.top: assetInfoImage.top anchors.topMargin: 0 - color: Style.current.black font.pixelSize: 15 } StyledText { diff --git a/ui/app/AppLayouts/Wallet/LeftTab.qml b/ui/app/AppLayouts/Wallet/LeftTab.qml index 9dea07b5a7..a9cd17ecec 100644 --- a/ui/app/AppLayouts/Wallet/LeftTab.qml +++ b/ui/app/AppLayouts/Wallet/LeftTab.qml @@ -24,7 +24,7 @@ Item { anchors.right: parent.right anchors.rightMargin: 0 height: walletValueTextContainer.y + walletValueTextContainer.height + Style.current.padding - color: Style.current.white + color: Style.current.background z: 1 border.width: 0 @@ -53,7 +53,7 @@ Item { StyledTextEdit { id: walletAmountValue - color: "black" + color: Style.current.textColor text: walletModel.totalFiatBalance selectByMouse: true cursorVisible: true @@ -125,7 +125,7 @@ Item { anchors.leftMargin: 10 font.pixelSize: 15 font.weight: Font.Medium - color: selected ? Style.current.white : Style.current.black + color: selected ? Style.current.white : Style.current.textColor } StyledText { id: walletAddress @@ -152,7 +152,7 @@ Item { anchors.rightMargin: Style.current.padding font.pixelSize: 15 font.weight: Font.Medium - color: selected ? Style.current.white : Style.current.black + color: selected ? Style.current.white : Style.current.textColor } MouseArea { anchors.fill: parent diff --git a/ui/app/AppLayouts/Wallet/SetCurrencyModal.qml b/ui/app/AppLayouts/Wallet/SetCurrencyModal.qml index ae9d606099..5774eeedcd 100644 --- a/ui/app/AppLayouts/Wallet/SetCurrencyModal.qml +++ b/ui/app/AppLayouts/Wallet/SetCurrencyModal.qml @@ -29,7 +29,7 @@ Item { width: 480 height: 510 background: Rectangle { - color: Style.current.white + color: Style.current.background radius: Style.current.radius } padding: 0 diff --git a/ui/app/AppLayouts/Wallet/WalletLayout.qml b/ui/app/AppLayouts/Wallet/WalletLayout.qml index d7ada40505..562a093d50 100644 --- a/ui/app/AppLayouts/Wallet/WalletLayout.qml +++ b/ui/app/AppLayouts/Wallet/WalletLayout.qml @@ -65,16 +65,19 @@ SplitView { anchors.top: parent.top anchors.topMargin: Style.current.padding height: assetBtn.height + background: Rectangle { + color: Style.current.transparent + } StatusTabButton { id: assetBtn - btnText: "Assets" + btnText: qsTr("Assets") } StatusTabButton { id: collectiblesBtn anchors.left: assetBtn.right anchors.leftMargin: 32 - btnText: "Collectibles" + btnText: qsTr("Collectibles") onClicked: { walletModel.loadCollectiblesForAccount(walletModel.currentAccount.address) } @@ -83,7 +86,7 @@ SplitView { id: historyBtn anchors.left: collectiblesBtn.right anchors.leftMargin: 32 - btnText: "History" + btnText: qsTr("History") onClicked: { walletModel.loadTransactionsForAccount(walletModel.currentAccount.address) } diff --git a/ui/app/AppMain.qml b/ui/app/AppMain.qml index 0f5b5b3a8c..27454648a2 100644 --- a/ui/app/AppMain.qml +++ b/ui/app/AppMain.qml @@ -28,7 +28,7 @@ RowLayout { spacing: 5 background: Rectangle { color: "#00000000" - border.color: Style.current.grey + border.color: Style.current.border } TabButton { @@ -41,7 +41,7 @@ RowLayout { transformOrigin: Item.Center anchors.horizontalCenter: parent.horizontalCenter background: Rectangle { - color: Style.current.lightBlue + color: Style.current.secondaryBackground opacity: parent.checked ? 1 : 0 radius: 50 } @@ -68,7 +68,7 @@ RowLayout { anchors.horizontalCenter: parent.horizontalCenter anchors.top: chatBtn.top background: Rectangle { - color: Style.current.lightBlue + color: Style.current.secondaryBackground opacity: parent.checked ? 1 : 0 radius: 50 } @@ -95,7 +95,7 @@ RowLayout { anchors.horizontalCenter: parent.horizontalCenter anchors.top: walletBtn.top background: Rectangle { - color: Style.current.lightBlue + color: Style.current.secondaryBackground opacity: parent.checked ? 1 : 0 radius: 50 } @@ -120,7 +120,7 @@ RowLayout { anchors.horizontalCenter: parent.horizontalCenter anchors.top: browserBtn.top background: Rectangle { - color: Style.current.lightBlue + color: Style.current.secondaryBackground opacity: parent.checked ? 1 : 0 radius: 50 } @@ -147,7 +147,7 @@ RowLayout { anchors.horizontalCenter: parent.horizontalCenter anchors.top: profileBtn.top background: Rectangle { - color: Style.current.lightBlue + color: Style.current.secondaryBackground opacity: parent.checked ? 1 : 0 radius: 50 } diff --git a/ui/imports/Themes/DarkTheme.qml b/ui/imports/Themes/DarkTheme.qml index 5ae5ab1e3f..63d88e2348 100644 --- a/ui/imports/Themes/DarkTheme.qml +++ b/ui/imports/Themes/DarkTheme.qml @@ -2,7 +2,7 @@ import QtQuick 2.13 import "." Theme { - property color white: "#000000" + property color white: "#FFFFFF" property color white2: "#FCFCFC" property color black: "#000000" property color grey: "#EEF2F5" @@ -11,7 +11,15 @@ Theme { property color transparent: "#00000000" property color darkGrey: "#939BA1" property color lightBlueText: "#8f9fec" + property color darkBlue: "#3c55c9" property color darkBlueBtn: "#5a70dd" property color red: "#FF2D55" + + property color background: "#141414" + property color border: "#252528" + property color textColor: white + property color currentUserTextColor: white + property color secondaryBackground: "#23252F" + property color modalBackground: background } diff --git a/ui/imports/Themes/LightTheme.qml b/ui/imports/Themes/LightTheme.qml index 0fac407f5a..ae0f113ba0 100644 --- a/ui/imports/Themes/LightTheme.qml +++ b/ui/imports/Themes/LightTheme.qml @@ -14,4 +14,11 @@ Theme { property color darkBlue: "#3c55c9" property color darkBlueBtn: "#5a70dd" property color red: "#FF2D55" + + property color background: white + property color border: grey + property color textColor: black + property color currentUserTextColor: white + property color secondaryBackground: lightBlue + property color modalBackground: white2 } diff --git a/ui/imports/Themes/Theme.qml b/ui/imports/Themes/Theme.qml index 935da64157..69105578b1 100644 --- a/ui/imports/Themes/Theme.qml +++ b/ui/imports/Themes/Theme.qml @@ -24,6 +24,13 @@ QtObject { property color darkBlueBtn property color red + property color background + property color border + property color textColor + property color currentUserTextColor + property color secondaryBackground + property color modalBackground + property int xlPadding: 32 property int bigPadding: 24 property int padding: 16 diff --git a/ui/main.qml b/ui/main.qml index 4a278891b0..4b269cd7ea 100644 --- a/ui/main.qml +++ b/ui/main.qml @@ -20,7 +20,7 @@ ApplicationWindow { id: applicationWindow width: 1232 height: 770 - color: Style.current.white + color: Style.current.background title: { // Set application settings //% "Nim Status Client" diff --git a/ui/onboarding/Intro.qml b/ui/onboarding/Intro.qml index 44c9b4aa77..8a02e753a8 100644 --- a/ui/onboarding/Intro.qml +++ b/ui/onboarding/Intro.qml @@ -89,7 +89,6 @@ RowLayout { font.letterSpacing: 0.1 width: 700 wrapMode: Text.Wrap - color: Style.current.black } CheckBox { diff --git a/ui/shared/Input.qml b/ui/shared/Input.qml index d60f68156d..c29abdb7e8 100644 --- a/ui/shared/Input.qml +++ b/ui/shared/Input.qml @@ -38,7 +38,7 @@ Item { anchors.top: parent.top anchors.topMargin: 0 font.pixelSize: 13 - color: Style.current.black + color: Style.current.textColor } Rectangle { diff --git a/ui/shared/ModalPopup.qml b/ui/shared/ModalPopup.qml index 43c18b07e3..e53848f663 100644 --- a/ui/shared/ModalPopup.qml +++ b/ui/shared/ModalPopup.qml @@ -1,6 +1,7 @@ import QtQuick 2.13 import QtQuick.Controls 2.13 import QtQuick.Layouts 1.13 +import QtGraphicalEffects 1.13 import "../imports" Popup { @@ -22,7 +23,7 @@ Popup { width: 480 height: 510 // TODO find a way to make this dynamic background: Rectangle { - color: Style.current.white + color: Style.current.background radius: 8 } padding: 0 @@ -64,6 +65,7 @@ Popup { anchors.rightMargin: Style.current.padding anchors.right: parent.right radius: 8 + color: Style.current.transparent SVGImage { id: closeModalImg @@ -73,6 +75,11 @@ Popup { anchors.horizontalCenter: parent.horizontalCenter anchors.verticalCenter: parent.verticalCenter } + ColorOverlay { + anchors.fill: closeModalImg + source: closeModalImg + color: Style.current.textColor + } MouseArea { id: closeModalMouseArea @@ -80,10 +87,10 @@ Popup { anchors.fill: parent hoverEnabled: true onExited: { - closeButton.color = Style.current.white + closeButton.color = Style.current.transparent } onEntered: { - closeButton.color = Style.current.grey + closeButton.color = Style.current.border } onClicked: { popup.close() diff --git a/ui/shared/PopupMenu.qml b/ui/shared/PopupMenu.qml index 215f3a5b16..f2e3faa3e9 100644 --- a/ui/shared/PopupMenu.qml +++ b/ui/shared/PopupMenu.qml @@ -47,7 +47,7 @@ Menu { font: popupMenuItem.font color: popupMenuItem.highlighted ? Style.current.white : - (popupMenuItem.action.icon.color != "#00000000" ? popupMenuItem.action.icon.color : Style.current.black) + (popupMenuItem.action.icon.color != "#00000000" ? popupMenuItem.action.icon.color : Style.current.textColor) horizontalAlignment: Text.AlignLeft verticalAlignment: Text.AlignVCenter } @@ -66,7 +66,7 @@ Menu { color: "transparent" Rectangle { id: bgPopupMenuTopArrow - color: Style.current.white2 + color: Style.current.modalBackground height: 14 width: 14 rotation: 135 @@ -92,7 +92,7 @@ Menu { y: 7 implicitWidth: bgPopupMenu.width implicitHeight: bgPopupMenu.height - color: Style.current.white2 + color: Style.current.modalBackground radius: 16 layer.enabled: true layer.effect: DropShadow{ diff --git a/ui/shared/Select.qml b/ui/shared/Select.qml index 3f72953367..3acd1bc1a9 100644 --- a/ui/shared/Select.qml +++ b/ui/shared/Select.qml @@ -37,7 +37,6 @@ Item { anchors.top: parent.top anchors.topMargin: 0 font.pixelSize: 13 - color: Style.current.black } Rectangle { diff --git a/ui/shared/Separator.qml b/ui/shared/Separator.qml index 8475390528..463239b14c 100644 --- a/ui/shared/Separator.qml +++ b/ui/shared/Separator.qml @@ -5,6 +5,6 @@ Rectangle { id: separator width: parent.width height: 1 - color: Style.current.grey + color: Style.current.border anchors.topMargin: Style.current.padding } diff --git a/ui/shared/SplitViewHandle.qml b/ui/shared/SplitViewHandle.qml index e978c6ac6f..0c64d7af8f 100644 --- a/ui/shared/SplitViewHandle.qml +++ b/ui/shared/SplitViewHandle.qml @@ -5,5 +5,5 @@ import "../imports" Rectangle { implicitWidth: 1.2 color: SplitHandle.pressed ? Style.current.darkGrey - : (SplitHandle.hovered ? Qt.darker(Style.current.grey, 1.1) : Style.current.grey) + : (SplitHandle.hovered ? Qt.darker(Style.current.border, 1.1) : Style.current.border) } diff --git a/ui/shared/StatusTabButton.qml b/ui/shared/StatusTabButton.qml index c25bafc534..e4c66c60c8 100644 --- a/ui/shared/StatusTabButton.qml +++ b/ui/shared/StatusTabButton.qml @@ -20,7 +20,7 @@ TabButton { text: btnText font.weight: Font.Medium font.pixelSize: 15 - color: parent.checked ? Style.current.black : Style.current.darkGrey + color: parent.checked ? Style.current.textColor : Style.current.darkGrey } Rectangle { diff --git a/ui/shared/StyledButton.qml b/ui/shared/StyledButton.qml index 081893f10d..b78389b814 100644 --- a/ui/shared/StyledButton.qml +++ b/ui/shared/StyledButton.qml @@ -5,7 +5,7 @@ import "../imports" Button { property string label: "My button" - property color btnColor: Style.current.lightBlue + property color btnColor: Style.current.secondaryBackground property color btnBorderColor: "transparent" property int btnBorderWidth: 0 property color textColor: Style.current.blue diff --git a/ui/shared/StyledText.qml b/ui/shared/StyledText.qml index 561a05ac52..e0286e5913 100644 --- a/ui/shared/StyledText.qml +++ b/ui/shared/StyledText.qml @@ -3,4 +3,5 @@ import "../imports" Text { font.family: Style.current.fontRegular.name + color: Style.current.textColor } diff --git a/ui/shared/StyledTextEdit.qml b/ui/shared/StyledTextEdit.qml index 64b4583325..2ce5ec5caf 100644 --- a/ui/shared/StyledTextEdit.qml +++ b/ui/shared/StyledTextEdit.qml @@ -3,4 +3,5 @@ import "../imports" TextEdit { font.family: Style.current.fontRegular.name + color: Style.current.textColor } diff --git a/ui/shared/TextWithLabel.qml b/ui/shared/TextWithLabel.qml index c84e2340bc..0ff32c8985 100644 --- a/ui/shared/TextWithLabel.qml +++ b/ui/shared/TextWithLabel.qml @@ -38,7 +38,6 @@ Item { anchors.top: inputLabel.bottom anchors.topMargin: inputBox.labelMargin font.pixelSize: 15 - color: Style.current.black } }