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 colors for dark mode

This commit is contained in:
Jonathan Rainville 2021-02-18 14:07:23 -05:00 committed by Iuri Matias
parent 0e699cac65
commit 46412204c5
16 changed files with 42 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/ChatButtons.qml
View File

@ -14,7 +14,7 @@ Rectangle {
width: buttonRow.width + buttonsContainer.containerMargin * 2
height: 36
radius: Style.current.radius
color: Style.current.background
color: Style.current.modalBackground
z: 52
layer.enabled: true

2
ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/CompactMessage.qml
View File

@ -65,7 +65,7 @@ Item {
+ (retry.visible && !chatTime.visible ? Style.current.smallPadding : 0)
width: parent.width
color: root.isHovered || isMessageActive ? (hasMention ? Style.current.mentionMessageHoverColor : Style.current.backgroundHover) :
color: root.isHovered || isMessageActive ? (hasMention ? Style.current.mentionMessageHoverColor : Style.current.backgroundHoverLight) :
(hasMention ? Style.current.mentionMessageColor : Style.current.transparent)

2
ui/app/AppLayouts/Chat/CommunityComponents/CommunityHeaderButton.qml
View File

@ -61,7 +61,7 @@ Button {
btnBackground.color = "transparent"
}
onEntered: {
btnBackground.color = Style.current.topBarChatInfoColor
btnBackground.color = Style.current.backgroundHover
}
}
}

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

@ -90,7 +90,7 @@ ModalPopup {
anchors.top: lblNewGroup.bottom
//% "%1 / 10 members"
text: qsTrId("%1-/-10-members").arg(memberCount)
color: Style.current.darkGrey
color: Style.current.secondaryText
font.pixelSize: 15
}
}

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

