Theme: theme usage in Shape and other non-Item components fixed

Author: micieslak

ui/StatusQ/src/StatusQ/Components/StatusCommunityCard.qml

@@ -181,10 +181,12 @@ Rectangle {
         readonly property int bannerRadius: (root.cardSize === StatusCommunityCard.Size.Big) ? 20 : 8
         readonly property int bannerRadiusHovered: (root.cardSize === StatusCommunityCard.Size.Big) ? 30 : 16
         readonly property int cardRadius: (root.cardSize === StatusCommunityCard.Size.Big) ? 16 : 8
-        readonly property color cardColor: Theme.palette.name === "light" ? Theme.palette.indirectColor1 : Theme.palette.baseColor2
-        readonly property color fontColor: Theme.palette.directColor1
-        readonly property color loadingColor1: Theme.palette.baseColor5
-        readonly property color loadingColor2: Theme.palette.baseColor4
+        readonly property color cardColor: root.Theme.palette.name === "light"
+                                           ? root.Theme.palette.indirectColor1
+                                           : root.Theme.palette.baseColor2
+        readonly property color fontColor: root.Theme.palette.directColor1
+        readonly property color loadingColor1: root.Theme.palette.baseColor5
+        readonly property color loadingColor2: root.Theme.palette.baseColor4
         readonly property int titleFontWeight: (root.cardSize === StatusCommunityCard.Size.Big) ? Font.Bold : Font.Medium
 
         function numberFormat(number) {

ui/StatusQ/src/StatusQ/Components/StatusContactVerificationIcons.qml

@@ -14,13 +14,13 @@ Row {
 
     property StatusAssetSettings mutualConnectionIcon: StatusAssetSettings {
         name: root.tiny ? "tiny/tiny-contact" : "tiny/contact"
-        color: Theme.palette.indirectColor1
+        color: root.Theme.palette.indirectColor1
         width: Math.min(bgWidth, dummyImage.width)
         height: Math.min(bgHeight, dummyImage.height)
         bgWidth: root.tiny ? 10 : 16.5
         bgHeight: root.tiny ? 10 : 16.5
         bgRadius: bgWidth / 2
-        bgColor: Theme.palette.primaryColor1
+        bgColor: root.Theme.palette.primaryColor1
         // Only used to get implicit width and height from the actual image
         property Image dummyImage: Image {
             source: mutualConnectionIcon.name ? Qt.resolvedUrl("../../assets/img/icons/" + mutualConnectionIcon.name + ".svg"): ""
@@ -33,13 +33,14 @@ Row {
         // None and Untrustworthy types, same aspect (Icon will not be visible in case of None type):
         name: root.trustIndicator === StatusContactVerificationIcons.TrustedType.Verified ? root.tiny ? "tiny/tiny-checkmark" : "tiny/checkmark"
                                                                                           : root.tiny ? "tiny/tiny-exclamation" : "tiny/exclamation"
-        color: Theme.palette.indirectColor1
+        color: root.Theme.palette.indirectColor1
         width: Math.min(bgWidth, dummyImage.width)
         height: Math.min(bgHeight, dummyImage.height)
         bgWidth: root.tiny ? 10 : 16
         bgHeight: root.tiny ? 10 : 16
         bgRadius: bgWidth / 2
-        bgColor: root.trustIndicator === StatusContactVerificationIcons.TrustedType.Verified ? Theme.palette.successColor1 : Theme.palette.dangerColor1
+        bgColor: root.trustIndicator === StatusContactVerificationIcons.TrustedType.Verified ? root.Theme.palette.successColor1
+                                                                                             : root.Theme.palette.dangerColor1
         // Only used to get implicit width and height from the actual image
         property Image dummyImage: Image {
             source: trustContactIcon.name ? Qt.resolvedUrl("../../assets/img/icons/" + trustContactIcon.name + ".svg"): ""
@@ -50,7 +51,7 @@ Row {
 
     property StatusAssetSettings blockedContactIcon: StatusAssetSettings {
         name: root.isBlocked ? "cancel" : ""
-        color: Theme.palette.dangerColor1
+        color: root.Theme.palette.dangerColor1
         width: Math.min(bgWidth, dummyImage.width)
         height: Math.min(bgHeight, dummyImage.height)
         bgWidth: root.tiny ? 10 : 16

ui/StatusQ/src/StatusQ/Components/private/statusMessage/StatusMessageReply.qml

@@ -37,7 +37,12 @@ Item {
             antialiasing: true
 
             ShapePath {
-                strokeColor: Qt.hsla(Theme.palette.baseColor1.hslHue, Theme.palette.baseColor1.hslSaturation, Theme.palette.baseColor1.hslLightness, 0.4)
+                strokeColor: {
+                    const base = root.Theme.palette.baseColor1
+                    return Qt.hsla(base.hslHue,
+                                   base.hslSaturation,
+                                   base.hslLightness, 0.4)
+                }
                 strokeWidth: 3
                 fillColor: "transparent"
                 capStyle: ShapePath.RoundCap

ui/app/AppLayouts/Wallet/panels/SwapInputPanel.qml

@@ -177,7 +177,7 @@ Control {
     background: Shape {
         id: shape
 
-        property int radius: Theme.radius
+        property int radius: root.Theme.radius
         property int leftTopRadius: radius
         property int rightTopRadius: radius
         property int leftBottomRadius: radius
@@ -189,8 +189,8 @@ Control {
 
         ShapePath {
             id: path
-            fillColor: Theme.palette.indirectColor3
-            strokeColor: amountToSendInput.cursorVisible ? Theme.palette.directColor7 : Theme.palette.directColor8
+            fillColor: root.Theme.palette.indirectColor3
+            strokeColor: amountToSendInput.cursorVisible ? root.Theme.palette.directColor7 : root.Theme.palette.directColor8
             strokeWidth: 1
             capStyle: ShapePath.RoundCap
 

ui/imports/shared/controls/ShapeRectangle.qml

@@ -27,7 +27,7 @@ import utils
    \sa Shape
    \sa ShapePath
 */
-Shape {
+Item {
     id: root
 
     property string icon
@@ -46,6 +46,61 @@ Shape {
     implicitWidth: 448
     implicitHeight: 44
 
+    Shape {
+        anchors.fill: parent
+        ShapePath {
+            id: path
+            fillColor: "transparent"
+            strokeColor: root.Theme.palette.baseColor2
+            strokeWidth: 1
+            strokeStyle: ShapePath.DashLine
+            dashPattern: [4, 4]
+
+            startX: root.leftTopRadius
+            startY: 0
+            PathLine {
+                x: root.width - root.rightTopRadius
+                y: 0
+            }
+            PathArc {
+                x: root.width
+                y: root.rightTopRadius
+                radiusX: root.rightTopRadius
+                radiusY: root.rightTopRadius
+            }
+            PathLine {
+                x: root.width
+                y: root.height - root.rightBottomRadius
+            }
+            PathArc {
+                x:root.width - root.rightBottomRadius
+                y: root.height
+                radiusX: root.rightBottomRadius
+                radiusY: root.rightBottomRadius
+            }
+            PathLine {
+                x: root.leftBottomRadius
+                y: root.height
+            }
+            PathArc {
+                x:0
+                y: root.height - root.leftBottomRadius
+                radiusX: root.leftBottomRadius
+                radiusY: root.leftBottomRadius
+            }
+            PathLine {
+                x: 0
+                y: root.leftTopRadius
+            }
+            PathArc {
+                x:root.leftTopRadius
+                y: 0
+                radiusX: root.leftTopRadius
+                radiusY: root.leftTopRadius
+            }
+        }
+    }
+
     RowLayout {
         spacing: 4
         anchors.centerIn: parent
@@ -68,56 +123,4 @@ Shape {
             visible: !!text
         }
     }
-
-    ShapePath {
-        id: path
-        fillColor: "transparent"
-        strokeColor: Theme.palette.baseColor2
-        strokeWidth: 1
-        strokeStyle: ShapePath.DashLine
-        dashPattern: [4, 4]
-
-        startX: root.leftTopRadius
-        startY: 0
-        PathLine {
-            x: root.width - root.rightTopRadius
-            y: 0
-        }
-        PathArc {
-            x: root.width
-            y: root.rightTopRadius
-            radiusX: root.rightTopRadius
-            radiusY: root.rightTopRadius
-        }
-        PathLine {
-            x: root.width
-            y: root.height - root.rightBottomRadius
-        }
-        PathArc {
-            x:root.width - root.rightBottomRadius
-            y: root.height
-            radiusX: root.rightBottomRadius
-            radiusY: root.rightBottomRadius
-        }
-        PathLine {
-            x: root.leftBottomRadius
-            y: root.height
-        }
-        PathArc {
-            x:0
-            y: root.height - root.leftBottomRadius
-            radiusX: root.leftBottomRadius
-            radiusY: root.leftBottomRadius
-        }
-        PathLine {
-            x: 0
-            y: root.leftTopRadius
-        }
-        PathArc {
-            x:root.leftTopRadius
-            y: 0
-            radiusX: root.leftTopRadius
-            radiusY: root.leftTopRadius
-        }
-    }
 }