fix: Sticker market dark mode support

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 textColor: style === StickerButton.StyleType.Default ? Style.current.pillButtonTextColor : Style.current.buttonForegroundColor
-    property color bgColor: style === StickerButton.StyleType.Default ? Style.current.blue : Style.current.lightBlue
+    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
+                textColor: root.style === StickerButton.StyleType.Default ? Style.current.pillButtonTextColor : Style.current.darkGrey
-                bgColor: root.style === StickerButton.StyleType.Default ? Style.current.darkGrey : Style.current.grey;
+                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;
+                textColor: root.style === StickerButton.StyleType.Default ? Style.current.pillButtonTextColor : Style.current.red;
-                bgColor: root.style === StickerButton.StyleType.Default ? Style.current.darkGrey : Style.current.lightRed;
+                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"

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

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

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")
+            text: qsTr("Next")
-            disabled: !stack.currentGroup.isValid
+            enabled: stack.currentGroup.isValid && !stack.currentGroup.isPending
+            state: stack.currentGroup.isPending ? "pending" : "default"
             onClicked: {
                 const isValid = stack.currentGroup.validate()
 

ui/app/img/stickers_sad_icon.svg

@@ -1,4 +1,3 @@
 <svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="56" height="56" fill="white"/>
 <path fill-rule="evenodd" clip-rule="evenodd" d="M28 49.875C38.4868 49.875 47.25 42.4958 49.3805 32.6466C49.7619 30.8835 48.0357 29.5236 46.2386 29.6801C45.7068 29.7264 45.1686 29.75 44.625 29.75C34.4768 29.75 26.25 21.5232 26.25 11.375C26.25 10.8314 26.2736 10.2932 26.3199 9.76137C26.4764 7.96426 25.1165 6.23814 23.3534 6.61951C13.5042 8.74997 6.125 17.5132 6.125 28C6.125 40.0812 15.9188 49.875 28 49.875ZM44.625 28C46.0743 28 47.4794 27.8147 48.8183 27.4669C49.2523 27.3541 49.4609 26.873 49.2278 26.49C48.7244 25.663 47.973 24.6784 47.0151 23.5608C45.0993 21.3257 42.5276 18.7525 39.8876 16.1124C37.2475 13.4724 34.6743 10.9007 32.4392 8.98495C31.3216 8.02699 30.337 7.27556 29.51 6.77219C29.127 6.53905 28.6459 6.74772 28.5331 7.1817C28.1853 8.52059 28 9.92566 28 11.375C28 20.5567 35.4433 28 44.625 28ZM28 51.625C41.0477 51.625 51.625 41.0477 51.625 28C51.625 25.375 46.375 20.125 41.125 14.875C35.875 9.625 30.625 4.375 28 4.375C14.9523 4.375 4.375 14.9523 4.375 28C4.375 41.0477 14.9523 51.625 28 51.625ZM19.8578 41.7544C21.9375 39.7461 24.8144 38.5 28 38.5C31.1856 38.5 34.0625 39.7461 36.1422 41.7544C36.4898 42.0901 37.0437 42.0804 37.3794 41.7328C37.7151 41.3852 37.7054 40.8313 37.3578 40.4956C34.9588 38.1789 31.6486 36.75 28 36.75C24.3514 36.75 21.0412 38.1789 18.6422 40.4956C18.2946 40.8313 18.2849 41.3852 18.6206 41.7328C18.9563 42.0804 19.5102 42.0901 19.8578 41.7544Z" fill="#939BA1"/>
 </svg>

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

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

ui/shared/RoundedIcon.qml

@@ -37,6 +37,7 @@ Rectangle {
             anchors.fill: roundedIconImage
             source: roundedIconImage
             color: root.iconColor
+            rotation: roundedIconImage.rotation
         }
     }