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

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

View File

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

View File

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

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"

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

View File

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

View File

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

View File

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

View File

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

View File

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

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

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 {

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

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"

View File

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

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

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

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

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 {

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 {

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"

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"
]
}

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"
]
}

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:

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

View File

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

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

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

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

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

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)

View File

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

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"

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