fix: fix sticker popups to have the right colors and right size

ui/shared/status/StatusStickerButton.qml

@@ -27,7 +27,7 @@ Item {
     })
     //% "Buy for %1 SNT"
     property string text: root.style === StatusStickerButton.StyleType.Default ? packPrice : qsTrId("buy-for--1-snt").arg(packPrice )
-    property color textColor: style === StatusStickerButton.StyleType.Default ? Style.current.pillButtonTextColor : Style.current.buttonForegroundColor
+    property color textColor: style === StatusStickerButton.StyleType.Default ? Style.current.roundedButtonSecondaryForegroundColor : Style.current.buttonForegroundColor
     property color bgColor: style === StatusStickerButton.StyleType.Default ? Style.current.blue : Style.current.secondaryBackground
     signal uninstallClicked()
     signal installClicked()
@@ -44,7 +44,7 @@ Item {
                 target: root;
                 //% "Uninstall"
                 text: root.style === StatusStickerButton.StyleType.Default ? "" : qsTrId("uninstall");
-                textColor: root.style === StatusStickerButton.StyleType.Default ? Style.current.pillButtonTextColor : Style.current.red;
+                textColor: root.style === StatusStickerButton.StyleType.Default ? Style.current.roundedButtonSecondaryForegroundColor : Style.current.red;
                 bgColor: root.style === StatusStickerButton.StyleType.Default ? Style.current.green : Style.current.lightRed;
                 icon: new Object({
                     path: "../../app/img/check.svg",
@@ -83,7 +83,7 @@ Item {
             PropertyChanges {
                 target: root;
                 text: root.style === StatusStickerButton.StyleType.Default ? packPrice : packPrice + " SNT";
-                textColor: root.style === StatusStickerButton.StyleType.Default ? Style.current.pillButtonTextColor : Style.current.darkGrey
+                textColor: root.style === StatusStickerButton.StyleType.Default ? Style.current.roundedButtonSecondaryForegroundColor : Style.current.darkGrey
                 bgColor: root.style === StatusStickerButton.StyleType.Default ? Style.current.darkGrey : Style.current.buttonDisabledBackgroundColor;
                 enabled: false;
             }
@@ -95,7 +95,7 @@ Item {
                 target: root;
                 //% "Pending..."
                 text: qsTrId("pending---");
-                textColor: root.style === StatusStickerButton.StyleType.Default ? Style.current.pillButtonTextColor : Style.current.darkGrey
+                textColor: root.style === StatusStickerButton.StyleType.Default ? Style.current.roundedButtonSecondaryForegroundColor : Style.current.darkGrey
                 bgColor: root.style === StatusStickerButton.StyleType.Default ? Style.current.darkGrey : Style.current.grey;
                 enabled: false;
                 icon: new Object({
@@ -113,7 +113,7 @@ Item {
                 target: root;
                 //% "Cancel"
                 text: qsTrId("browsing-cancel");
-                textColor: root.style === StatusStickerButton.StyleType.Default ? Style.current.pillButtonTextColor : Style.current.red;
+                textColor: root.style === StatusStickerButton.StyleType.Default ? Style.current.pillButtonTexroundedButtonSecondaryForegroundColortColor : Style.current.red;
                 bgColor: root.style === StatusStickerButton.StyleType.Default ? Style.current.red : Style.current.lightRed;
             }
         },
@@ -141,7 +141,7 @@ Item {
         id: pill
         anchors.right: parent.right
         width: textMetrics.width + roundedIconImage.width + (Style.current.smallPadding * 2) + 6.7
-        height: 26
+        height: 44
         color: root.bgColor
         radius: root.style === StatusStickerButton.StyleType.Default ? (width / 2) : 8
 
@@ -187,7 +187,7 @@ Item {
             ColorOverlay {
                 anchors.fill: roundedIconImage
                 source: roundedIconImage
-                color: Style.current.pillButtonTextColor
+                color: Style.current.roundedButtonSecondaryForegroundColor
                 antialiasing: true
             }
             states: [

ui/shared/status/StatusStickerMarket.qml

@@ -48,23 +48,29 @@ Item {
                     stickerPackDetailsPopup.open()
                 }
             }
+
             ModalPopup {
                 id: stickerPackDetailsPopup
                 height: 472
                 header: StatusStickerPackDetails {
-                    height: 46
-                    anchors.top: parent.top
-                    anchors.left: parent.left
-                    anchors.topMargin: Style.current.padding
-                    width: parent.width - (Style.current.padding * 2)
                     packThumb: thumbnail
                     packName: name
                     packAuthor: author
                     packNameFontSize: 17
                     spacing: Style.current.padding / 2
                 }
+
+                contentWrapper.anchors.topMargin: 0
+                contentWrapper.anchors.bottomMargin: 0
+                StatusStickerList {
+                    id: stickerGridInPopup
+                    anchors.fill: parent
+                    anchors.topMargin: Style.current.padding
+                    model: stickers
+                }
+
                 footer: StatusStickerButton {
-                    height: 76
+                    height: 44
                     anchors.right: parent.right
                     style: StatusStickerButton.StyleType.LargeNoIcon
                     packPrice: price
@@ -80,13 +86,6 @@ Item {
                         root.buyClicked(packId)
                     }
                 }
-                contentWrapper.anchors.topMargin: 0
-                contentWrapper.anchors.bottomMargin: 0
-                StatusStickerList {
-                    id: stickerGridInPopup
-                    model: stickers
-                    height: 350
-                }
             }
             Component {
                 id: stickerPackPurchaseModal
@@ -150,7 +149,7 @@ Item {
             height: 28
             iconWidth: 17.5
             iconHeight: 13.5
-            iconColor: Style.current.pillButtonTextColor
+            iconColor: Style.current.roundedButtonSecondaryForegroundColor
             source: "../../app/img/arrowUp.svg"
             rotation: 270
             onClicked: {

ui/shared/status/StatusStickerPackClickPopup.qml

@@ -37,19 +37,37 @@ ModalPopup {
     height: 472
     header: StatusStickerPackDetails {
         id: stickerGrid
-        height: 76
-        anchors.top: parent.top
-        anchors.left: parent.left
-        anchors.topMargin: Style.current.padding
-        width: parent.width - (Style.current.padding * 2)
         packThumb: thumbnail
         packName: name
         packAuthor: author
         packNameFontSize: 17
         spacing: Style.current.padding / 2
     }
+
+    contentWrapper.anchors.topMargin: 0
+    contentWrapper.anchors.bottomMargin: 0
+    StatusStickerList {
+        id: stickerGridInPopup
+        model: stickers
+        anchors.fill: parent
+        anchors.topMargin: Style.current.padding
+        Component {
+            id: stickerPackPurchaseModal
+            StatusStickerPackPurchaseModal {
+                onClosed: {
+                    destroy()
+                }
+                stickerPackId: packId
+                packPrice: price
+                width: stickerPackDetailsPopup.width
+                height: stickerPackDetailsPopup.height
+                showBackBtn: stickerPackDetailsPopup.opened
+            }
+        }
+    }
+
     footer: StatusStickerButton {
-        height: 76
+        height: 44
         anchors.right: parent.right
         style: StatusStickerButton.StyleType.LargeNoIcon
         packPrice: price
@@ -71,24 +89,4 @@ ModalPopup {
             root.buyClicked(packId)
         }
     }
-    contentWrapper.anchors.topMargin: 0
-    contentWrapper.anchors.bottomMargin: 0
-    StatusStickerList {
-        id: stickerGridInPopup
-        model: stickers
-        height: 350
-        Component {
-        id: stickerPackPurchaseModal
-        StatusStickerPackPurchaseModal {
-            onClosed: {
-                destroy()
-            }
-            stickerPackId: packId
-            packPrice: price
-            width: stickerPackDetailsPopup.width
-            height: stickerPackDetailsPopup.height
-            showBackBtn: stickerPackDetailsPopup.opened
-        }
-    }
-    }
 }

ui/shared/status/StatusStickerPackDetails.qml

@@ -6,42 +6,47 @@ import "../../shared"
 
 Item {
     id: root
-    default property alias content: rest.children
     property string packThumb: "QmfZrHmLR5VvkXSDbArDR3TX6j4FgpDcrvNz2fHSJk1VvG"
     property string packName: "Status Cat"
     property string packAuthor: "cryptoworld1373"
     property int packNameFontSize: 15
     property int spacing: Style.current.padding
 
+    height: childrenRect.height
+    width: parent.width
+
     RoundedImage {
         id: imgThumb
         anchors.left: parent.left
-        anchors.verticalCenter: parent.verticalCenter
         width: 40
         height: 40
         source: "https://ipfs.infura.io/ipfs/" + packThumb
     }
+    
     Column {
         anchors.left: imgThumb.right
         anchors.leftMargin: root.spacing
-        anchors.verticalCenter: parent.verticalCenter
+        StyledText {
-        Text {
             id: txtPackName
             text: packName
-            color: Style.current.textColor
             font.family: Style.current.fontBold.name
             font.weight: Font.Bold
             font.pixelSize: packNameFontSize
         }
-        Text {
+        StyledText {
-            color: Style.current.darkGrey
+            color: Style.current.secondaryText
             text: packAuthor
             font.family: Style.current.fontRegular.name
             font.pixelSize: 15
         }
     }
-    Item {
+
+    Separator {
+        anchors.top: imgThumb.bottom
+        anchors.topMargin: Style.current.padding
+        anchors.left: parent.left
+        anchors.leftMargin: -Style.current.padding
         anchors.right: parent.right
-        id: rest
+        anchors.rightMargin: -Style.current.padding
     }
 }