From 038ea033c9279985db39e68a936414b38b4a33af Mon Sep 17 00:00:00 2001 From: Jonathan Rainville Date: Fri, 26 Mar 2021 13:57:30 -0400 Subject: [PATCH] feat: implement new dark theme colors for menu and more Fixes #2094 --- ui/app/AppLayouts/Chat/ChatColumn/TopBar.qml | 2 -- ui/app/AppLayouts/Chat/CommunityColumn.qml | 3 ++- ui/app/AppLayouts/Chat/ContactsColumn.qml | 3 ++- .../Chat/ContactsColumn/Channel.qml | 4 +-- .../Chat/ContactsColumn/ChannelList.qml | 3 +-- .../Chat/ContactsColumn/EmptyView.qml | 2 +- .../Chat/components/SuggestedChannel.qml | 2 +- ui/app/AppLayouts/Profile/LeftTab.qml | 3 ++- .../Profile/LeftTab/components/MenuButton.qml | 4 +-- ui/app/AppLayouts/Wallet/LeftTab.qml | 7 +++-- ui/app/AppMain.qml | 12 +++------ ui/imports/Themes/DarkTheme.qml | 26 +++++++++++++------ ui/imports/Themes/LightTheme.qml | 23 +++++++++++----- ui/imports/Themes/Theme.qml | 10 ++++++- ui/shared/SplitViewHandle.qml | 2 +- ui/shared/status/StatusButton.qml | 4 +-- ui/shared/status/StatusIconTabButton.qml | 3 ++- ui/shared/status/StatusWalletColorSelect.qml | 2 +- 18 files changed, 69 insertions(+), 46 deletions(-) diff --git a/ui/app/AppLayouts/Chat/ChatColumn/TopBar.qml b/ui/app/AppLayouts/Chat/ChatColumn/TopBar.qml index a525bb6036..11b7337a3c 100644 --- a/ui/app/AppLayouts/Chat/ChatColumn/TopBar.qml +++ b/ui/app/AppLayouts/Chat/ChatColumn/TopBar.qml @@ -12,8 +12,6 @@ Rectangle { color: Style.current.background height: 56 Layout.fillWidth: true - border.color: Style.current.border - border.width: 1 Loader { property bool isGroupChatOrOneToOne: (chatsModel.activeChannel.chatType === Constants.chatTypePrivateGroupChat || diff --git a/ui/app/AppLayouts/Chat/CommunityColumn.qml b/ui/app/AppLayouts/Chat/CommunityColumn.qml index 097387d33b..16184ad63f 100644 --- a/ui/app/AppLayouts/Chat/CommunityColumn.qml +++ b/ui/app/AppLayouts/Chat/CommunityColumn.qml @@ -9,12 +9,13 @@ import "../../../shared/status" import "./ContactsColumn" import "./CommunityComponents" -Item { +Rectangle { // TODO unhardcode property int chatGroupsListViewCount: channelList.channelListCount id: root Layout.fillHeight: true + color: Style.current.secondaryMenuBackground Component { id: createChannelPopup diff --git a/ui/app/AppLayouts/Chat/ContactsColumn.qml b/ui/app/AppLayouts/Chat/ContactsColumn.qml index ef8e2efa3d..116c507879 100644 --- a/ui/app/AppLayouts/Chat/ContactsColumn.qml +++ b/ui/app/AppLayouts/Chat/ContactsColumn.qml @@ -8,12 +8,13 @@ import "./components" import "./ContactsColumn" import "./CommunityComponents" -Item { +Rectangle { property alias chatGroupsListViewCount: channelList.channelListCount property alias searchStr: searchBox.text id: contactsColumn Layout.fillHeight: true + color: Style.current.secondaryMenuBackground StyledText { id: title diff --git a/ui/app/AppLayouts/Chat/ContactsColumn/Channel.qml b/ui/app/AppLayouts/Chat/ContactsColumn/Channel.qml index f8aff8da66..a3f7962ec6 100644 --- a/ui/app/AppLayouts/Chat/ContactsColumn/Channel.qml +++ b/ui/app/AppLayouts/Chat/ContactsColumn/Channel.qml @@ -44,10 +44,10 @@ Rectangle { id: wrapper color: { if (ListView.isCurrentItem) { - return Style.current.secondaryBackground + return Style.current.menuBackgroundActive } if (wrapper.hovered) { - return Style.current.backgroundHover + return Style.current.menuBackgroundHover } return Style.current.transparent } diff --git a/ui/app/AppLayouts/Chat/ContactsColumn/ChannelList.qml b/ui/app/AppLayouts/Chat/ContactsColumn/ChannelList.qml index 784c43c668..347d5e1e6c 100644 --- a/ui/app/AppLayouts/Chat/ContactsColumn/ChannelList.qml +++ b/ui/app/AppLayouts/Chat/ContactsColumn/ChannelList.qml @@ -55,11 +55,10 @@ Item { } } - Rectangle { + Item { id: noSearchResults anchors.top: parent.top height: visible ? 300 : 0 - color: "transparent" visible: !chatGroupsListView.visible && channelListContent.searchStr !== "" anchors.left: parent.left anchors.right: parent.right diff --git a/ui/app/AppLayouts/Chat/ContactsColumn/EmptyView.qml b/ui/app/AppLayouts/Chat/ContactsColumn/EmptyView.qml index 8577c31aff..cef72380ba 100644 --- a/ui/app/AppLayouts/Chat/ContactsColumn/EmptyView.qml +++ b/ui/app/AppLayouts/Chat/ContactsColumn/EmptyView.qml @@ -15,7 +15,7 @@ Rectangle { visible: !appSettings.hideChannelSuggestions height: suggestionContainer.height + inviteFriendsContainer.height + Style.current.padding * 2 - border.color: Style.current.border + border.color: Style.current.secondaryMenuBorder radius: 16 color: Style.current.transparent diff --git a/ui/app/AppLayouts/Chat/components/SuggestedChannel.qml b/ui/app/AppLayouts/Chat/components/SuggestedChannel.qml index b676675dec..23ea83c94a 100644 --- a/ui/app/AppLayouts/Chat/components/SuggestedChannel.qml +++ b/ui/app/AppLayouts/Chat/components/SuggestedChannel.qml @@ -11,7 +11,7 @@ Rectangle { width: children[0].width + 10 height: 32 border.color: Style.current.border - color: Style.current.background + color: Style.current.transparent StyledText { id: suggestedChannelText diff --git a/ui/app/AppLayouts/Profile/LeftTab.qml b/ui/app/AppLayouts/Profile/LeftTab.qml index e6a488189d..f2caf03454 100644 --- a/ui/app/AppLayouts/Profile/LeftTab.qml +++ b/ui/app/AppLayouts/Profile/LeftTab.qml @@ -3,11 +3,12 @@ import "../../../imports" import "../../../shared" import "./LeftTab" -Item { +Rectangle { property alias currentTab: profileMenu.profileCurrentIndex property alias changeProfileSection: profileMenu.changeProfileSection id: profileInfoContainer + color: Style.current.secondaryMenuBackground StyledText { id: title diff --git a/ui/app/AppLayouts/Profile/LeftTab/components/MenuButton.qml b/ui/app/AppLayouts/Profile/LeftTab/components/MenuButton.qml index 9495032b97..1644e01446 100644 --- a/ui/app/AppLayouts/Profile/LeftTab/components/MenuButton.qml +++ b/ui/app/AppLayouts/Profile/LeftTab/components/MenuButton.qml @@ -16,10 +16,10 @@ Rectangle { id: menuButton color: { if (active) { - return Style.current.secondaryBackground + return Style.current.menuBackgroundActive } if (hovered) { - return Style.current.backgroundHover + return Style.current.menuBackgroundHover } return Style.current.transparent } diff --git a/ui/app/AppLayouts/Wallet/LeftTab.qml b/ui/app/AppLayouts/Wallet/LeftTab.qml index 83024f9140..402ac40dc2 100644 --- a/ui/app/AppLayouts/Wallet/LeftTab.qml +++ b/ui/app/AppLayouts/Wallet/LeftTab.qml @@ -6,7 +6,7 @@ import "../../../imports" import "../../../shared" import "./components" -Item { +Rectangle { property int selectedAccount: 0 property var changeSelectedAccount: function(newIndex) { if (newIndex > walletModel.accounts) { @@ -17,8 +17,7 @@ Item { walletTabBar.currentIndex = 0; } id: walletInfoContainer - - + color: Style.current.secondaryMenuBackground StyledText { id: title @@ -79,7 +78,7 @@ Item { id: rectangle height: 64 - color: selected ? Style.current.buttonForegroundColor : Style.current.transparent + color: selected ? Style.current.menuBackgroundActive : Style.current.transparent radius: Style.current.radius anchors.right: parent.right anchors.rightMargin: Style.current.padding diff --git a/ui/app/AppMain.qml b/ui/app/AppMain.qml index 36170afa5c..9d57c2428e 100644 --- a/ui/app/AppMain.qml +++ b/ui/app/AppMain.qml @@ -316,19 +316,20 @@ RowLayout { } - Item { + Rectangle { id: leftTab - Layout.topMargin: 50 Layout.maximumWidth: 78 Layout.minimumWidth: 78 Layout.preferredWidth: 78 Layout.fillHeight: true height: parent.height + color: Style.current.mainMenuBackground ScrollView { id: scrollView width: leftTab.width anchors.top: parent.top + anchors.topMargin: 50 anchors.bottom: leftTabButtons.visible ? leftTabButtons.top : parent.bottom anchors.bottomMargin: tabBar.spacing clip: true @@ -414,13 +415,6 @@ RowLayout { } } - Rectangle { - height: parent.height - Layout.fillHeight: true - width: 1 - color: Style.current.border - } - StackLayout { id: sLayout Layout.fillWidth: true diff --git a/ui/imports/Themes/DarkTheme.qml b/ui/imports/Themes/DarkTheme.qml index 606ae54c77..2b3ac8b2be 100644 --- a/ui/imports/Themes/DarkTheme.qml +++ b/ui/imports/Themes/DarkTheme.qml @@ -9,11 +9,14 @@ Theme { property color black: "#000000" property color almostBlack: "#141414" property color grey: "#EEF2F5" + property color grey3: "#E9EDF1" + property color graphite2: "#252525" property color lightGrey: "#7A7A7A" property color midGrey: "#7f8990" property color darkGrey: "#373737" property color evenDarkerGrey: "#4b4b4b" property color lightBlue: "#ECEFFC" + property color translucentBlue: "#33869eff" property color cyan: "#00FFFF" property color blue: "#88B0FF" property color darkAccentBlue: "#2946C4" @@ -28,7 +31,7 @@ Theme { property color tenPercentWhite: Qt.rgba(255, 255, 255, 0.1) property color tenPercentBlue: Qt.rgba(67, 96, 223, 0.1) - property color background: "#212121" + property color background: "#2C2C2C" property color border: darkGrey property color borderSecondary: tenPercentWhite property color borderTertiary: blue @@ -38,9 +41,12 @@ Theme { property color secondaryBackground: "#353a4d" property color inputBackground: darkGrey property color inputBorderFocus: blue + property color secondaryMenuBorder: darkGrey property color inputColor: textColor property color modalBackground: darkGrey property color backgroundHover: evenDarkerGrey + property color menuBackgroundActive: "#1affffff" + property color menuBackgroundHover: "#0dffffff" property color backgroundHoverLight: darkGrey property color secondaryText: lightGrey property color secondaryHover: tenPercentWhite @@ -62,31 +68,35 @@ Theme { property color mentionMessageColor: "#1a0da4c9" property color mentionMessageHoverColor: "#330da4c9" property color replyBackground: "#484848" + property color mainMenuBackground: "#212121" + property color secondaryMenuBackground: graphite2 + property color tabButtonBg: translucentBlue property color buttonForegroundColor: blue - property color buttonBackgroundColor: secondaryBackground + property color buttonBackgroundColor: translucentBlue + property color buttonBackgroundColorHover: "#4d869eff" property color buttonSecondaryColor: darkGrey property color buttonDisabledForegroundColor: lightGrey property color buttonDisabledBackgroundColor: darkGrey - property color buttonWarnBackgroundColor: "#FFEAEE" + property color buttonWarnBackgroundColor: "#33ff5c7b" property color buttonOutlineHoveredWarnBackgroundColor: "#4dff5c7b" - property color buttonHoveredWarnBackgroundColor: red + property color buttonHoveredWarnBackgroundColor: "#4dff5c7b" property color buttonHoveredBackgroundColor: blue property color contextMenuButtonForegroundColor: midGrey property color contextMenuButtonBackgroundHoverColor: Qt.hsla(black.hslHue, black.hslSaturation, black.hslLightness, 0.1) property color roundedButtonForegroundColor: white - property color roundedButtonBackgroundColor: secondaryBackground + property color roundedButtonBackgroundColor: buttonBackgroundColor property color roundedButtonSecondaryForegroundColor: black - property color roundedButtonSecondaryBackgroundColor: buttonForegroundColor + property color roundedButtonSecondaryBackgroundColor: blue property color roundedButtonSecondaryHoveredBackgroundColor: "#AAC6FF" property color roundedButtonDisabledForegroundColor: buttonDisabledForegroundColor property color roundedButtonDisabledBackgroundColor: buttonDisabledBackgroundColor property color roundedButtonSecondaryDisabledForegroundColor: black property color roundedButtonSecondaryDisabledBackgroundColor: lightGrey - property color tooltipBackgroundColor: white - property color tooltipForegroundColor: black + property color tooltipBackgroundColor: black + property color tooltipForegroundColor: white property var accountColors: [ "#AAC6FF", diff --git a/ui/imports/Themes/LightTheme.qml b/ui/imports/Themes/LightTheme.qml index 7912379581..12b53ba228 100644 --- a/ui/imports/Themes/LightTheme.qml +++ b/ui/imports/Themes/LightTheme.qml @@ -8,9 +8,13 @@ Theme { property color white2: "#FCFCFC" property color black: "#000000" property color grey: "#EEF2F5" + property color grey1: "#F0F2F5" + property color grey2: "#F6F8FA" + property color grey3: "#E9EDF1" property color midGrey: "#7f8990" property color lightGrey: "#ccd0d4" property color lightBlue: "#ECEFFC" + property color translucentBlue: "#1a4360df" property color cyan: "#00FFFF" property color blue: "#4360DF" property color darkAccentBlue: "#2946C4" @@ -37,9 +41,12 @@ Theme { property color secondaryBackground: lightBlue property color inputBackground: grey property color inputBorderFocus: blue + property color secondaryMenuBorder: grey3 property color inputColor: black property color modalBackground: white2 property color backgroundHover: grey + property color menuBackgroundActive: grey3 + property color menuBackgroundHover: grey1 property color backgroundHoverLight: grey property color secondaryText: darkGrey property color secondaryHover: tenPercentBlack @@ -61,15 +68,19 @@ Theme { property color mentionMessageColor: "#1a07bce9" property color mentionMessageHoverColor: "#3307bce9" property color replyBackground: "#d7dadd" + property color mainMenuBackground: grey1 + property color secondaryMenuBackground: grey2 + property color tabButtonBg: translucentBlue property color buttonForegroundColor: blue - property color buttonBackgroundColor: secondaryBackground + property color buttonBackgroundColor: translucentBlue + property color buttonBackgroundColorHover: "#334360df" property color buttonSecondaryColor: darkGrey property color buttonDisabledForegroundColor: buttonSecondaryColor property color buttonDisabledBackgroundColor: grey - property color buttonWarnBackgroundColor: "#FFEAEE" + property color buttonWarnBackgroundColor: "#1aff2d55" property color buttonOutlineHoveredWarnBackgroundColor: "#1affeaee" - property color buttonHoveredWarnBackgroundColor: red + property color buttonHoveredWarnBackgroundColor: "#33ff2d55" property color buttonHoveredBackgroundColor: blue property color contextMenuButtonForegroundColor: black @@ -77,18 +88,18 @@ Theme { property color roundedButtonForegroundColor: buttonForegroundColor property color roundedButtonBackgroundColor: secondaryBackground - property color roundedButtonSecondaryForegroundColor: white + property color roundedButtonSecondaryForegroundColor: grey2 property color roundedButtonSecondaryBackgroundColor: buttonForegroundColor property color roundedButtonSecondaryHoveredBackgroundColor: darkAccentBlue property color roundedButtonDisabledForegroundColor: buttonDisabledForegroundColor property color roundedButtonDisabledBackgroundColor: buttonDisabledBackgroundColor - property color roundedButtonSecondaryDisabledForegroundColor: white + property color roundedButtonSecondaryDisabledForegroundColor: grey2 property color roundedButtonSecondaryDisabledBackgroundColor: buttonDisabledForegroundColor property color tooltipBackgroundColor: black property color tooltipForegroundColor: white property var accountColors: [ - "#4360DF", + blue, "#9B832F", "#D37EF4", "#1D806F", diff --git a/ui/imports/Themes/Theme.qml b/ui/imports/Themes/Theme.qml index 5ab52f1be3..bf79c1afb0 100644 --- a/ui/imports/Themes/Theme.qml +++ b/ui/imports/Themes/Theme.qml @@ -17,9 +17,10 @@ QtObject { property color white property color white2 property color black - property color grey + property color grey1 property color lightBlue property color blue + property color translucentBlue property color transparent property color darkGrey property color darkerGrey @@ -39,6 +40,9 @@ QtObject { property color secondaryText property color currentUserTextColor property color secondaryBackground + property color secondaryMenuBorder + property color menuBackgroundActive + property color menuBackgroundHover property color modalBackground property color codeBackground property color primarySelectioncolor @@ -49,9 +53,13 @@ QtObject { property color mentionBgColor property color mentionMessageColor property color mentionMessageHoverColor + property color mainMenuBackground + property color secondaryMenuBackground + property color tabButtonBg property color buttonForegroundColor property color buttonBackgroundColor + property color buttonBackgroundColorHover property color buttonSecondaryColor property color buttonDisabledForegroundColor property color buttonDisabledBackgroundColor diff --git a/ui/shared/SplitViewHandle.qml b/ui/shared/SplitViewHandle.qml index 0c64d7af8f..f0e6b5457d 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.border, 1.1) : Style.current.border) + : (SplitHandle.hovered ? Qt.darker(Style.current.border, 1.1) : Style.current.transparent) } diff --git a/ui/shared/status/StatusButton.qml b/ui/shared/status/StatusButton.qml index 90034544f2..891d145881 100644 --- a/ui/shared/status/StatusButton.qml +++ b/ui/shared/status/StatusButton.qml @@ -20,9 +20,9 @@ Button { if (showBorder) { return Style.current.buttonOutlineHoveredWarnBackgroundColor } - return Utils.setColorAlpha(Style.current.buttonHoveredWarnBackgroundColor, 0.2) + return Style.current.buttonHoveredWarnBackgroundColor } - return Utils.setColorAlpha(Style.current.buttonHoveredBackgroundColor, 0.2) + return Style.current.buttonBackgroundColorHover } property bool disableColorOverlay: false property bool showBorder: false diff --git a/ui/shared/status/StatusIconTabButton.qml b/ui/shared/status/StatusIconTabButton.qml index 9190049494..9cdc3f01ed 100644 --- a/ui/shared/status/StatusIconTabButton.qml +++ b/ui/shared/status/StatusIconTabButton.qml @@ -100,8 +100,9 @@ TabButton { } } } + background: Rectangle { - color: hovered || (borderOnChecked && checked) ? Style.current.secondaryBackground : "transparent" + color: hovered || (borderOnChecked && checked) ? Style.current.tabButtonBg : "transparent" border.color: Style.current.primary border.width: borderOnChecked && checked ? 1 : 0 radius: control.width / 2 diff --git a/ui/shared/status/StatusWalletColorSelect.qml b/ui/shared/status/StatusWalletColorSelect.qml index 356ef6ffbf..fa2819710f 100644 --- a/ui/shared/status/StatusWalletColorSelect.qml +++ b/ui/shared/status/StatusWalletColorSelect.qml @@ -37,7 +37,7 @@ Item { icon.color: modelData selected: { const upperCaseColor = control.selectedColor.toUpperCase() - const upperCaseModelDataColor = modelData.toUpperCase() + const upperCaseModelDataColor = modelData.toString().toUpperCase() if (upperCaseColor === upperCaseModelDataColor) { return true }