@ -7,38 +7,39 @@ Theme {
property color black: "#000000"
property color almostBlack: "#141414"
property color grey: "#EEF2F5"
property color lightGrey: "#ccd0d4"
property color lightGrey: "#7A7A7A"
property color darkGrey: "#373737"
property color evenDarkerGrey: "#4b4b4b"
property color lightBlue: "#ECEFFC"
property color cyan: "#00FFFF"
property color blue: "#758EF0"
property color blue: "#88B0FF"
property color darkAccentBlue: "#2946C4"
property color transparent: "#00000000"
property color darkGrey: "#838C91"
property color evenDarkerGrey: "#252528"
property color lightBlueText: "#8f9fec"
property color darkBlue: "#3c55c9"
property color darkBlueBtn: "#5a70dd"
property color red: "#FC5F5F"
property color red: "#FF5C7B"
property color lightRed: "#FFEAEE"
property color green: "#4EBC60"
property color turquoise: "#007b7d"
property color tenPercentWhite: Qt.rgba(255, 255, 255, 0.1)
property color tenPercentBlue: Qt.rgba(67, 96, 223, 0.1)
property color background: almostBlack
property color border: evenDarkerGrey
property color background: "#212121"
property color border: darkGrey
property color borderSecondary: tenPercentWhite
property color borderTertiary: blue
property color textColor: white
property color textColorTertiary: blue
property color currentUserTextColor: white
property color secondaryBackground: "#23252F"
property color inputBackground: secondaryBackground
property color secondaryBackground: "#353a4d"
property color inputBackground: darkGrey
property color inputBorderFocus: blue
property color inputColor: darkGrey
property color modalBackground: background
property color inputColor: textColor
property color modalBackground: darkGrey
property color backgroundHover: evenDarkerGrey
property color secondaryText: darkGrey
property color backgroundHoverLight: darkGrey
property color secondaryText: lightGrey
property color secondaryHover: tenPercentWhite
property color primary: blue
property color danger: red
@ -48,13 +49,12 @@ Theme {
property color backgroundTertiary: tenPercentBlue
property color pillButtonTextColor: almostBlack
property color chatReplyCurrentUser: lightGrey
property color topBarChatInfoColor: evenDarkerGrey
property color codeBackground: "#2E386B"
property color primarySelectionColor: "#b4c8ff"
property color emojiReactionBackground: "#2d2823"
property color emojiReactionBackgroundHovered: "#3a3632"
property color emojiReactionActiveBackgroundHovered: "#cbd5f1"
property color mentionColor: "#47B6D1"
property color mentionColor: "#7BE5FF"
property color mentionBgColor: Qt.rgba(71, 182, 209, 0.1)
property color mentionMessageColor: "#E5F8FD"
property color mentionMessageHoverColor: mentionBgColor
@ -62,8 +62,8 @@ Theme {
property color buttonForegroundColor: blue
property color buttonBackgroundColor: secondaryBackground
property color buttonSecondaryColor: darkGrey
property color buttonDisabledForegroundColor: buttonSecondaryColor
property color buttonDisabledBackgroundColor: evenDarkerGrey
property color buttonDisabledForegroundColor: lightGrey
property color buttonDisabledBackgroundColor: darkGrey
property color buttonWarnBackgroundColor: "#FFEAEE"
property color buttonHoveredWarnBackgroundColor: red
property color buttonHoveredBackgroundColor: blue

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

@ -37,6 +37,7 @@ Theme {
property color inputColor: black
property color modalBackground: white2
property color backgroundHover: grey
property color backgroundHoverLight: lightGrey
property color secondaryText: darkGrey
property color secondaryHover: tenPercentBlack
property color primary: blue
@ -47,7 +48,6 @@ Theme {
property color backgroundTertiary: tenPercentBlue
property color pillButtonTextColor: white
property color chatReplyCurrentUser: darkGrey
property color topBarChatInfoColor: grey
property color codeBackground: "#2E386B"
property color primarySelectionColor: "#b4c8ff"
property color emojiReactionBackground: "#e2e6e9"

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

@ -31,6 +31,7 @@ QtObject {
property color background
property color backgroundHover
property color backgroundHoverLight
property color border
property color textColor
property color secondaryText

8
ui/shared/CopyToClipBoardButton.qml
View File

@ -1,5 +1,6 @@
import QtQuick 2.13
import QtQuick.Controls 2.13
import QtGraphicalEffects 1.13
import "../imports"
import "../shared/status"
@ -20,6 +21,13 @@ Rectangle {
source: "./img/copy-to-clipboard-icon.svg"
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
ColorOverlay {
anchors.fill: parent
antialiasing: true
source: parent
color: Style.current.primary
}
}
MouseArea {

2
ui/shared/ModalPopup.qml
View File

@ -16,7 +16,7 @@ Popup {
property alias footer: footerContent.children
Overlay.modal: Rectangle {
color: "#60000000"
color: Qt.rgba(0, 0, 0, 0.4)
}
closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside
parent: Overlay.overlay

12
ui/shared/PopupMenu.qml
View File

@ -15,7 +15,7 @@ Menu {
bottomPadding: paddingSize
delegate: MenuItem {
property color textColor: (this.action.icon.color != "#00000000" ? this.action.icon.color : Style.current.textColor)
property color textColor: this.action.icon.color.toString() !== "#00000000" ? this.action.icon.color : Style.current.textColor
property int subMenuIndex: {
if (!this.subMenu) {
return -1
@ -62,7 +62,7 @@ Menu {
ColorOverlay {
anchors.fill: parent
source: parent
color: popupMenuItem.highlighted ? Style.current.white : popupMenuItem.textColor
color: popupMenuItem.textColor
}
}
@ -89,9 +89,7 @@ Menu {
anchors.fill: menuIcon
source: menuIcon
smooth: true
color: popupMenuItem.highlighted ?
Style.current.primaryMenuItemTextHover :
(popupMenuItem.action.icon.color != "#00000000" ? popupMenuItem.action.icon.color : Style.current.primaryMenuItemHover)
color: (popupMenuItem.action.icon.color != "#00000000" ? popupMenuItem.action.icon.color : Style.current.primaryMenuItemHover)
}
}
@ -100,7 +98,7 @@ Menu {
anchors.leftMargin: popupMenu.paddingSize
text: popupMenuItem.text
font: popupMenuItem.font
color: popupMenuItem.highlighted ? Style.current.primaryMenuItemTextHover : popupMenuItem.textColor
color: popupMenuItem.textColor
horizontalAlignment: Text.AlignLeft
verticalAlignment: Text.AlignVCenter
opacity: enabled ? 1.0 : 0.3
@ -110,7 +108,7 @@ Menu {
background: Rectangle {
implicitWidth: 220
implicitHeight: 24
color: popupMenuItem.highlighted ? popupMenuItem.icon.color : "transparent"
color: popupMenuItem.highlighted ? Style.current.backgroundHover : "transparent"
}
}

2
ui/shared/TextWithLabel.qml
View File

@ -20,7 +20,7 @@ Item {
text: infoText.label
font.weight: Font.Medium
font.pixelSize: 13
color: Style.current.darkGrey
color: Style.current.secondaryText
}
StyledTextEdit {

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

@ -107,7 +107,7 @@ Item {
StyledText {
id: chatInfo
color: Style.current.darkGrey
color: Style.current.secondaryText
text: {
switch(root.chatType){
//% "Public chat"

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

@ -37,7 +37,7 @@ Button {
}
background: Rectangle {
color: control.hovered ? Style.current.topBarChatInfoColor : "transparent"
color: control.hovered ? Style.current.backgroundHover : "transparent"
radius: Style.current.radius
}

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

@ -13,7 +13,7 @@ CheckBox {
x: control.leftPadding
y: parent.height / 2 - height / 2
radius: 3
color: (control.down || control.checked) ? Style.current.blue : Style.current.grey
color: (control.down || control.checked) ? Style.current.primary : Style.current.inputBackground
Image {
source: "../img/checkmark.svg"

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

@ -91,7 +91,7 @@ Rectangle {
ColorOverlay {
anchors.fill: caret
source: caret
color: Style.current.darkGrey
color: Style.current.secondaryText
}
}

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

@ -14,7 +14,7 @@ Switch {
x: control.leftPadding
y: parent.height / 2 - height / 2
radius: 14
color: control.checked ? Style.current.blue : Style.current.grey
color: control.checked ? Style.current.primary : Style.current.inputBackground
Rectangle {
id: circle