components/StyledIconButton.qml

@@ -1,38 +0,0 @@
-import qs.config
-import QtQuick
-import QtQuick.Controls
-
-RoundButton {
-    id: control
-
-    radius: 8
-    font.family: Theme.lucide.font.family
-    font.pixelSize: 15
-    font.bold: true
-    padding: 8
-
-    HoverHandler {
-        cursorShape: Qt.PointingHandCursor
-    }
-
-    contentItem: Text {
-        text: control.text
-        color: control.hovered ? Theme.palette.primarycontent : Theme.palette.basecontent
-        Behavior on color {
-            ColorAnimation {
-                duration: 100
-            }
-        }
-        font: control.font
-    }
-
-    background: Rectangle {
-        color: control.hovered ? Theme.palette.primary : Theme.palette.base100
-        Behavior on color {
-            ColorAnimation {
-                duration: 100
-            }
-        }
-        radius: control.radius
-    }
-}

modules/pomodoro/Pomodoro.qml

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

modules/storybook/Storybook.qml

@@ -2,7 +2,6 @@ pragma ComponentBehavior: Bound
 
 import qs.components
 import qs.config
-import qs.constants
 import qs.services
 import qs.widgets
 import Quickshell.Hyprland
@@ -46,21 +45,9 @@ StyledWindow {
                 Layout.alignment: Qt.AlignHCenter
                 text: "Components"
                 font.pixelSize: 24
-                font.bold: true
-                font.underline: true
                 bottomPadding: 24
             }
 
-            ColumnLayout {
-                StyledText {
-                    text: "Switch"
-                    font.pixelSize: 18
-                }
-                StyledIconButton {
-                    text: Icons.square
-                }
-            }
-
             ColumnLayout {
                 StyledText {
                     text: "Switch"

widgets/Circle.qml

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