From c9c1dce6ea2cf12cef8cf0ee1479fd1e0cf6a15f Mon Sep 17 00:00:00 2001 From: emizzle Date: Thu, 17 Sep 2020 16:40:41 +1000 Subject: [PATCH] fix: Sticker market dark mode support --- .../Chat/components/StickerButton.qml | 22 ++++++++++++------- .../Chat/components/StickerMarket.qml | 1 + .../Chat/components/StickerPackDetails.qml | 2 +- .../components/StickerPackPurchaseModal.qml | 10 +++++---- ui/app/img/stickers_sad_icon.svg | 1 - ui/imports/Themes/DarkTheme.qml | 8 ++++--- ui/imports/Themes/LightTheme.qml | 1 + ui/shared/RoundedIcon.qml | 1 + 8 files changed, 29 insertions(+), 17 deletions(-) diff --git a/ui/app/AppLayouts/Chat/components/StickerButton.qml b/ui/app/AppLayouts/Chat/components/StickerButton.qml index 3a652cb6cd..3dc27ec031 100644 --- a/ui/app/AppLayouts/Chat/components/StickerButton.qml +++ b/ui/app/AppLayouts/Chat/components/StickerButton.qml @@ -27,8 +27,8 @@ Item { }) //% "Buy for %1 SNT" property string text: root.style === StickerButton.StyleType.Default ? packPrice : qsTrId("buy-for--1-snt").arg(packPrice ) - property color textColor: style === StickerButton.StyleType.Default ? Style.current.white : Style.current.blue - property color bgColor: style === StickerButton.StyleType.Default ? Style.current.blue : Style.current.lightBlue + property color textColor: style === StickerButton.StyleType.Default ? Style.current.pillButtonTextColor : Style.current.buttonForegroundColor + property color bgColor: style === StickerButton.StyleType.Default ? Style.current.blue : Style.current.secondaryBackground signal uninstallClicked() signal installClicked() signal cancelClicked() @@ -44,7 +44,7 @@ Item { target: root; //% "Uninstall" text: root.style === StickerButton.StyleType.Default ? "" : qsTrId("uninstall"); - textColor: root.style === StickerButton.StyleType.Default ? Style.current.white : Style.current.red; + textColor: root.style === StickerButton.StyleType.Default ? Style.current.pillButtonTextColor : Style.current.red; bgColor: root.style === StickerButton.StyleType.Default ? Style.current.green : Style.current.lightRed; icon: new Object({ path: "../../../img/check.svg", @@ -83,8 +83,8 @@ Item { PropertyChanges { target: root; text: root.style === StickerButton.StyleType.Default ? packPrice : packPrice + " SNT"; - textColor: root.style === StickerButton.StyleType.Default ? Style.current.white : Style.current.darkGrey - bgColor: root.style === StickerButton.StyleType.Default ? Style.current.darkGrey : Style.current.grey; + textColor: root.style === StickerButton.StyleType.Default ? Style.current.pillButtonTextColor : Style.current.darkGrey + bgColor: root.style === StickerButton.StyleType.Default ? Style.current.darkGrey : Style.current.buttonDisabledBackgroundColor; enabled: false; } }, @@ -95,7 +95,7 @@ Item { target: root; //% "Pending..." text: qsTrId("pending---"); - textColor: root.style === StickerButton.StyleType.Default ? Style.current.white : Style.current.darkGrey + textColor: root.style === StickerButton.StyleType.Default ? Style.current.pillButtonTextColor : Style.current.darkGrey bgColor: root.style === StickerButton.StyleType.Default ? Style.current.darkGrey : Style.current.grey; enabled: false; icon: new Object({ @@ -113,8 +113,8 @@ Item { target: root; //% "Cancel" text: qsTrId("browsing-cancel"); - textColor: root.style === StickerButton.StyleType.Default ? Style.current.white : Style.current.red; - bgColor: root.style === StickerButton.StyleType.Default ? Style.current.darkGrey : Style.current.lightRed; + textColor: root.style === StickerButton.StyleType.Default ? Style.current.pillButtonTextColor : Style.current.red; + bgColor: root.style === StickerButton.StyleType.Default ? Style.current.red : Style.current.lightRed; } }, State { @@ -184,6 +184,12 @@ Item { running: root.icon.runAnimation loops: Animation.Infinite } + ColorOverlay { + anchors.fill: roundedIconImage + source: roundedIconImage + color: Style.current.pillButtonTextColor + antialiasing: true + } states: [ State { name: "installed" diff --git a/ui/app/AppLayouts/Chat/components/StickerMarket.qml b/ui/app/AppLayouts/Chat/components/StickerMarket.qml index 5a3a40d425..0dd24e4d58 100644 --- a/ui/app/AppLayouts/Chat/components/StickerMarket.qml +++ b/ui/app/AppLayouts/Chat/components/StickerMarket.qml @@ -147,6 +147,7 @@ Item { height: 28 iconWidth: 17.5 iconHeight: 13.5 + iconColor: Style.current.pillButtonTextColor source: "../../../img/arrowUp.svg" rotation: 270 onClicked: { diff --git a/ui/app/AppLayouts/Chat/components/StickerPackDetails.qml b/ui/app/AppLayouts/Chat/components/StickerPackDetails.qml index 80cac805f4..8f25acb5f1 100644 --- a/ui/app/AppLayouts/Chat/components/StickerPackDetails.qml +++ b/ui/app/AppLayouts/Chat/components/StickerPackDetails.qml @@ -28,7 +28,7 @@ Item { Text { id: txtPackName text: packName - color: Style.current.black + color: Style.current.textColor font.family: Style.current.fontBold.name font.weight: Font.Bold font.pixelSize: packNameFontSize diff --git a/ui/app/AppLayouts/Chat/components/StickerPackPurchaseModal.qml b/ui/app/AppLayouts/Chat/components/StickerPackPurchaseModal.qml index 98863b44ad..c94f4b92d5 100644 --- a/ui/app/AppLayouts/Chat/components/StickerPackPurchaseModal.qml +++ b/ui/app/AppLayouts/Chat/components/StickerPackPurchaseModal.qml @@ -4,6 +4,7 @@ import QtQuick.Layouts 1.13 import QtQuick.Dialogs 1.3 import "../../../../imports" import "../../../../shared" +import "../../../../shared/status" ModalPopup { id: root @@ -51,7 +52,7 @@ ModalPopup { anchors.rightMargin: Style.current.padding onGroupActivated: { root.title = group.headerText - btnNext.label = group.footerText + btnNext.text = group.footerText } TransactionFormGroup { id: group1 @@ -196,11 +197,12 @@ ModalPopup { stack.back() } } - StyledButton { + StatusButton { id: btnNext anchors.right: parent.right - label: qsTr("Next") - disabled: !stack.currentGroup.isValid + text: qsTr("Next") + enabled: stack.currentGroup.isValid && !stack.currentGroup.isPending + state: stack.currentGroup.isPending ? "pending" : "default" onClicked: { const isValid = stack.currentGroup.validate() diff --git a/ui/app/img/stickers_sad_icon.svg b/ui/app/img/stickers_sad_icon.svg index 922b0808e9..4da66902f0 100644 --- a/ui/app/img/stickers_sad_icon.svg +++ b/ui/app/img/stickers_sad_icon.svg @@ -1,4 +1,3 @@ - diff --git a/ui/imports/Themes/DarkTheme.qml b/ui/imports/Themes/DarkTheme.qml index 52ac11647f..9abda68a44 100644 --- a/ui/imports/Themes/DarkTheme.qml +++ b/ui/imports/Themes/DarkTheme.qml @@ -13,6 +13,7 @@ Theme { property color darkAccentBlue: "#2946C4" property color transparent: "#00000000" property color darkGrey: "#838C91" + property color darkerGrey: "#252528" property color lightBlueText: "#8f9fec" property color darkBlue: "#3c55c9" property color darkBlueBtn: "#5a70dd" @@ -24,7 +25,7 @@ Theme { property color tenPercentBlue: Qt.rgba(67, 96, 223, 0.1) property color background: almostBlack - property color border: "#252528" + property color border: darkerGrey property color borderSecondary: tenPercentWhite property color borderTertiary: blue property color textColor: white @@ -35,7 +36,7 @@ Theme { property color inputBorderFocus: blue property color inputColor: darkGrey property color modalBackground: background - property color backgroundHover: "#252528" + property color backgroundHover: darkerGrey property color secondaryText: darkGrey property color secondaryHover: tenPercentWhite property color primary: blue @@ -44,11 +45,12 @@ Theme { property color primaryMenuItemHover: blue property color primaryMenuItemTextHover: almostBlack property color backgroundTertiary: tenPercentBlue + property color pillButtonTextColor: almostBlack property color buttonForegroundColor: blue property color buttonBackgroundColor: secondaryBackground property color buttonDisabledForegroundColor: darkGrey - property color buttonDisabledBackgroundColor: grey + property color buttonDisabledBackgroundColor: darkerGrey property color roundedButtonForegroundColor: white property color roundedButtonBackgroundColor: secondaryBackground diff --git a/ui/imports/Themes/LightTheme.qml b/ui/imports/Themes/LightTheme.qml index 0cc134cb3f..a68943cd67 100644 --- a/ui/imports/Themes/LightTheme.qml +++ b/ui/imports/Themes/LightTheme.qml @@ -43,6 +43,7 @@ Theme { property color primaryMenuItemHover: blue property color primaryMenuItemTextHover: white property color backgroundTertiary: tenPercentBlue + property color pillButtonTextColor: white property color buttonForegroundColor: blue property color buttonBackgroundColor: secondaryBackground diff --git a/ui/shared/RoundedIcon.qml b/ui/shared/RoundedIcon.qml index b97d4291fd..eed1d485d2 100644 --- a/ui/shared/RoundedIcon.qml +++ b/ui/shared/RoundedIcon.qml @@ -37,6 +37,7 @@ Rectangle { anchors.fill: roundedIconImage source: roundedIconImage color: root.iconColor + rotation: roundedIconImage.rotation } }