status-im
/
status-desktop
mirror of https://github.com/status-im/status-desktop.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: implement new dark theme colors for menu and more 

Fixes #2094
This commit is contained in:
Jonathan Rainville 2021-03-26 13:57:30 -04:00 committed by Iuri Matias
parent 63bf1be96a
commit 038ea033c9
18 changed files with 69 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui/app/AppLayouts/Chat/ChatColumn/TopBar.qml
View File

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

3
ui/app/AppLayouts/Chat/CommunityColumn.qml
View File

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

3
ui/app/AppLayouts/Chat/ContactsColumn.qml
View File

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

4
ui/app/AppLayouts/Chat/ContactsColumn/Channel.qml
View File

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

3
ui/app/AppLayouts/Chat/ContactsColumn/ChannelList.qml
View File

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

2
ui/app/AppLayouts/Chat/ContactsColumn/EmptyView.qml
View File

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

2
ui/app/AppLayouts/Chat/components/SuggestedChannel.qml
View File

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

3
ui/app/AppLayouts/Profile/LeftTab.qml
View File

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

4
ui/app/AppLayouts/Profile/LeftTab/components/MenuButton.qml
View File

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

7
ui/app/AppLayouts/Wallet/LeftTab.qml
View File

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

12
ui/app/AppMain.qml
View File

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

26
ui/imports/Themes/DarkTheme.qml
View File

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

23
ui/imports/Themes/LightTheme.qml
View File

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

10
ui/imports/Themes/Theme.qml
View File

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

2
ui/shared/SplitViewHandle.qml
View File

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

4
ui/shared/status/StatusButton.qml
View File

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

3
ui/shared/status/StatusIconTabButton.qml
View File

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

2
ui/shared/status/StatusWalletColorSelect.qml
View File

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