looks better

modules/pomodoro/Pomodoro.qml

@@ -1,5 +1,6 @@
 pragma ComponentBehavior: Bound
 
+import qs.components
 import qs.config
 import qs.constants
 import qs.services
@@ -49,29 +50,32 @@ StyledWindow {
                 font.pixelSize: 22
             }
 
+            Item {
+                implicitWidth: circle.width
+                implicitHeight: circle.height
+
                 Circle {
                     id: circle
                     radius: 150
-                color: Pomodoro.state == "timer" ? Theme.palette.primary : Theme.palette.warning
+                    borderColor: Theme.palette.base100
+                    strokeColor: Pomodoro.state == "timer" ? Theme.palette.primary : Theme.palette.warning
+                    strokeWidth: 12
+                    fillColor: button.hovered ? Theme.palette.primary : "transparent"
                     percentage: (Pomodoro.state == "timer" ? (Pomodoro.initialTime - Pomodoro.remainingTime) : Pomodoro.remainingTime) / Pomodoro.initialTime % 1
-
-                WrapperRectangle {
-                    color: "transparent"
-                    anchors.verticalCenter: parent.verticalCenter
-                    anchors.horizontalCenter: parent.horizontalCenter
-                    ColumnLayout {
-                        spacing: 18
-                        StyledButton {
-
-                            Layout.alignment: Qt.AlignHCenter
-
-                            focus: root.visible
-
-                            content: LucideIcon {
-                                text: Pomodoro.running ? Icons.square : Icons.play
-                                font.pixelSize: 20
                 }
 
+                StyledIconButton {
+                    id: button
+
+                    anchors.centerIn: circle
+
+                    radius: 9999
+
+                    focus: root.visible
+                    text: Pomodoro.running ? Icons.square : Icons.play
+                    font.pixelSize: 48
+
+                    background: undefined
                     onClicked: {
                         Pomodoro.toggle();
                     }
@@ -89,6 +93,8 @@ StyledWindow {
                         Pomodoro.reset();
                     }
                 }
+            }
+
             StyledText {
                 Layout.alignment: Qt.AlignHCenter
                 text: {
@@ -97,9 +103,6 @@ StyledWindow {
                 }
                 font.pixelSize: 16
             }
-                    }
-                }
-            }
 
             StyledButton {
 

widgets/Circle.qml

@@ -7,7 +7,10 @@ Item {
 
     property int radius: 0
     property double percentage: 0
-    property alias color: path.strokeColor
+    property alias borderColor: fill.strokeColor
+    property alias strokeColor: path.strokeColor
+    property alias strokeWidth: path.strokeWidth
+    property alias fillColor: fill.fillColor
 
     implicitWidth: radius * 2
     implicitHeight: radius * 2
@@ -17,6 +20,8 @@ Item {
         preferredRendererType: Shape.CurveRenderer
 
         ShapePath {
+            id: fill
+
             fillColor: Theme.palette.base100
             strokeColor: Theme.palette.base200
             strokeWidth: 8
@@ -34,8 +39,8 @@ Item {
             id: path
 
             fillColor: "transparent"
-            strokeWidth: 8
+            strokeWidth: 0
-            strokeColor: "white"
+            strokeColor: "transparent"
             capStyle: ShapePath.RoundCap
 
             PathAngleArc {