NCircleStat: polished the look

Widgets/NCircleStat.qml

@@ -61,17 +61,31 @@ Rectangle {
           ctx.reset()
           ctx.lineWidth = 6 * scaling * contentScale
 
-          // Track uses surfaceVariant for stronger contrast
+          // Track uses surface for stronger contrast
           ctx.strokeStyle = Color.mSurface
           ctx.beginPath()
           ctx.arc(cx, cy, r, start, endBg)
           ctx.stroke()
 
-          // Value arc
+          // Value arc with gradient starting at 25%
           const ratio = Math.max(0, Math.min(1, root.value / 100))
           const end = start + (endBg - start) * ratio
 
-          ctx.strokeStyle = Color.mPrimary
+          // Calculate gradient start point (25% into the arc)
+          const gradientStartRatio = 0.25
+          const gradientStart = start + (endBg - start) * gradientStartRatio
+
+          // Create linear gradient
+          const startX = cx + r * Math.cos(gradientStart)
+          const startY = cy + r * Math.sin(gradientStart)
+          const endX = cx + r * Math.cos(endBg)
+          const endY = cy + r * Math.sin(endBg)
+
+          const gradient = ctx.createLinearGradient(startX, startY, endX, endY)
+          gradient.addColorStop(0, Color.mPrimary)
+          gradient.addColorStop(1, Color.mOnSurface)
+
+          ctx.strokeStyle = gradient
           ctx.beginPath()
           ctx.arc(cx, cy, r, start, end)
           ctx.stroke()
@@ -90,26 +104,16 @@ Rectangle {
         horizontalAlignment: Text.AlignHCenter
       }
 
-      // Tiny circular badge for the icon, positioned inside below the percentage
-      Rectangle {
-        id: iconBadge
-        width: iconText.implicitWidth + Style.marginXXS * scaling
-        height: width
-        radius: width / 2
-        color: Color.mPrimary
+      NIcon {
+        id: iconText
         anchors.horizontalCenter: parent.horizontalCenter
         anchors.top: valueLabel.bottom
         anchors.topMargin: 8 * scaling * contentScale
-
-        NIcon {
-          id: iconText
-          anchors.centerIn: parent
-          icon: root.icon
-          color: Color.mOnPrimary
-          pointSize: Style.fontSizeS * scaling
-          horizontalAlignment: Text.AlignHCenter
-          verticalAlignment: Text.AlignVCenter
-        }
+        icon: root.icon
+        color: Color.mPrimary
+        pointSize: Style.fontSizeM * scaling
+        horizontalAlignment: Text.AlignHCenter
+        verticalAlignment: Text.AlignVCenter
       }
     }
   }