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

fix: fix a lot of issues relative to dark theme 

Fixes #1997
This commit is contained in:
Jonathan Rainville 2021-03-16 15:19:48 -04:00 committed by Iuri Matias
parent 9d9b0ab5e6
commit b9594591b0
34 changed files with 125 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -214,7 +214,7 @@ Item {
anchors.topMargin: 3
anchors.horizontalCenter: parent.horizontalCenter
horizontalAlignment: Text.AlignHCenter
color: Style.current.darkGrey
color: Style.current.secondaryText
//% "before %1"
text: qsTrId("before--1").arg(new Date(chatsModel.oldestMsgTimestamp*1000).toDateString())
}

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

@ -46,6 +46,7 @@ Item {
pressedIconRotation: 45
icon.name: "plusSign"
size: "medium"
type: "secondary"
width: 36
height: 36
anchors.right: parent.right

1
ui/app/AppLayouts/Chat/ContactsColumn/AddChat.qml
View File

@ -9,6 +9,7 @@ StatusRoundButton {
pressedIconRotation: 45
icon.name: "plusSign"
size: "medium"
type: "secondary"
width: 36
height: 36

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

@ -66,7 +66,7 @@ Item {
StyledText {
font.pixelSize: 15
color: Style.current.darkGrey
color: Style.current.secondaryText
anchors.verticalCenter: parent.verticalCenter
anchors.horizontalCenter: parent.horizontalCenter
//% "No search results"

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

@ -155,6 +155,7 @@ ModalPopup {
anchors.bottom: parent.bottom
anchors.right: parent.right
icon.name: "arrow-right"
type: "secondary"
icon.width: 20
icon.height: 16
enabled: !!pubKeys.length

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

@ -3,7 +3,7 @@ import "../../../../imports"
import "../../../../shared"
import "../../../../shared/status"
Rectangle {
Item {
id: noContactsRect
width: 260
//% "You don’t have any contacts yet. Invite your friends to start chatting."

1
ui/app/AppLayouts/Profile/Sections/ContactsContainer.qml
View File

@ -41,6 +41,7 @@ Item {
id: addButton
icon.name: "plusSign"
size: "medium"
type: "secondary"
anchors.verticalCenter: parent.verticalCenter
}

1
ui/app/AppLayouts/Profile/Sections/Ens/List.qml
View File

@ -132,6 +132,7 @@ Item {
id: addButton
icon.name: "plusSign"
size: "medium"
type: "secondary"
anchors.verticalCenter: parent.verticalCenter
}

1
ui/app/AppLayouts/Profile/Sections/NetworksModal.qml
View File

@ -37,6 +37,7 @@ ModalPopup {
id: addButton
icon.name: "plusSign"
size: "medium"
type: "secondary"
anchors.verticalCenter: parent.verticalCenter
}

1
ui/app/AppLayouts/Profile/Sections/SyncContainer.qml
View File

@ -49,6 +49,7 @@ Item {
id: addButton
icon.name: "plusSign"
size: "medium"
type: "secondary"
anchors.verticalCenter: parent.verticalCenter
}

1
ui/app/AppLayouts/Wallet/AccountSettingsModal.qml
View File

@ -46,7 +46,6 @@ ModalPopup {
StatusWalletColorSelect {
id: accountColorInput
selectedColor: currentAccount.iconColor.toUpperCase()
model: Constants.accountColors
anchors.top: accountNameInput.bottom
anchors.topMargin: marginBetweenInputs
anchors.left: parent.left

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

@ -75,11 +75,11 @@ Item {
id: walletDelegate
Rectangle {
property bool selected: index == selectedAccount
property bool selected: index === selectedAccount
id: rectangle
height: 64
color: selected ? iconColor : Style.current.transparent
color: selected ? Style.current.buttonForegroundColor : Style.current.transparent
radius: Style.current.radius
anchors.right: parent.right
anchors.rightMargin: Style.current.padding
@ -99,7 +99,8 @@ Item {
ColorOverlay {
anchors.fill: walletIcon
source: walletIcon
color: selected || !iconColor ? Style.current.white : iconColor // change image color
color: selected || !iconColor ? Style.current.white :
Utils.getCurrentThemeAccountColor(iconColor) || Style.current.accountColors[0]
}
StyledText {
id: walletName
@ -129,7 +130,7 @@ Item {
anchors.leftMargin: 0
font.pixelSize: 15
font.weight: Font.Medium
color: selected ? Style.current.white : Style.current.darkGrey
color: selected ? Style.current.white : Style.current.secondaryText
opacity: selected ? 0.7 : 1
}
StyledText {

2
ui/app/AppLayouts/Wallet/WalletHeader.qml
View File

@ -36,7 +36,7 @@ Item {
id: separatorDot
width: 8
height: 8
color: currentAccount.iconColor
color: Style.current.primary
anchors.top: title.verticalCenter
anchors.topMargin: -3
anchors.left: title.right

3
ui/app/AppLayouts/Wallet/WalletLayout.qml
View File

@ -90,13 +90,11 @@ ColumnLayout {
StatusTabButton {
id: assetBtn
tabColor: walletModel.currentAccount.iconColor
//% "Assets"
btnText: qsTrId("wallet-assets")
}
StatusTabButton {
id: collectiblesBtn
tabColor: walletModel.currentAccount.iconColor
anchors.left: assetBtn.right
anchors.leftMargin: 32
//% "Collectibles"
@ -104,7 +102,6 @@ ColumnLayout {
}
StatusTabButton {
id: historyBtn
tabColor: walletModel.currentAccount.iconColor
anchors.left: collectiblesBtn.right
anchors.leftMargin: 32
//% "History"

1
ui/app/AppLayouts/Wallet/components/AddAccount.qml
View File

@ -9,6 +9,7 @@ StatusRoundButton {
icon.name: "plusSign"
pressedIconRotation: 45
size: "medium"
type: "secondary"
width: 36
height: 36

3
ui/app/AppLayouts/Wallet/components/AddAccountWithPrivateKey.qml
View File

@ -55,7 +55,7 @@ ModalPopup {
passwordValidationError = ""
privateKeyValidationError = ""
accountNameValidationError = ""
accountColorInput.selectedColor = Constants.accountColors[Math.floor(Math.random() * Constants.accountColors.length)]
accountColorInput.selectedColor = Style.current.accountColors[Math.floor(Math.random() * Style.current.accountColors.length)]
passwordInput.forceActiveFocus(Qt.MouseFocusReason)
}
@ -95,7 +95,6 @@ ModalPopup {
StatusWalletColorSelect {
id: accountColorInput
model: Constants.accountColors
anchors.top: accountNameInput.bottom
anchors.topMargin: marginBetweenInputs
anchors.left: parent.left

3
ui/app/AppLayouts/Wallet/components/AddAccountWithSeed.qml
View File

@ -59,7 +59,7 @@ ModalPopup {
passwordValidationError = "";
seedValidationError = "";
accountNameValidationError = "";
accountColorInput.selectedColor = Constants.accountColors[Math.floor(Math.random() * Constants.accountColors.length)]
accountColorInput.selectedColor = Style.current.accountColors[Math.floor(Math.random() * Style.current.accountColors.length)]
passwordInput.forceActiveFocus(Qt.MouseFocusReason)
}
@ -108,7 +108,6 @@ ModalPopup {
StatusWalletColorSelect {
id: accountColorInput
model: Constants.accountColors
anchors.top: accountNameInput.bottom
anchors.topMargin: marginBetweenInputs
anchors.left: parent.left

3
ui/app/AppLayouts/Wallet/components/AddWatchOnlyAccount.qml
View File

@ -41,7 +41,7 @@ ModalPopup {
accountNameValidationError = "";
addressInput.text = "";
accountNameInput.text = "";
accountColorInput.selectedColor = Constants.accountColors[Math.floor(Math.random() * Constants.accountColors.length)]
accountColorInput.selectedColor = Style.current.accountColors[Math.floor(Math.random() * Style.current.accountColors.length)]
addressInput.forceActiveFocus(Qt.MouseFocusReason)
}
@ -68,7 +68,6 @@ ModalPopup {
StatusWalletColorSelect {
id: accountColorInput
model: Constants.accountColors
anchors.top: accountNameInput.bottom
anchors.topMargin: marginBetweenInputs
anchors.left: parent.left

8
ui/app/AppLayouts/Wallet/components/GenerateAccountModal.qml
View File

@ -41,7 +41,7 @@ ModalPopup {
accountNameValidationError = "";
passwordInput.text = "";
accountNameInput.text = "";
accountColorInput.selectedColor = Constants.accountColors[Math.floor(Math.random() * Constants.accountColors.length)]
accountColorInput.selectedColor = Style.current.accountColors[Math.floor(Math.random() * Style.current.accountColors.length)]
passwordInput.forceActiveFocus(Qt.MouseFocusReason)
}
@ -68,12 +68,10 @@ ModalPopup {
StatusWalletColorSelect {
id: accountColorInput
selectedColor: Constants.accountColors[0]
model: Constants.accountColors
selectedColor: Style.current.accountColors[0]
anchors.top: accountNameInput.bottom
anchors.topMargin: marginBetweenInputs
anchors.left: parent.left
anchors.right: parent.right
width: parent.width
}
footer: StatusButton {

7
ui/app/AppLayouts/Wallet/components/HeaderButton.qml
View File

@ -1,4 +1,5 @@
import QtQuick 2.13
import QtGraphicalEffects 1.13
import "../../../../imports"
import "../../../../shared"
@ -26,6 +27,12 @@ Rectangle {
fillMode: Image.PreserveAspectFit
source: imageSource
rotation: flipImage ? 180 : 0
ColorOverlay {
anchors.fill: parent
source: parent
color: Style.current.primary
}
}
StyledText {

13
ui/imports/Constants.qml
View File

@ -24,6 +24,9 @@ QtObject {
readonly property int notificationPopupTTL: 5000
readonly property string lightThemeName: "light"
readonly property string darkThemeName: "dark"
readonly property string chat: "chat"
readonly property string wallet: "wallet"
readonly property string timeline: "timeline"
@ -77,16 +80,6 @@ QtObject {
readonly property string zeroAddress: "0x0000000000000000000000000000000000000000"
readonly property var accountColors: [
"#9B832F",
"#D37EF4",
"#1D806F",
"#FA6565",
"#7CDA00",
"#887af9",
"#8B3131"
]
readonly property string networkMainnet: "mainnet_rpc"
readonly property string networkPOA: "poa_rpc"
readonly property string networkXDai: "xdai_rpc"

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

@ -2,6 +2,8 @@ import QtQuick 2.13
import "."
Theme {
property string name: "dark"
property color white: "#FFFFFF"
property color white2: "#FCFCFC"
property color black: "#000000"
@ -47,7 +49,7 @@ Theme {
property color primaryMenuItemHover: blue
property color primaryMenuItemTextHover: almostBlack
property color backgroundTertiary: tenPercentBlue
property color pillButtonTextColor: almostBlack
property color pillButtonTextColor: secondaryText
property color chatReplyCurrentUser: lightGrey
property color codeBackground: "#2E386B"
property color primarySelectionColor: "#b4c8ff"
@ -58,6 +60,7 @@ Theme {
property color mentionBgColor: "#1a0da4c9"
property color mentionMessageColor: "#1a0da4c9"
property color mentionMessageHoverColor: "#330da4c9"
property color replyBackground: "#484848"
property color buttonForegroundColor: blue
property color buttonBackgroundColor: secondaryBackground
@ -65,18 +68,30 @@ Theme {
property color buttonDisabledForegroundColor: lightGrey
property color buttonDisabledBackgroundColor: darkGrey
property color buttonWarnBackgroundColor: "#FFEAEE"
property color buttonOutlineHoveredWarnBackgroundColor: "#4dff5c7b"
property color buttonHoveredWarnBackgroundColor: red
property color buttonHoveredBackgroundColor: blue
property color roundedButtonForegroundColor: white
property color roundedButtonBackgroundColor: secondaryBackground
property color roundedButtonSecondaryForegroundColor: white
property color roundedButtonSecondaryForegroundColor: black
property color roundedButtonSecondaryBackgroundColor: buttonForegroundColor
property color roundedButtonSecondaryHoveredBackgroundColor: darkAccentBlue
property color roundedButtonSecondaryHoveredBackgroundColor: "#AAC6FF"
property color roundedButtonDisabledForegroundColor: buttonDisabledForegroundColor
property color roundedButtonDisabledBackgroundColor: buttonDisabledBackgroundColor
property color roundedButtonSecondaryDisabledForegroundColor: roundedButtonForegroundColor
property color roundedButtonSecondaryDisabledBackgroundColor: buttonDisabledForegroundColor
property color roundedButtonSecondaryDisabledForegroundColor: black
property color roundedButtonSecondaryDisabledBackgroundColor: lightGrey
property color tooltipBackgroundColor: white
property color tooltipForegroundColor: black
property var accountColors: [
"#AAC6FF",
"#EAD27B",
"#E6ABFC",
"#10A88E",
"#FB8383",
"#93DB33",
"#ADA3FF",
"#AD4343"
]
}

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

@ -2,6 +2,8 @@ import QtQuick 2.13
import "."
Theme {
property string name: "light"
property color white: "#FFFFFF"
property color white2: "#FCFCFC"
property color black: "#000000"
@ -57,6 +59,7 @@ Theme {
property color mentionBgColor: "#1a07bce9"
property color mentionMessageColor: "#1a07bce9"
property color mentionMessageHoverColor: "#3307bce9"
property color replyBackground: "#d7dadd"
property color buttonForegroundColor: blue
property color buttonBackgroundColor: secondaryBackground
@ -64,6 +67,7 @@ Theme {
property color buttonDisabledForegroundColor: buttonSecondaryColor
property color buttonDisabledBackgroundColor: grey
property color buttonWarnBackgroundColor: "#FFEAEE"
property color buttonOutlineHoveredWarnBackgroundColor: "#1affeaee"
property color buttonHoveredWarnBackgroundColor: red
property color buttonHoveredBackgroundColor: blue
@ -78,4 +82,15 @@ Theme {
property color roundedButtonSecondaryDisabledBackgroundColor: buttonDisabledForegroundColor
property color tooltipBackgroundColor: black
property color tooltipForegroundColor: white
property var accountColors: [
"#4360DF",
"#9B832F",
"#D37EF4",
"#1D806F",
"#FA6565",
"#7CDA00",
"#887Af9",
"#8B3131"
]
}

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

@ -12,6 +12,8 @@ QtObject {
property QtObject fontHexLight: FontLoader { id: _fontHexLight; source: "../../fonts/InterStatus/InterStatus-Light.otf"; }
property QtObject fontHexRegular: FontLoader { id: _fontHexRegular; source: "../../fonts/InterStatus/InterStatus-Regular.otf"; }
property string name
property color white
property color white2
property color black
@ -76,6 +78,8 @@ QtObject {
property int tertiaryTextFontSize: 12
property int asideTextFontSize: 10
property var accountColors
function updateFontSize(fontSize) {
switch (fontSize) {
case Constants.fontSizeXS:

19
ui/imports/Utils.qml
View File

@ -30,6 +30,25 @@ QtObject {
(!startsWith0x(value) && value.length === 64))
}
function getCurrentThemeAccountColor(color) {
const upperCaseColor = color.toUpperCase()
if (Style.current.accountColors.indexOf(upperCaseColor) > -1) {
return upperCaseColor
}
let colorIndex
if (Style.current.name === Constants.lightThemeName) {
colorIndex = Style.darkTheme.accountColors.indexOf(upperCaseColor)
} else {
colorIndex = Style.lightTheme.accountColors.indexOf(upperCaseColor)
}
if (colorIndex === -1) {
// Unknown color
return false
}
return Style.current.accountColors[colorIndex]
}
function getAppSectionIndex(section) {
let sectionId = -1
switch (section) {

1
ui/onboarding/Login.qml
View File

@ -143,6 +143,7 @@ Item {
StatusRoundButton {
id: submitBtn
size: "medium"
type: "secondary"
icon.name: "arrow-right"
icon.width: 18
icon.height: 14

3
ui/shared/StatusTabButton.qml
View File

@ -4,7 +4,6 @@ import "../imports"
TabButton {
property string btnText: "Default Button"
property string tabColor: Style.current.blue
id: tabButton
width: tabBtnText.width
@ -26,7 +25,7 @@ TabButton {
Rectangle {
visible: parent.checked || parent.hovered
color: parent.checked ? tabColor : Style.current.secondaryBackground
color: parent.checked ? Style.current.primary : Style.current.secondaryBackground
anchors.bottom: parent.bottom
width: 40
anchors.horizontalCenter: parent.horizontalCenter

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

@ -18,7 +18,7 @@ Button {
property color bgHoverColor: {
if (type === "warn") {
if (showBorder) {
return Style.current.buttonWarnBackgroundColor
return Style.current.buttonOutlineHoveredWarnBackgroundColor
}
return Utils.setColorAlpha(Style.current.buttonHoveredWarnBackgroundColor, 0.2)
}

8
ui/shared/status/StatusChatInputReplyArea.qml
View File

@ -7,7 +7,7 @@ import "../../shared"
Rectangle {
id: root
height: 50
color: Style.current.lightGrey
color: Style.current.replyBackground
radius: 16
clip: true
@ -29,7 +29,7 @@ Rectangle {
StyledText {
id: replyToUsername
text: "↪ " + userName
color: Style.current.black
color: Style.current.textColor
anchors.top: parent.top
anchors.topMargin: Style.current.halfPadding
anchors.left: parent.left
@ -52,7 +52,7 @@ Rectangle {
font.weight: Font.Normal
// Eliding only works for PlainText: https://bugreports.qt.io/browse/QTBUG-16567
textFormat: Text.PlainText
color: Style.current.black
color: Style.current.textColor
}
RoundButton {
@ -74,7 +74,7 @@ Rectangle {
ColorOverlay {
anchors.fill: iconImg
source: iconImg
color: Style.current.black
color: Style.current.textColor
antialiasing: true
}
}

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

@ -15,7 +15,7 @@ CheckBox {
radius: 3
color: (control.down || control.checked) ? Style.current.primary : Style.current.inputBackground
Image {
SVGImage {
source: "../img/checkmark.svg"
width: 16
height: 16

8
ui/shared/status/StatusRoundButton.qml
View File

@ -116,7 +116,7 @@ RoundButton {
return 20
}
}
icon.color: size === "medium" || size === "small" ?
icon.color: type === "secondary" ?
!enabled ?
Style.current.roundedButtonSecondaryDisabledForegroundColor :
Style.current.roundedButtonSecondaryForegroundColor
@ -131,9 +131,9 @@ RoundButton {
background: Rectangle {
anchors.fill: parent
opacity: hovered && size === "large" ? 0.2 : 1
opacity: hovered && size === "large" && type !== "secondary" ? 0.2 : 1
color: {
if (size === "medium" || size == "small") {
if (size === "medium" || size === "small" || type === "secondary") {
return !enabled ? Style.current.roundedButtonSecondaryDisabledBackgroundColor :
hovered ? (control.type === "warn" ? Style.current.red : Style.current.roundedButtonSecondaryHoveredBackgroundColor) :
(control.type === "warn" ? Style.current.lightRed : Style.current.roundedButtonSecondaryBackgroundColor)
@ -182,7 +182,7 @@ RoundButton {
anchors.fill: iconImg
source: iconImg
color: {
if (size === "medium" || size == "small") {
if (type === "secondary") {
return !control.enabled ?
Style.current.roundedButtonSecondaryDisabledForegroundColor :
(control.type === "warn" ? Style.current.danger : Style.current.roundedButtonSecondaryForegroundColor)

1
ui/shared/status/StatusStickersPopup.qml
View File

@ -179,6 +179,7 @@ Popup {
StatusRoundButton {
id: btnAddStickerPack
size: "medium"
type: "secondary"
icon.name: "plusSign"
implicitWidth: 24
implicitHeight: 24

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

@ -24,7 +24,7 @@ StatusIconButton {
anchors.rightMargin: 2
visible: control.selected
radius: width / 2
color: "#4EBC60"
color: Style.current.green
SVGImage {
id: checkmark
source: "../img/checkmark.svg"

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

@ -10,7 +10,7 @@ Item {
property string selectedColor
//% "Account color"
property string label: qsTrId("account-color")
property var model
property var model: Style.current.accountColors
height: childrenRect.height
StyledText {
@ -32,19 +32,28 @@ Item {
anchors.right: parent.right
Repeater {
model: control.model
Item {
height: colorBtn.height
width: colorBtn.width
StatusWalletColorButton {
id: colorBtn
icon.color: modelData
selected: control.selectedColor.toUpperCase() == modelData.toUpperCase()
selected: {
const upperCaseColor = control.selectedColor.toUpperCase()
const upperCaseModelDataColor = modelData.toUpperCase()
if (upperCaseColor === upperCaseModelDataColor) {
return true
}
// Check the colors in the other theme
const currentColor = Utils.getCurrentThemeAccountColor(upperCaseColor)
if (!currentColor) {
return false
}
return currentColor === upperCaseModelDataColor
}
onClicked: {
control.selectedColor = modelData.toUpperCase()
}
}
}
}
}
}