feat: implement new dark theme colors for menu and more

Fixes #2094

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 || 

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

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

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
     }

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

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
 

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

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

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
     }

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

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

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 tooltipBackgroundColor: black
-    property color tooltipForegroundColor: black
+    property color tooltipForegroundColor: white
 
     property var accountColors: [
         "#AAC6FF",

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",

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

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)
 }

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

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

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
                     }