From d78b9b275f3fc8d545c0f44463b3f781525b1075 Mon Sep 17 00:00:00 2001
From: Benjamin Palko <benjaminpalko@hotmail.com>
Date: Fri, 29 Aug 2025 13:28:19 -0400
Subject: [PATCH] looks better

---
 modules/pomodoro/Pomodoro.qml | 87 ++++++++++++++++++-----------------
 widgets/Circle.qml            | 11 +++--
 2 files changed, 53 insertions(+), 45 deletions(-)

diff --git a/modules/pomodoro/Pomodoro.qml b/modules/pomodoro/Pomodoro.qml
index d1056ef..4292b1c 100644
--- a/modules/pomodoro/Pomodoro.qml
+++ b/modules/pomodoro/Pomodoro.qml
@@ -1,5 +1,6 @@
 pragma ComponentBehavior: Bound
 
+import qs.components
 import qs.config
 import qs.constants
 import qs.services
@@ -49,58 +50,60 @@ StyledWindow {
                 font.pixelSize: 22
             }
 
-            Circle {
-                id: circle
-                radius: 150
-                color: Pomodoro.state == "timer" ? Theme.palette.primary : Theme.palette.warning
-                percentage: (Pomodoro.state == "timer" ? (Pomodoro.initialTime - Pomodoro.remainingTime) : Pomodoro.remainingTime) / Pomodoro.initialTime % 1
+            Item {
+                implicitWidth: circle.width
+                implicitHeight: circle.height
 
-                WrapperRectangle {
-                    color: "transparent"
-                    anchors.verticalCenter: parent.verticalCenter
-                    anchors.horizontalCenter: parent.horizontalCenter
-                    ColumnLayout {
-                        spacing: 18
-                        StyledButton {
+                Circle {
+                    id: circle
+                    radius: 150
+                    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
+                }
 
-                            Layout.alignment: Qt.AlignHCenter
+                StyledIconButton {
+                    id: button
 
-                            focus: root.visible
+                    anchors.centerIn: circle
 
-                            content: LucideIcon {
-                                text: Pomodoro.running ? Icons.square : Icons.play
-                                font.pixelSize: 20
-                            }
+                    radius: 9999
 
-                            onClicked: {
-                                Pomodoro.toggle();
-                            }
+                    focus: root.visible
+                    text: Pomodoro.running ? Icons.square : Icons.play
+                    font.pixelSize: 48
 
-                            Keys.onSpacePressed: event => {
-                                event.accepted = true;
-                                Pomodoro.toggle();
-                            }
-                            Keys.onEscapePressed: event => {
-                                event.accepted = true;
-                                Visibility.pomodoro = false;
-                            }
-                            Keys.onTabPressed: event => {
-                                event.accepted = true;
-                                Pomodoro.reset();
-                            }
-                        }
-                        StyledText {
-                            Layout.alignment: Qt.AlignHCenter
-                            text: {
-                                const date = new Date(Pomodoro.remainingTime);
-                                return `${date.getMinutes().toString().padStart(2, "0")}:${(date.getSeconds() % 3600).toString().padStart(2, "0")}`;
-                            }
-                            font.pixelSize: 16
-                        }
+                    background: undefined
+                    onClicked: {
+                        Pomodoro.toggle();
+                    }
+
+                    Keys.onSpacePressed: event => {
+                        event.accepted = true;
+                        Pomodoro.toggle();
+                    }
+                    Keys.onEscapePressed: event => {
+                        event.accepted = true;
+                        Visibility.pomodoro = false;
+                    }
+                    Keys.onTabPressed: event => {
+                        event.accepted = true;
+                        Pomodoro.reset();
                     }
                 }
             }
 
+            StyledText {
+                Layout.alignment: Qt.AlignHCenter
+                text: {
+                    const date = new Date(Pomodoro.remainingTime);
+                    return `${date.getMinutes().toString().padStart(2, "0")}:${(date.getSeconds() % 3600).toString().padStart(2, "0")}`;
+                }
+                font.pixelSize: 16
+            }
+
             StyledButton {
 
                 Layout.alignment: Qt.AlignHCenter
diff --git a/widgets/Circle.qml b/widgets/Circle.qml
index 18cbc59..33207a5 100644
--- a/widgets/Circle.qml
+++ b/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
-            strokeColor: "white"
+            strokeWidth: 0
+            strokeColor: "transparent"
             capStyle: ShapePath.RoundCap
 
             PathAngleArc {